19

图片描述

问题

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

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

原因

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

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

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

解决方案

如原网址:

http://mmbiz.qpic.cn/mmbiz/DU...

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

方法:在 <head> 标签里加 meta

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

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

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

最后

博客首更地址 :https://github.com/biaochenxuying/blog

往期精文

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

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

十分钟弄懂:数据结构与算法之美 - 时间和空间复杂度

一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

Vue + TypeScript + Element 项目实战及踩坑记

vue-cli3.x 新特性及踩坑记

那些必会用到的 ES6 精粹

参考文章:

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

欢迎关注以下公众号 全栈修炼,学到不一样的武功秘籍 !

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

全栈修炼


夜尽天明
13.9k 声望6.5k 粉丝