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

时间 2019-12-05

标签前端解决第三方图片防盗办法 html referrer 访问资源问题栏目 HTML 繁體版

原文原文链接

问题

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

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

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

若是咱们的网站地址不在官方的白名单内，因此就看不到图片了。java

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

如原网址：react

显示此图片来自微信公众平台，未经容许不得应用github

方法：在 <head> 标签里加 meta算法

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

这样存在第三方网站上的图片，在你的网站上就能够访问了。vue-cli

在某些状况下，出于一些缘由，网站想要控制页面发送给 server 的 referrer 信息的状况下，能够使用这一 referer metadata 参数。

参数

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

结果

若是 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">

往期精文

尤雨溪 6 月 4 日的 Vue 技术分享

[今天尤雨溪公布Vue 3.0重大变化！前端框架将何去何从？[附完整PPT]](https://mp.weixin.qq.com/s/fL...

参考文章：

欢迎关注如下公众号 全栈修炼，学到不同的武功秘籍！

关注公众号并回复福利可领取免费学习资料，福利详情请猛戳：免费资源获取--Python、Java、Linux、Go、node、vue、react、javaScript