
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,代码示意:

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