小猿圈分享-主流浏览器图片反防盗链方法总结

我们经常会遇到自己的喜欢的图片，但是都存在防盗链的情况，那么这个时候就会很纠结，今天呢小猿圈就给大家分享一些反防盗链方法

解决方案
后台预下载
预下载是最直观的一种方法，既然不能直接引用，那我就先后台下载下来，然后将图片链接到下载后的图片即可。这个方法还是比较稳妥的，图片下载下来就是自己的了，不会再受人限制。不过这总有种侵犯知识产权的感觉，而且每张图片都要后台先下载，逻辑处理起来还是有点麻烦的；而且对于那种纯静态页面，没有后台程序供我们发挥，这也就无法实现了。
第三方代理
第三方代理其实算是后台与下载的升级版，其实就是将下载图片的这个过程交给第三方的网站。一个非常好用的代理是images.weserv.nl，我们可以直接将自己需要“盗链”的图片写在请求中即可。我们甚至可以指定一些简单的图片处理参数，让代理帮我们处理。
比如我想盗链https://foo.com/foo.jpg，并且将图片宽度设置成100，我们就可以直接这样引用:
这还是很方便的，不过美中不足的是这个国外的网站在国内的访问速度似乎有点慢，有时候甚至还会被墙，这就有点尴尬了。
删除Header中的Referrer
相比上面两种折腾的方法，如果能直接修改Referrer，那不就省了很多事了么。但是事实上这里的配置还是有挺多坑的，方法也有很多种，一不小心就会跟我一样踩了一遍又一遍。
添加meta标签
一种方法是给页面添加一个meta标签，在meta标签里指定referrer的值，比如。网上可以查到各种奇奇怪怪的值，其实我总结了来源于两个地方。
一个是来自whatwg的标准。他给meta标签的referrer属性定义了四个值：never,always,origin,default。如果需要关闭referrer，就将referrer的值设置成”never”。这个标准还是比较老的，而且在他的主页上也明确写了”This document is obsolete.”。不过据我调研，或许正是由于这个标准比较老，反而导致绝大多数浏览器对他的支持都很好，因祸得福蛤蛤。
另外一个是来自MDN的标准。他给meta标签的referrer属性定义了五个值，如果要关闭referrer，就将它的值设置成no-referrer。
不过我们需要注意的是，meta标签添加的位置也很重要，有的浏览器能够识别非head标签中的meta标签，有的就不行。在实际使用的时候还要小心，这一点下文会有一个更具体的比较。
添加ReferrerPolicy属性
添加meta标签相当于对文档中的所有链接都取消了referrer，而ReferrerPolicy则更精确的指定了某一个资源的referrer策略。关于这个策略的定义可以参照MDN。比如我想只对某一个图片取消referrer，如下编写即可:
浏览器支持对比
上面我们讲了两种取消referrer头信息的方法，但其实这却对应了五种写法，我们来看下面的对比表：
可以看出Chrome浏览器对各种写法都支持的最好，棒棒哒；Firefox支持所有标准的写法，但是不支持没有写在head标签中的meta标签；Edge/IE则不支持MDN里定义的”no-referrer”配置项，果然是个古董。。。
总的来说，保证最佳效果的最简单的写法就是添加一个meta标签，这样就不用考虑浏览器的差别了，虽然这种写法并不被官方推荐(主要还是要迁就IE这个古董，放弃了理论上更为正确的标准)。
大家学习到了吗？对于一个前端工程师来说应该会经常遇到这种情况吧，希望这个文章可以帮助大家解决烦恼，最后记得关注我哦，也欢迎大家去小猿圈网站学习，加油。