本文将介绍一个涉及安全和隐私的http请求头中的字段—referrer
,以及如何通过Referrer Policy
去修改referrer
的值或者是显示与否。
什么是referrer
当一个用户点击当前页面中的一个链接,然后跳转到目标页面时,目标页面会收到一个信息,即用户是从哪个源链接跳转过来的。如下图所示:
也就是说,当你发起一个http请求,请求头中的referrer
字段就说明了你是从哪个页面发起该请求的。
使用场景
有时候我们需要控制这个referrer
字段的值,即是否让其显示在请求头中,或者是否显示完整路径等。尤其是在以下两个使用场景:
隐私
在社交网站的个人中心页面,也许会存在一些外链,这时候社交网站肯定不希望用户在点击这些链接跳转到其他第三方网站时会将自己个人中心的URL信息显示在referrer
字段中传过去,尤其是个人中心页面的URL往往会带着用户数据和一些敏感信息。这时候可以选择不显示来源页面URL信息或者只显示一个网站根地址hostname。
安全
有些使用了https的网站,可能在URL中使用一个参数(sid)来作为用户身份凭证,而又需要引入其他https网站的资源,这种情况,网站肯定不希望泄露用户的身份凭证信息。当https网站需要引入不安全的http网站的资源或者有链接要跳转到http网站时,这时候将https源网站的URL信息传过去也是不太安全的。
当然还有其他情况下需要referrer
的值,比如最近公司所做的项目中,有一个请求由于请求头过大导致响应是400,我们的Referrer Policy
是默认的情况,显示的referrer
是完整的URL信息,该URL带了很多敏感数据比如加密后的token,sessionID等,长度特别长,请求头中的cookie和请求的URL也带着很大块的信息,最终我们决定让referrer
只携带网站根地址的信息而不是其完整路径,由此减小了header的大小。
分析
在Javascript中,我们可以通过document.referrer来获取同样的信息。通过这个信息,我们就可以知道访客是从什么渠道来到当前页面的。这对于Web Analytics来说,是非常重要的,这可以告诉我们不同渠道带来的流量的分布情况,还有用户搜索的关键词等,都是通过分析这个referrer信息来获取的。
Referrer-Policy
Referrer-Policy
的作用就是为了控制请求头中referrer
的内容,目前是一个候选标准,不过已经有部分浏览器支持该标准。
目前Referrer-Policy
只包含以下几种值:
enum ReferrerPolicy {
"",
"no-referrer",
"no-referrer-when-downgrade",
"same-origin",
"origin",
"strict-origin",
"origin-when-cross-origin",
"strict-origin-when-cross-origin",
"unsafe-url"
};
复制
空字符串
若设为空串则默认按照浏览器的机制设置referrer
的内容,默认情况下是和no-referrer-when-downgrade
设置得一样。
no-referrer
不显示referrer
的任何信息在请求头中。
no-referrer-when-downgrade
这是默认值。当从https网站跳转到http网站或者请求其资源时(安全降级HTTPS→HTTP),不显示referrer
的信息,其他情况(安全同级HTTPS→HTTPS,或者HTTP→HTTP)则在referrer
中显示完整的源网站的URL信息。
same-origin
表示浏览器只会显示referrer
信息给同源网站,并且是完整的URL信息。所谓同源网站,是协议、域名、端口都相同的网站。
origin
表示浏览器在referrer
字段中只显示源网站的源地址(即协议、域名、端口),而不包括完整的路径。
strict-origin
该策略更为安全些,和origin
策略相似,只是不允许referrer
信息显示在从https网站到http网站的请求中(安全降级)。
origin-when-cross-origin
当发请求给同源网站时,浏览器会在referrer
中显示完整的URL信息,发个非同源网站时,则只显示源地址(协议、域名、端口)
strict-origin-when-cross-origin
和origin-when-cross-origin
相似,只是不允许referrer
信息显示在从https网站到http网站的请求中(安全降级)。
unsaft-url
浏览器总是会将完整的URL信息显示在referrer
字段中,无论请求发给任何网站。
Referrer-Policy更改方法
可以有以下5种方法:
1. 通过Referrer-Policy
HTTP header
设置:
Referrer-Policy: origin
复制
2. 通过<meta>
元素改变Referrer Policy
,直接修改名为referrer
的内容
<meta name="referrer" content="origin">
复制
3. 给 <a>
, <area>
, <img>
, <iframe>
, 或者<link>
元素设置referrerpolicy
属性
<a href="http://example.com" referrerpolicy="origin">
复制
4. 如需设置不显示referrer
信息时,也可以给 <a>
, <area>
, <link>
元素设置rel
的链接关系。
<a href="http://example.com" rel="noreferrer">
复制
总结
使用何种Referrer Policy
取决于网站的需求,但是一般来说,unsafe-url
是不太建议用的,同样,如果是只想显示网站的根地址,那么建议用strict-origin
和strict-origin-when-cross-origin
。如果URL中没有什么敏感信息,那就默认使用no-referrer-when-downgrade。