图片防盗链的解决办法

在做图片展示部分的时候发现img标签src为图片url时无法显示，发现是这些图片来源网站为了防止图片盗链浪费资源所以不让外站访问。它们的识别机制是根据http请求里的header中的referer来判断来源网站，比如我在chrome开发者工具里查看值值值网站的图片，就能看到完整的request header。

2. Accept:
    
   image/webp,*/*;q=0.8
3. Accept-Encoding:
    
   gzip,deflate,sdch
4. Accept-Language:
    
   zh-CN,zh;q=0.8
5. Cache-Control:
    
   max-age=0
6. Connection:
    
   keep-alive
7. Host:
    
   img.zhizhizhi.net
8. If-Modified-Since:
    
   Sat, 16 Aug 2014 06:26:23 GMT
9. If-None-Match:
    
   "74bbe01bb9cf1:0"
10. Referer:
     
    http://www.zhizhizhi.com/
11. User-Agent:
     
    Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.124 Safari/537.36

 

其中的referer就是值值值网站的url。那我要怎么解决用户可以从我的网站上查看其他网站的图片这个问题呢？

我首先想到的解决方案是通过js伪造referer，不过查阅资料后发现就算你请求图片时改了referer，浏览器也会包装你的请求，把referer修改成localhost:8080，所以这个办法是行不通的。

还有一种流传的很广的方案，就是把图片放在一个iframe标签里进行访问，这样就相当于在浏览器中凭空开了一个标签页，这样的请求的referer是空的，一般网站的防盗链方案都是允许referer为空的资源请求。

那么可以根据上述思路来解决这个问题，把图片放在一个ifame标签里，然后再改变img的src进行请求，最后再在保留img的前提下去掉iframe标签。（这是最初想法，可是最后的解决方案不是这样，也就没有实践iframe到底可不可以去除，还需要实践去证明）

这时我发现了一个lazyload的jquery插件，可以延迟加载图片，刚好在我的网站中可以应用。查看它的源码发现它的实现机理是先给img标签设置src为未加载的一张默认图片，同时设置一个data-original属性为图片的真实url，在浏览器窗口扫描到图片时对图片进行加载。

我的设想是可以在页面中增加一个display：none的iframe，然后要加载图片时就往iframe中添加img标签，这样图片http请求的referer就是空的，就能正确下载图片。然后把可视页面中的img的src属性设置为正确url，因为图片已经下载好，就可以从缓存中读取图片。

采取这种解决方案后，三个网站的外链图片都恩呢更正确显示，可视虎扑的外链图片还是不能加载。

我参考了 https://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached/3877079#3877079?newreg=a7cd36a6037243a8a0e4523783c91ae9 ，采取了下面的方法，虽然还是不知道为什么，问题还是解决了。希望以后能探究清楚。

$("img").one("load",function(){// do stuff}).each(function(){if(this.complete) $(this).load();})