![HTML并不简单:Web前端开发精进秘籍](https://wfqqreader-1252317822.image.myqcloud.com/cover/685/51089685/b_51089685.jpg)
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信息示例
![](https://epubservercos.yuewen.com/BADDE0/30121580904729906/epubprivate/OEBPS/Images/48048_33_1.jpg?sign=1738866824-7OYbGFuGfQtIGQ2eXIFp8fIbJtvlgOfX-0-88649e1b4c2bc828b108ca2a81fd5cf4)
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信息示例
![](https://epubservercos.yuewen.com/BADDE0/30121580904729906/epubprivate/OEBPS/Images/48048_33_2.jpg?sign=1738866824-kUkMeiMaqnDwpMFQFjkdxe2vgQ3BZCCs-0-05ae3c7edaf68e4264f2c504658e82e9)
3.origin
表示Referer信息是来源页面URL地址中的域信息(即location.origin的返回值)。
origin与Referer信息示例参见表2-4。
表2-4 origin与Referer信息示例
![](https://epubservercos.yuewen.com/BADDE0/30121580904729906/epubprivate/OEBPS/Images/48048_33_3.jpg?sign=1738866824-873fcxYKMnCMDXjwhtZV4UMfeXQwpcUl-0-9328dd549506f24e860f51e350f2553d)
4.origin-when-cross-origin
表示如果跳转页面和来源页面是跨域的,则Referer只显示原始的域信息,否则显示完整的地址。
origin-when-cross-origin与Referer信息示例参见表2-5。
表2-5 origin-when-cross-origin与Referer信息示例
![](https://epubservercos.yuewen.com/BADDE0/30121580904729906/epubprivate/OEBPS/Images/48048_34_1.jpg?sign=1738866824-YEyDtrm5iiMHusgLLHMCu887Ffbc0oWT-0-845d65e6e210b1f1f00d0d83c4b682a0)
5.same-origin
表示域名必须相同,否则Referer信息为空。
same-origin与Referer信息示例参见表2-6。
表2-6 same-origin与Referer信息示例
![](https://epubservercos.yuewen.com/BADDE0/30121580904729906/epubprivate/OEBPS/Images/48048_34_2.jpg?sign=1738866824-q26CKOCyTEYozK4VKHlIZdUCWsFPhcny-0-7ce567066a75f8fff930c31f1c67a162)
6.strict-origin
仅当协议安全级别保持不变或升高(HTTPS→HTTPS,HTTP→HTTPS)时,发送仅包含域信息的Referer信息,如果协议的安全级别降低(HTTPS→HTTP),则不发送Referer信息。
strict-origin与Referer信息示例参见表2-7。
表2-7 strict-origin与Referer信息示例
![](https://epubservercos.yuewen.com/BADDE0/30121580904729906/epubprivate/OEBPS/Images/48048_34_3.jpg?sign=1738866824-uYhAFaT7e24BjxZHtP6fHdFdybD3Ttpc-0-052853f983b449f70d41a67c34133398)
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信息示例
![](https://epubservercos.yuewen.com/BADDE0/30121580904729906/epubprivate/OEBPS/Images/48048_35_1.jpg?sign=1738866824-TBUGD5qk3khvy8VKfqFKpJElVBAl3hhg-0-ecd0772a9110d7357f0e2dbba7f3349a)
8.unsafe-url
表示就算URL地址不安全,也发送完整的Referer信息。
unsafe-url与Referer信息示例参见表2-9。
表2-9 unsafe-url与Referer信息示例
![](https://epubservercos.yuewen.com/BADDE0/30121580904729906/epubprivate/OEBPS/Images/48048_35_2.jpg?sign=1738866824-RtLC0ztJPJE8qRgXCs7ONHypBvTQkzv8-0-403352f4c5a6b68c7450b44b90c67b62)
以上就是对各个referrer策略的介绍。下面回到一开始的问题,面对外部链接,我们如何设置才能兼顾信息传播和隐私保护呢?
推荐使用origin-when-cross-origin,代码示意:
![](https://epubservercos.yuewen.com/BADDE0/30121580904729906/epubprivate/OEBPS/Images/48048_35_3.jpg?sign=1738866824-3cqQxdszwZDP9DWbNDNhdMqzNsL5QMNm-0-7e1381f2173207f2a5647c885f8436ea)
这样,外部网站可以知道自己的访问来源是哪个网站,从而增加曝光和流量,同时因为只有域名信息,所以,不会暴露关于网站和用户的任何其他隐私信息,足够安全。
与时俱进,试试在自己的网站中这样设置吧。