Referrer Policy介绍

1.什么是Referrer Policy

当一个用户点击当页面的一个链接时,然后跳转到目标页面，目标页面就会收到一个信息，即用户是从哪个链接过来的，这时referer字段就起了这么一个作用，指出来源网站的URL

但是尼，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>标签

通过<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/referre...

http://www.ruanyifeng.com/blo...

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