前言

前几天给我的储存桶添加了放到链后我博客的相册页图片就都不能正常显示了……

两个简介

简介来自:防盗链:对象存储 设置防盗链 Referer : referer是什么 - 泪雪网

防盗链简介

为了避免恶意程序使用资源 URL 盗刷公网流量或使用恶意手法盗用资源,给用户带来不必要的损失。腾讯云对象存储支持防盗链配置,建议您通过控制台的防盗链设置配置黑/白名单,来进行安全防护。

Referer 简介

HTTP Referer 是 header 的一部分,当浏览器向 web 服务器发送请求的时候,一般会带上 Referer,用来表示从哪儿链接到当前的网页,服务器因此可以获得一些信息用于处理,采用的格式是 URL。

换句话说,借着 HTTP 来源地址,当前的网页可以检查访客从哪里而来,这也常被用来对付伪造的跨网站请求。

Referer 的正确英语拼法是 referrer。由于早期 HTTP 规范的拼写错误,为保持向下兼容就将错就错了。例如 DOM Level 2、Referrer Policy 等其他网络技术的规范曾试图修正此问题,使用正确拼法,导致当前拼法并不统一。

事情回顾

前几天给我的储存桶设置了防盗链,设置完成后我看我博客文章里的图片能正常显示,就以为没啥问题不管了,直到这两天我才发现,相册页的图片都不能显示,其他地方却没有问题,

相册页图片不能正常显示 文章页图片正常

这使我不能理解,明明是相同的设置,为啥只有相册页的图片不能正常显示?一开始我以为是腾讯防盗链设置问题,便去腾讯云找客服咨询。

部分咨询记录 部分咨询记录

发现似乎不是防盗链的问题,后又去询问这款主题的开发者

图片略(打扰了人家,结果和人家也没啥关系,感觉有点丢人)

后来大致明白了是咋回事,然后又去百度,最终寻得解决方法

解决问题过程

先质询腾讯云客服,后咨询主题开发者(可能是我有点脑残,没有搞明白问题就去咨询主题开发者了),使用同一张图片测试发现:

测试用的图片

https://luren-1310495826.cos.ap-beijing.myqcloud.com/blog/wallpaper/20220414173447.jpg(图一)

https://luren-1310495826.cos.ap-beijing.myqcloud.com/blog/wallpaper/20220414173509.jpg(图二)

当测试文章出现图一、图二后,相册页面也能正常显示图一图二

按F12,发现相册页的图片返回值为403 ,请求的Referer为空,x-cos-request-id:测试结果为请求被防盗链拦截

8

开启禁用缓存后,发现相册页图片不能正常显示,请求标头找不到Referer

9

之所以能显示我怀疑与缓存有关

遂去寻找文章界面和相册界面有什么不同(为啥相册页没有Referer请求),结果发现测试界面的站点策略是strict-origin-when-cross-origin

10

相册页的站点策略是:no-referrer

11

测试发现,站点策略为strict-origin-when-cross-origin的图片才能正常显示


问题找到了,再去百度就方便多了,加上腾讯云客服给我的第三方资源,问题很快就解决了

解决方法

在相册页里添加如下信息即可

<meta name="referrer" content="strict-origin-when-cross-origin" />

但是这样的话,每此新建相册都要添加一次,非常麻烦,怎么解决呢?

打开你的博客目录下的 scaffolds/page.md 文件,添加如下信息即可

<meta name="referrer" content="strict-origin-when-cross-origin" />

默认时这样显示的(这是hexo生成.md文件的默认模板)

12

我们可以稍微修改一下

13

然后去测试一下

输入hexo new page --path albums/111"测试"

14

打开刚刚创建的.md 文件,添加好测试用的图片链接,然后去相册集添加相册链接、封面等。(不同博客操作略有不同)

15

保存后部署,验证是否成功

16成功

FAQ

referrer 的值有哪些?

no-referrer 不发送Referer字段。

no-referrer-when-downgrade 仅当发生协议降级(如 HTTPS 页面引入 HTTP 资源,从 HTTPS 页面跳到 HTTP 等)时不发送 Referrer 信息。这个规则是现在大部分浏览器默认所采用的

same-origin 链接到同源网址(协议+域名+端口 都相同)时发送,否则不发送。注意,https://xxx.xxx链接到http://xxx.xxx也属于跨域。

origin Referer字段一律只发送源信息(协议+域名+端口),不管是否跨域。

strict-origin 如果从 HTTPS 网址链接到 HTTP 网址,不发送Referer字段,其他情况只发送源信息。

origin-when-cross-origin 同源时,发送完整的Referer字段,跨域时发送源信息。

strict-origin-when-cross-origin 同源时,发送完整的Referer字段;跨域时,如果 HTTPS 网址链接到 HTTP 网址,不发送Referer字段,否则发送源信息。

unsafe-url 无论是否发生协议降级,无论是本站链接还是站外链接,统统都发送 Referrer 信息。正如其名,这是最宽松而最不安全的策略;


参考链接:Referrer Policy 介绍 | JerryQu 的小站 Hexo使用细节及各种问题 - Selier - 博客园 http 请求头referer详解 - SegmentFault 思否referrer策略和meta标签的问题CSDN博客