HTML并不简单:Web前端开发精进秘籍
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

2.1.5 好好讲一下referrerpolicy属性

本节看起来在讲referrerpolicy属性,实际上讲的是Web开发中的referrer策略,相关知识对前后端都是通用的,值得了解。

前面的章节中曾提到rel="noreferrer"无法兼顾信息传播和隐私保护,而referrerpolicy属性是可以的。在介绍最终的方法之前,有必要先了解一下referrerpolicy支持的属性值及其含义。

referrerpolicy属性支持如下这些属性值:

Referrer-Policy:no-referrer

Referrer-Policy:no-referrer-when-downgrade

Referrer-Policy:origin

Referrer-Policy:origin-when-cross-origin

Referrer-Policy:same-origin

Referrer-Policy:strict-origin

Referrer-Policy:strict-origin-when-cross-origin

Referrer-Policy:unsafe-url

各个值的具体含义和作用表现参见下面的介绍。

1.no-referrer

就最终的效果而言,referrerpolicy="no-referrer"等同于上文介绍过的rel="noreferrer",表示发送的请求或跳转的页面不包括任何Referer信息。

no-referrer与Referer信息示例参见表2-2。

表2-2 no-referrer与Referer信息示例

2.no-referrer-when-downgrade

表示当协议安全级别保持不变或提高时(HTTP→HTTP,HTTP→HTTPS,HTTPS→HTTPS),在Referer中发送源、路径和查询字符串,当协议的安全级别下降的时候(HTTPS→HTTP,HTTPS→file)不发送Referer信息。

no-referrer-when-downgrade与Referer信息示例参见表2-3。

表2-3 no-referrer-when-downgrade与Referer信息示例

3.origin

表示Referer信息是来源页面URL地址中的域信息(即location.origin的返回值)。

origin与Referer信息示例参见表2-4。

表2-4 origin与Referer信息示例

4.origin-when-cross-origin

表示如果跳转页面和来源页面是跨域的,则Referer只显示原始的域信息,否则显示完整的地址。

origin-when-cross-origin与Referer信息示例参见表2-5。

表2-5 origin-when-cross-origin与Referer信息示例

5.same-origin

表示域名必须相同,否则Referer信息为空。

same-origin与Referer信息示例参见表2-6。

表2-6 same-origin与Referer信息示例

6.strict-origin

仅当协议安全级别保持不变或升高(HTTPS→HTTPS,HTTP→HTTPS)时,发送仅包含域信息的Referer信息,如果协议的安全级别降低(HTTPS→HTTP),则不发送Referer信息。

strict-origin与Referer信息示例参见表2-7。

表2-7 strict-origin与Referer信息示例

7.strict-origin-when-cross-origin(默认值)

表示当域名和安全协议相同或更高的时候,Referer信息是完整地址,如果跨域,则Referer信息是原始的域信息;如果安全协议降低,则Referer信息为空。

此值是Referer策略新的默认值,在2020年之前的默认值是no-referrer-when-downgrade。

strict-origin-when-cross-origin与Referer信息示例参见表2-8。

表2-8 strict-origin-when-cross-origin与Referer信息示例

8.unsafe-url

表示就算URL地址不安全,也发送完整的Referer信息。

unsafe-url与Referer信息示例参见表2-9。

表2-9 unsafe-url与Referer信息示例

以上就是对各个referrer策略的介绍。下面回到一开始的问题,面对外部链接,我们如何设置才能兼顾信息传播和隐私保护呢?

推荐使用origin-when-cross-origin,代码示意:

这样,外部网站可以知道自己的访问来源是哪个网站,从而增加曝光和流量,同时因为只有域名信息,所以,不会暴露关于网站和用户的任何其他隐私信息,足够安全。

与时俱进,试试在自己的网站中这样设置吧。