目录
不允许引用
当我们直接在网页中引用公众号内图片时,会如下图
解决办法
- 方法一
在html 的head 增加
<meta name="referrer" content="same-origin">
- 方法二
在对应的img标签上增加属性 referrerpolicy 值为 same-origin
<img src="XXXXX.jpg" referrerpolicy="same-origin">
原理
Referer 防盗链
这是一种常用的防盗链机制,服务器通过referer 请求头识别访问来源判断是否给予正确数据。
referer 机制
Referer 请求头包含了当前请求页面的来源页面的地址,即表示当前页面是通过此来源页面里的链接进入的。服务端一般使用 Referer 请求头识别访问来源,可能会以此进行统计分析、日志记录以及缓存优化等。
不带 referer 访问
我直接右键复制图片地址,在地址栏中打开,此时请求是不带Referer头的,此时我们可以正常访问的我们要引用的图片。如果还是显示不可引用,可以刷新一下页面。
可以打开
说明该资源没有设置拒绝空白referer ,解决办法有效
不可以打开
说明该资源设置了拒绝空白referer,也就是说这个资源的源只要不对,就会被拒绝。该情况不在本文中考虑到。
Referrer-Policy
Referrer-Policy 首部用来监管哪些访问来源信息——会在 Referer 中发送——应该被包含在生成的请求当中。
无论是在head声明referrer还是在img中设置referrerpolicy,都属于Referrer-Policy,详细可以阅读
Referrer-Policy 文档
不支持 IE 和 手机ios
手机ios可以?
2021年8月15日 文档标记不支持 手机ios
自己测试的话,手机ios可以打开 user-agent 如下
// Safari
Mozilla/5.0 (iPhone; CPU iPhone OS 14_7_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.2 Mobile/15E148 Safari/604.1
// 微信
Mozilla/5.0 (iPhone; CPU iPhone OS 14_7_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 MicroMessenger/8.0.10(0x18000a27) NetType/WIFI Language/zh_CN
// iphone 二维码扫描
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36