仅用js+css实现浏览器不向图片服务器传输Referer

向第三方图片服务器（或CDN）隐藏当前页面域名及地址

<meta charset="UTF-8">
<title></title>
<!--请求该图片时 不会 携带referer，协议不可使用通配符//，部分浏览器会加载不了图片--> 
<img data-src="http://itmx.cc/images/developing.png"/>
<!--请求该图片时 会 携带referer-->
<img src="http://itmx.cc/images/logo.png"/>
<script src="http://itmx.cc/BASE64.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function convert(img){
    // 将图片地址通过CSS background-image的方式设置到该img对象中，
    // 然后将这段css以base64编码的形式引入 
    var src = img.getAttribute("data-src") || img.src;
    img.removeAttribute("src");
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = "data:text/css;base64," + Base.encode("img[data-src='" + src + "']" + "{display: inline-block;background-image: url(" + src + ")}");
    document.head.appendChild(link);
    setTimeout(function(){
        //配置图片高，这里为什么要延迟呢？
        //因为我们必须要由CSS的background-image属性去加载图片，
        //才能实现无referer的请求
        //在同一个网页中，同一个地址的图片只会请求一次，
        //所以在css将图片请求成功之后，这里再使用js加载，
        //就不会发起请求了，也就不会出现带referer的请求
        //当前，可能要考虑网速，做进一步优化
        var temp = new Image();
        temp.src = src;
        temp.onload = function(){
            img.height = temp.height;
            img.width = temp.width;
        }
    },200);
 }

var img = document.getElementsByTagName("img")[0];
convert(img);
</script>

因为急着上车，所以没什么时间解释了。

后来发现，其实不用这么麻烦，只需在head加一个mate标签就能搞定，或者为img标签的rel属性赋值no-referrer，剩下的事情交给浏览器

<meta name="referrer" content="no-referrer">

还可以再在img标签上增加一个属性referrerPolicy="no-referrer"