【第2142期】Chrome浏览器Referrer-Policy默认值变更
新年祝福贺词2022虎年【第2142期】Chrome浏览器Referrer-Policy默认值变更
前⾔
上上周遇到⼀个类似的场景，来源页为https跳转到http导致丢失的问题。今⽇前端早读课由@alibabaf2e授权分享。
简介
在Chrome 85中，有个很重要的变化：将Referrer- Policy 默认值从no-referrer-when-downgrade改为strict-origin-when-cross-origin，它会对埋点、⽹站分析等功能造成影响。本⽂会详细介绍这个变化，⽂章分为以下⼏个部分：前置知识、变化原因、影响范围、处理⽅案。
前置知识
Origin：HTTP 请求头部字段，指⽰了请求来⾃于哪个站点。该字段仅指⽰服务器名称，并不包含任何路径信息。
1.Origin : ""
2.Origin : <scheme> "://" <host> [ ":" <port> ]
Referer：HTTP请求头部字段，⽤来表⽰发出该请求的页⾯地址。和Origin不同的是，它包含路径信息。常被⼈津津乐道的是，它拼写错了，正确的拼法是Referrer。
1.Referer : <url>
Referrer-Policy：HTTP请求头部字段，顾名思义，它⽤来控制应该在Referer中暴露多少信息，同样顾名思义，它纠正了Referer的错误拼写。Referrer-Policy可以为以下取值之⼀：
Referrer-Policy: no-referrer // ⽆referer字段
Referrer-Policy: no-referrer-when-downgrade // 当从https⽹站发起http请求时，⽆referer字段，它也是Chrome 85之前的默认值
Referrer-Policy: origin // 只发送origin信息
Referrer-Policy: origin-when-cross-origin // 当跨域时，referer字段只包含origin信息，否则是完整路径
Referrer-Policy: same-origin // 跨域时没有referer字段，否则会发送完整referer信息
Referrer-Policy: strict-origin // 降级的情况下不会发送 (HTTPS->HTTP)
Referrer-Policy: strict-origin-when-cross-origin // 对于同源的请求，会发送完整的URL作为引⽤地址；在同等安全级别的情况下，发送⽂件的源作为引⽤地址(HTTPS->HTTPS)；在降级的情况下不发送此⾸部 (HTTPS->HTTP)
新鞋挤脚怎么办Referrer-Policy: unsafe-url // ⽆论是同源请求还是⾮同源请求，都发送完整的 URL（移除参数信息之后）作为引⽤地址。
各个取值的差别，在下图中会更⼀⽬了然：
Referrer-Policy可以⽤如下⽅式来设置：
1.<meta name = "referrer" content = "origin" >
1.<a href = "example" referrerpolicy = "origin" >
1.fetch ( '//example' , {
3.
变化原因
上海旅游景点介绍下图可以清晰地展⽰私密信息泄漏的等级：
⽽Referrer-Policy默认值变为strict-origin-when-cross-origin之后，默认只会把origin传递给第三⽅站点，隐藏了很多信息。
图
影响范围
服务端埋点和分析功能依赖于⽹站url的完整路径。如Google Analytics，以及阿⾥的埋点⼯具aplus。
在iframe中，访问ferrer会返回⽗页⾯的url，它也同样受这个policy的制约。
处理⽅案
•显式设置⼀个Referrer-Policy，⽐如 no-referrer-when-downgrade 。
•渐进增强。
Referrer-Policy是有⼀个优先级顺序的：
•Element-level policy
飞机托运行李规定•Page-level policy
服装行业软件•Browser default
元素级别的策略优先级最⾼，页⾯级别的次之，浏览器默认值最低。所以，可以先设置⼀个较严格的页⾯级策略，再对某些资源做渐进增强，如下：
1.<!-- 页⾯配置：较严格 -->
2.<meta name = "referrer" content = "strict-origin-when-cross-origin" />
3.
4.<!-- img配置：允许跨域时传递完整url -->
5.<img src = "…" referrerpolicy = "no-referrer-when-downgrade" />
6.炸麻花家庭做法
7.<!-- 脚本配置：允许跨域时传递完整url -->
8.<>
9.fetch ( url , { referrerPolicy : 'no-referrer-when-downgrade' });
10.</>
显式在请求参数中带上路径及请求参数信息。如阿⾥云ARMS的做法：
【第2025期】解读 Chrome 84 新特性，⽀持私有⽅法、⽤户空闲检测！
【第2129期】探讨浏览器指纹

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。