Referrer Policy介绍

1.什么是Referrer Policy

当一个用户点击当页面的一个链接时,然后跳转到目标页面,目标页面就会收到一个信息,即用户是从哪个链接过来的,这时referer字段就起了这么一个作用,指出来源网站的URL
image.png
但是尼,Referer这个词搞错了,应该是Referrer,也不知道为啥当初制定标准的人咋没发现这个错误,所以只能将错就错,所有头信息的该字段都一律错误拼写成Referer。但是Referrer-Policy 这个首部并没有延续这个错误拼写。

使用场景

浏览器向服务器请求资源的时候,Referer字段的逻辑时这样的,用户在地址栏输入网址,或者选中浏览器书签,就不发送Referer字段。
主要是以下三种场景,会发送Referer字段

  • 用户点击网页上的链接
  • 用户发送表单
  • 网页加载静态资源,比图加载图片、脚本、样式

Referer的作用

隐私

在社交网站的个人界面上,用户点击页面的某个外链,这时可能会将自己个人页面的URL暴露在referer字段中,URL里面往往带有用户数据和一些敏感信息。这时候可以选择不显示来源页面URL信息或者定制Referer字段,让它只显示一个网站根地址hostname,让对方知道时我贡献了你的流量

安全

有些使用了https的网站,可能在URL中使用一个参数(sid)来作为用户身份凭证,而又需要引入其他https网站的资源,这种情况,网站肯定不希望泄露用户的身份凭证信息。当https网站需要引入不安全的http网站的资源或者有链接要跳转到http网站时,这时候将https源网站的URL信息传过去也是不太安全的。

Rel属性

如需设置不发送Referer字段时,也可以给 <a>, <area>, <link>三个标签设置rel的链接关系。

<a href="http://example.com" rel="noreferrer">

Referrer-Policy

Rel属性只能定制单个元素的Referer行为,而且选择比较少,只能选择发送或不发送。W3C为此制定了更强大的Referrer-Policy
Referrer-Policy可以设置8个值

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

不发送Referer字段

  • no-referrer-when-downgrade (默认值)

如果从 HTTPS 网址链接到 HTTP 网址,不发送Referer字段,其他情况发送(包括 HTTP 网址链接到 HTTP 网址)。这是浏览器的默认行为。

  • same-origin

链接到同源网址(协议+域名+端口 都相同)时发送,否则不发送。注意,https://foo.com链接到http://foo.com也属于跨域。

  • origin

Referer字段一律只发送源信息(协议+域名+端口),不管是否跨域。

  • strict-origin

如果从 HTTPS 网址链接到 HTTP 网址,不发送Referer字段,其他情况只发送源信息。

  • origin-when-cross-origin

当发请求给同源网站时,浏览器会在referrer中显示完整的URL信息,发个非同源网站时,则只显示源地址(协议、域名、端口)

  • strict-origin-when-cross-origin

同源时,发送完整的Referer字段;跨域时,如果 HTTPS 网址链接到 HTTP 网址,不发送Referer字段,否则发送源信息。

  • unsafe-url

浏览器总是会将完整的URL信息显示在referrer字段中,无论请求发给任何网站。

Referrer Polocy 的用法

  1. HTTP头信息

服务器发送网页的时候,通过HTTP头信息的Referrer-Polocy告诉浏览器

Referrer-Policy: origin
  1. <meta>标签

通过元素改变Referrer Policy,直接修改名为referrer的内容

<meta name="referrer" content="origin">
  1. referrerpolicy属性

<a><area><img><iframe><link>标签,可以设置referrerpolicy 属性。

<a href="..." referrerpolicy="origin" target="_blank">xxx</a>

总结

使用何种Referrer Policy取决于网站的需求,但是一般来说,unsafe-url是不太建议用的。
如果是只想显示网站的根地址,那么建议用strict-origin和strict-origin-when-cross-origin。
如果URL中没有什么敏感信息,那就默认使用no-referrer-when-downgrade。

参考链接

https://www.w3.org/TR/referrer-policy/#intro

http://www.ruanyifeng.com/blog/2019/06/http-referer.html

https://juejin.im/post/5cd81b59518825686a06fd05