前端解决第三方图片防盗链的办法 - html referrer 访问图片资源 403 问题

问题

笔者网站的图片都是上传到第三方网站上的，好比 简书、掘金、七牛云上的，可是最近简书和掘金都开启了 防盗链，防止其余网站访问他们网站上的图片了，致使笔者的网站存在他们网站上的图片全挂了。

具体问题，就是 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")
复制代码

这样就能解决第三方图片防盗链，又能用到百度统计了。

最后

笔者博客首更地址 ：github.com/biaochenxuy…

但愿：你们不要恶意盗用、滥用第三方的 CDN 资源行为。

好比：掘金 CDN 本是一件公益性质的社区服务，为便你们在本身的技术博客中使用掘金 CDN 的图片，并无开启防盗链。

可是就是由于某些人恶意盗用、滥用第三方的 CDN 资源，因此掘金社区不得不开启防盗链来减小损失和规避风险 juejin.im/post/5cefb6…。

参考文章：

1. 微信图片防盗链解决办法
2. Meta referrer标签的简要介绍