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

一. 问题

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

具体问题，就是 html 中通过 img 标签引入一个第三方的图片地址，报 403 。但是这个图片地址直接复制出来在地址栏打开，却是看得到的。

二. 原因

官方输出图片的时候，判断了来源 Referer ，就是从哪个网站访问这个图片，如果是你的网站去加载这个图片，那么 Referer 就是：你的网站地址；

如果我们的网站地址不在官方的白名单内，所以就看不到图片了。

我们做这个跳板的关键：不发送 Referer，也就是没有来源。那么官方那边，就认为是从浏览器直接访问的，所以就能加载正常的图片了。

三. referrer

在某些情况下，出于一些原因，网站想要控制页面发送给 server 的 referrer 信息的情况下，可以使用这一 referer metadata 参数。

1. 参数

referer 的 metedata 属性可设置 content 属性值为以下集合：

• never
• always
• origin

2. 结果

• 如果 referer-policy 的值为 never：删除 http head 中的 referer；
• 如果 referer-policy 的值为 default：如果当前页面使用的是 https 协议，而正要加载资源使用的是普通的 http 协议，则将 http header 中额 referer 置为空；
• 如果 referer-policy 的值 origin：只发送 origin 部分；
• 如果 referer-policy 的值为 always：不改变 http header 中的 referer 的值；

3. 举例

如果页面中包含了如下 meta 标签，所有从当前页面中发起的请求将不会携带 referer：

<meta name="referrer" content="never">

如果页面中包含了如下 meta 标签，则从当前页面中发起的 http 请求将只携带 origin 部分：

<meta name="referrer" content="origin">

四. 解决方案

1. 初步方案

• 在 标签里加 meta，referrer 的 content 设置为 nerver。

<meta name="referrer" content="never">

这样存在第三方网站上的图片，在你的网站上就可以访问了。

但是还有一个问题，就是如果你的网站需要发送你的网站地址的，那上面的的设置就不行了，比如：用到了百度统计。

那上面的设置会导致百度统计的代码加载不了，因为它需要发送 你的网站地址 给百度统计。

既要不发送 你的网站地址，又要发送你的网站地址，那么怎么办呢 ？

2. 最终解决方案

• 先在 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")

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