图片来源加了防盗链导致网站复制来的内容里不显示图片
图片来源加了防盗链导致网站复制来的内容里不显示图片如题：图片来源加了防盗链导致网站复制来的内容里不显示图片
如果对方只是加了这么一个防盗链，就可以用下面的方法处理。但是如果还加了不允许本地空referrer访问，那就不行了。
删除 Header 中的 Referrer<meta name="referrer" content="never">
content 有四个值可以选择 never,always,origin,default 这是来自于 whatwg 标准，浏览器对他的支持还是很好的。
MDN 标准，还多了一个 no-referrer<meta name="referrer" content="no-referrer" />
<meta name="referrer" content="never"/>
<meta name="referrer" content="same-origin"/>
添加 ReferrerPolicy 属性添加 meta 标签相当于对文档中的所有链接都取消了 referrer，
而R eferrerPolicy 则更精确的指定了某一个资源的referrer策略。
关于这个策略的定义可以参照MDN。比如我想只对某一个图片取消referrer，如下编写即可:<img src="xxxx.jpg" referrerPolicy="no-referrer" />
浏览器支持对比上面我们讲了两种取消referrer头信息的方法，但其实这却对应了五种写法，我们来看下面的对比表：可以看出Chrome浏览器对各种写法都支持的最好，棒棒哒；Firefox支持所有标准的写法，但是不支持没有写在head标签中的meta标签；Edge/IE则不支持MDN里定义的”no-referrer”配置项，果然是个古董。。。总的来说，保证最佳效果的最简单的写法就是添加一个meta标签<meta name="referrer" content="never">
这样就不用考虑浏览器的差别了，虽然这种写法并不被官方推荐(主要还是要迁就IE这个古董，放弃了理论上更为正确的标准)
==========================================
问题笔者网站的图片都是上传到第三方网站上的，比如 简书、掘金、七牛云上的，但是最近简书和掘金都开启了 防盗链，防止其他网站访问他们网站上的图片了，导致笔者的网站存在他们网站上的图片全挂了。具体问题，就是 html 中通过 img 标签引入一个第三方的图片地址，报 403 。但是这个图片地址直接复制出来在地址栏打开，却是看得到的。原因官方输出图片的时候，判断了来源 Referer ，就是从哪个网站访问这个图片，如果是你的网站去加载这个图片，那么 Referer 就是：你的网站地址。如果我们的网站地址不在官方的白名单内，所以就看不到图片了。我们做这个跳板的关键：不发送 Referer，也就是没有来源。那么官方那边，就认为是从浏览器直接访问的，所以就能加载正常的图片了。referrer在某些情况下，出于一些原因，网站想要控制页面发送给 server 的 referrer 信息的情况下，可以使用这一 referer metadata 参数。参数referer 的 metedata 属性可设置 content 属性值为以下集合：
[*]never
[*]always
[*]origin
结果
[*]如果 referer-policy 的值为 never：删除 http head 中的 referer；
[*]如果 referer-policy 的值为 default：如果当前页面使用的是 https 协议，而正要加载资源使用的是普通的 http 协议，则将 http header 中额 referer 置为空；
[*]如果 referer-policy 的值 origin：只发送 origin 部分；
[*]如果 referer-policy 的值为 always：不改变 http header 中的 referer 的值；
举例如果页面中包含了如下 meta 标签，所有从当前页面中发起的请求将不会携带 referer：
[*]<meta name="referrer" content="never">
如果页面中包含了如下 meta 标签，则从当前页面中发起的 http 请求将只携带 origin 部分：
[*]<meta name="referrer" content="origin">
[*]
解决方案初步方案
[*]在 标签里加 meta，referrer 的 content 设置为 nerver
[*]<meta name="referrer" content="never">
[*]
这样存在第三方网站上的图片，在你的网站上就可以访问了。但是还有一个问题，就是如果你的网站需要发送你的网站地址的，那上面的的设置就不行了，比如：用到了百度统计。那上面的设置会导致百度统计的代码加载不了，因为它需要发送你的网站地址给百度统计。既要不发送 你的网站地址，又要发送你的网站地址，那么怎么办呢 ？
最终的解决方案
[*]先在 html 上设置 referrer 为 always
[*]<meta id="referrer" name="referrer" content="always" />
[*]
这样之后，首屏加载的时候，加载了百度统计的代码了，能正常统计访客数据了。
[*]不需要网站地址的时候，再把 referrer 设置为 nerver
加个延时 setTimeout 再把 referrer 的 content 值设置为 nerver 。 或者 在有图片的地方再把 referrer 的 content 值设置为 nerver 。
const referrer= document.getElementById("referrer");
referrer.setAttribute("content", "never")
这样就能解决第三方图片防盗链，又能用到百度统计了。
页:
[1]