主流浏览器图片反防盗链方法总结

 新葡亰Web前端     |      2019-12-04

浏览器支持对比

上面我们讲了两种取消referrer头信息的方法,但其实这却对应了五种写法,我们来看下面的对比表:

NOTHING META IN HEAD REFERRER=NEVER META IN HEAD REFERRER=NO-REFERRER META REFERRER=NEVER META REFERRER=NO-REFERRER IMG REFERRERPOLICY=NO-REFERRER
Chrome N Y Y Y Y Y
Firefox N Y Y N N Y
Edge/IE N Y N Y N N

可以看出Chrome浏览器对各种写法都支持的最好,棒棒哒;Firefox支持所有标准的写法,但是不支持没有写在head标签中的meta标签;Edge/IE则不支持MDN里定义的”no-referrer”配置项,果然是个古董。。。

总的来说,保证最佳效果的最简单的写法就是添加一个meta标签``,这样就不用考虑浏览器的差别了,虽然这种写法并不被官方推荐(主要还是要迁就IE这个古董,放弃了理论上更为正确的标准)。

有的图片在我们发布的网站上能正常加载出来,有的一些就加载不出来,审查一下元素,会看到Failed to load resource: the server responded with a status of 403 ()的报错。

澳门新葡亰网站靠谱吗,删除Header中的Referrer

相比上面两种折腾的方法,如果能直接修改Referrer,那不就省了很多事了么。但是事实上这里的配置还是有挺多坑的,方法也有很多种,一不小心就会跟我一样踩了一遍又一遍。

经过了解,发现这是一个叫做防盗链的东西,网站设置了防盗链的策略,会在后台判断请求的Referrer属性是不是来自于一个非本域名的网站,如果来源不是本域名就返回403 forbidden。我们要做的就是用最方便的方法使得我的页面能够不受他的防盗链策略的影响。我从网上搜到了几个解决方法。

添加meta标签

一种方法是给页面添加一个meta标签,在meta标签里指定referrer的值,比如`。网上可以查到各种奇奇怪怪的值,其实我总结了来源于两个地方。 一个是来自[whatwg](https://wiki.whatwg.org/wiki/Meta_referrer)的标准。他给meta标签的referrer属性定义了四个值:never,always,origin,default。如果需要关闭referrer,就将referrer的值设置成”never”。这个标准还是比较老的,而且在他的主页上也明确写了”This document is obsolete.”。不过据我调研,或许正是由于这个标准比较老,反而导致绝大多数浏览器对他的支持都很好,因祸得福蛤蛤。 另外一个是来自[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta)的标准。他给meta标签的referrer属性定义了五个值,如果要关闭referrer,就将它的值设置成no-referrer`。
不过我们需要注意的是,meta标签添加的位置也很重要,有的浏览器能够识别非head标签中的meta标签,有的就不行。在实际使用的时候还要小心,这一点下文会有一个更具体的比较。

像这个样子,src后面跟的是别的网站的图片的url。

后台预下载

预下载是最直观的一种方法,既然不能直接引用,那我就先后台下载下来,然后将图片链接到下载后的图片即可。这个方法还是比较稳妥的,图片下载下来就是自己的了,不会再受人限制。不过这总有种侵犯知识产权的感觉,而且每张图片都要后台先下载,逻辑处理起来还是有点麻烦的;而且对于那种纯静态页面,没有后台程序供我们发挥,这也就无法实现了。

最近自己写了一个网站玩,在引用别人网站的图片是遇到了一些小问题。

解决方案

删除Header中的Referrer

保证最佳效果的最简单的写法就是在html文件的head中添加一个meta标签<meta name="referrer" content="never" />

为什么叫保证效果的最简单写法 ?下面看一些数据对比。

删除Header中的Referrer的方法也有多种:添加meta标签添加ReferrerPolicy属性

主流浏览器图片反防盗链方法总结

2018/04/24 · HTML5 · 防盗链

原文出处: Myths   

图片预下载

这个是最直观的解决方式了,正在使用别人的图,先把图片下载下来,保存到自己的服务器上,然后就等于是用自己的了~ 如果自己没有服务器,可以去网上找找图床,应该也能解决问题。

上一篇:Web前端优化最佳实践及工具集锦 下一篇:没有了