js修改referer 解决图片防盗链问题

 最近在项目中遇到了一个问题就是项目中需要显示其他网站上的图片，网上找了好多，但是没有一个具体的代码策略，我在这里给大家提供一个方案。

先说说防盗链的原理，http 协议中，如果从一个网页跳到另一个网页，http 头字段里面会带个 Referer。图片服务器通过检测 Referer 是否来自规定域名，来进行防盗链。

如果盗用网站是 https 的 protocol，而图片链接是 http 的话，则从 https 向 http 发起的请求会因为安全性的规定，而不带 referer，从而实现防盗链的绕过。

 

我的解决方案原理就是使用iframe来绕过图片防盗链，具体就是拿到页面中的图片地址，然后将该图片放在一个iframe里，然后将新的iframe替换到原图片的位置，然后将原图片去掉，完美解决。

具体代码如下:

 

<script type="text/javascript">
 $(document).ready(function() {
    //获取Class为arcContent里面的所有img
    var imglist=$(".mainList img");
    //或使用下面这句，获取ID为divArticle里面的所有img
    //var imglist=$("#divArticle img");
    for(var i=0;i<imglist.length;i++){ 
    	if(imglist[i].getAttribute('src')){
    		url = new URL(imglist[i].getAttribute('src')); 
        	var frameid = 'frameimg' + Math.random();
        	window.img = '<img id="img" width="158" height="108" src=\''+url+''+Math.random()+'\' /><script>window.onload = function() { parent.document.getElementById(\''+frameid+'\').height = document.getElementById(\'img\').height+\'px\'; }<'+'/script>';
    		$(imglist[i]).parent().empty().append('<iframe id="'+frameid+'" src="javascript:parent.img;" frameBorder="0" scrolling="no" width="158" height="108"></iframe>');
        }
    }
}); 
</script>