关于HTML 前端的 Web 页面 Meta 的 Referrer Policy 介绍
前言介绍
近期在一个项目中,需要引用大量外部网站的图片,竟意外的发现在生成环境中没有问题,但在本地的开发环境下,有部分图片无法显示。于是就开启了跨域图片显示的斗争中。
名词解释
什么是引用策略(Referrer Policy)?引用策略就是从一个文档发出请求时,是否在请求头部定义 Referrer 的设置。
目前很多网站的防盗链机制都是用头部定义 Referrer 来判断是否是盗链。其实这个很容易破解,自己在请求时加上 Referrer 头部就行。
在哪些情况下会设置引用头呢?一般来说,加载一个 HTML 页面之后,本 HTML 页面里的 JavaScript 文件,CSS 文件,画面文件都会设置 Referrer。然后,点击这个 HTML 页面里的链接,跳转其它画面时,也会设置 Referrer。
Referrer Policy 的值
- 空字符串
- no-referrer
- no-referrer-when-downgrade
- same-origin
- origin
- strict-origin
- origin-when-cross-origin
- strict-origin-when-cross-origin
- unsafe-url
空字符串
默认值:一般浏览器的默认值是 no-referrer-when-downgrade
no-referrer
所有请求不发送 referrer。
no-referrer-when-downgrade
当请求安全级别下降时不发送 referrer。目前,只有一种情况会发生安全级别下降,即从 HTTPS 到 HTTP。HTTPS 到 HTTP 的资源引用和链接跳转都不会发送 referrer。
same-origin
对于同源的链接和引用,会发送referrer,其他的不会。
同源的意思是指同一个域名且同一协议。
如果设置成 same-origin,那么 aaa.com 引用 bbb.com 的资源,不会发送 referrer。子域名也不是同一个域名,aaa.com 引用 test.aaa.com 的资源,不会发送 referrer。
origin
会发送 referrer,但只会发送源信息。源信息包括访问协议和域名。
strict-origin
这个相当于 origin 和 no-referrer-when-downgrade 的 AND 合体。即在安全级别下降时不发送 referrer;安全级别未下降时发送源信息。
注意:这个是新加的标准,有些浏览器可能还不支持。
origin-when-cross-origin
这个相当于 origin 和 same-origin 的 OR 合体。同源的链接和引用,会发送完全的 referrer 信息;但非同源链接和引用时,只发送源信息。
strict-origin-when-cross-origin
这个比较复杂,同源的链接和引用,会发送 referrer。安全级别下降时不发送 referrer。其它情况下发送源信息。
注意:这个是新加的标准,有些浏览器可能还不支持。
unsafe-url
无论是否发生协议降级,无论是本站链接还是站外链接,统统都发送 Referrer 信息。正如其名,这是最宽松而最不安全的策略。
Referrer Policy 的设置方法
我们可以用以下方法来设置引用策略(Referrer Policy)。
- 通过 http 响应头中的 Referrer-Policy 字段
- 通过 meta 标签,name 为 referrer
- 通过
<a>
、<area>
、<img>
、<iframe>
、<link>
元素的referrerpolicy
属性。 - 通过
<a>
、<area>
、<link>
元素的rel=noreferrer
属性。
通过 http 响应头中的 Referrer-Policy 字段
Content-Security-Policy: referrer no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|unsafe-url;
Apache 下,设置方法如下:
<IfModule mod_headers.c>
Header set Content-Security-Policy: "referrer=no-referrer"
</IfModule>
通过 meta 标签,name 为 referrer
<meta name="referrer" content="no-referrer|no-referrer-when-downgrade|origin|origin-when-crossorigin|unsafe-url">
通过标签的 referrer 属性
<a href="http://example.com" referrer="no-referrer|origin|unsafe-url">xxx</a>
Referrer 策略还有其他历史遗留的值
Referrer 策略还有其他历史遗留的值,不过不建议使用。
- never 等价于 no-referrer
- default 等价于 no-referrer-when-downgrade
- always 等价于 unsafe-url
小结
所以在我当前的项目中使用same-origin
是最好的选择了,在其他情况下就根据实际应用场景来进行选择即可
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanefha
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24