前端决第三方图片防盗链 403 问题
# 前端解决第三方图片防盗链的办法 - 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")
2
这样就能解决第三方图片防盗链,又能用到百度统计了。