Referrer 策略配置

The Referrer-Policy 标头提供对浏览器如何以及何时传输 Referer 标头的细粒度控制。

问题

当用户通过超链接导航到某个网站，或当网站加载外部资源时，浏览器会通过 HTTP Referer 标头通知目标网站请求的来源。尽管这对于各种目的很有用，但它也会对用户的 隐私 构成风险。

例如，如果 https://example.com/page.html 上的页面包含以下 HTML

html
<img src="https://not.example.com/image.jpg" />

浏览器将发送如下请求

http
GET /image.jpg HTTP/1.1
Host: not.example.com
Referer: https://example.com/page.html

not.example.com 现在知道请求来自哪里。即使是这么少的信息也存在隐私风险。

其他情况可能会导致浏览器传输仅供内部使用的 URL，而它可能并不打算透露这些 URL，或者 URL 参数包含敏感信息。

解决方案

使用 Referrer-Policy 来限制 Referer 标头中可用的信息，或完全停止发送 Referer 标头。

下面列出了 Referrer-Policy 最有用的指令，按严格程度降序排列。选择最严格的指令，只要它仍然允许你的网站正常运行。

  • no-referrer：永远不发送 Referer 标头。
  • same-origin：发送 Referer 标头，但仅在同源请求中发送。
  • strict-origin：向所有来源发送 Referer 标头，但只包含 URL，不包含路径（例如，https://example.com/）。
  • strict-origin-when-cross-origin：在同源请求中发送完整的 Referer 标头，在跨域请求中只发送不包含路径的 URL。这是默认值。

虽然还有其他 Referrer-Policy 指令，但它们不像上面列出的选项那样有效地保护用户隐私或限制暴露。在最近版本的 Firefox 和 Safari 中，“不安全”指令（no-referrer-when-downgrade、origin-when-cross-origin 和 unsafe-url）的行为类似于 strict-origin-when-cross-origin。

如果无法使用 Referrer-Policy 标头，可以改为使用 <meta http-equiv="Referrer-Policy" content="…"> 元素设置页面范围的策略。这应该是文档 <head> 中出现的第一个 <meta> 元素。你还可以使用 referrerpolicy HTML 属性设置单个元素的策略，以及使用 fetch 请求的 Request.referrerPolicy 属性设置单个 fetch 请求的策略。

示例

在 example.com 上，仅在加载或链接到其他 example.com 资源时发送 Referer 标头

http
Referrer-Policy: same-origin

在跨域请求中发送缩短的 Referer，在同源请求中发送完整的 Referer

http
Referrer-Policy: strict-origin-when-cross-origin

禁用不支持 strict-origin-when-cross-origin 的浏览器的 Referer；对支持 strict-origin-when-cross-origin 的浏览器使用 strict-origin-when-cross-origin

http
Referrer-Policy: no-referrer, strict-origin-when-cross-origin

执行相同的操作，但使用 <meta> 元素

html
<meta
  http-equiv="Referrer-Policy"
  content="no-referrer, strict-origin-when-cross-origin" />

referrerpolicy 属性不支持多个值，因此只设置 no-referrer

html
<a href="https://example.org/" referrerpolicy="no-referrer"> My link </a>

另请参阅