前言
上上周遇到一个类似的场景,来源页为https跳转到http导致丢失的问题。今日前端早读课由@alibabaf2e授权分享。
正文从这开始~~
简介
在Chrome 85中,有个很重要的变化:将Referrer-Policy默认值从no-referrer-when-downgrade改为strict-origin-when-cross-origin,它会对埋点、网站分析等功能造成影响。本文会详细介绍这个变化,文章分为以下几个部分:前置知识、变化原因、影响范围、处理方案。
前置知识
Origin:HTTP请求头部字段,指示了请求来自于哪个站点。该字段仅指示服务器名称,并不包含任何路径信息。
Origin: ""
Origin: "://" [ ":" ]
Referer:HTTP请求头部字段,用来表示发出该请求的页面地址。和Origin不同的是,它包含路径信息。常被人津津乐道的是,它拼写错了,正确的拼法是Referrer。
Referer:
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可以用如下方式来设置:
name="referrer" content="origin">
href="http://example.com" referrerpolicy="origin">
fetch('//example.com', {
referrer: "https://www.atatech.org/"
});
变化原因
这项变化是为了保护用户的私密性。在以前,第三方站点默认可以获取完整的网站url,包活源、路径、请求参数等。比如我的雨雀个人空间首页:https://www.yuque.com/akiragg,其中包含了我的用户id。更有甚者,部分网站会在页面url中加上token,以传递给回调地址,这会带来巨大的安全隐患。
下图可以清晰地展示私密信息泄漏的等级:
而Referrer-Policy默认值变为strict-origin-when-cross-origin之后,默认只会把origin传递给第三方站点,隐藏了很多信息。
图
影响范围
服务端埋点和分析功能依赖于网站url的完整路径。如Google Analytics,以及阿里的埋点工具aplus。
以我支持的某业务网站为例,由于网站没有设置Referrer-Policy,使用了默认值strict-origin-when-cross-origin,所以其向aplus服务端发起的GET请求中,Referer-Policy字段为strict-origin-when-cross-origin,Referer字段为https://e-bnp.taobao.com/,没有路径信息。
在iframe中,访问document.referrer会返回父页面的url,它也同样受这个policy的制约。
处理方案
显式设置一个Referrer-Policy,比如 no-referrer-when-downgrade 。
渐进增强。
Referrer-Policy是有一个优先级顺序的:
Element-level policy
Page-level policy
Browser default
元素级别的策略优先级最高,页面级别的次之,浏览器默认值最低。所以,可以先设置一个较严格的页面级策略,再对某些资源做渐进增强,如下:
name="referrer" content="strict-origin-when-cross-origin" />
src="…" referrerpolicy="no-referrer-when-downgrade" />
fetch(url, {referrerPolicy: 'no-referrer-when-downgrade'});
显式在请求参数中带上路径及请求参数信息。如阿里云ARMS的做法:
关于本文 作者:@alibabaf2e 原文:https://www.yuque.com/alibabaf2e/gt3np7/nbcb65
为你推荐
【第2025期】解读 Chrome 84 新特性,支持私有方法、用户空闲检测!
【第2129期】探讨浏览器指纹
欢迎自荐投稿,前端早读课等你来