HTML no-referrer 导致百度统计失效与 Referrer-Policy 详解

为什么加上了 no-referrer

html 中通过 img 标签引入一个图片地址，报 403 图片显示不出来，meta 加上 no-referrer 就可以展示了。 但此时百度统计确失效了

什么是 referrer

Referer 请求头包含了当前请求页面的来源页面的地址，即表示当前页面是通过此来源页面里的链接进入的。服务端一般使用 Referer 请求头识别访问来源。

• js 获取 referrer

document.referrer;

示例

::: demo [vanilla]

<html>
  <body>
    <div id="referrer">当前页面的 referrer 页面地址：</div>
    <script>
      const referrer = document.getElementById('referrer');
      referrer.innerText += document.referrer;
    </script>
  </body>
</html>

{
  "show": true
}

:::

Referrer-Policy

Referrer-Policy: no-referrer
Referrer-Policy: no-referrer-when-downgrade
Referrer-Policy: origin
Referrer-Policy: origin-when-cross-origin
Referrer-Policy: same-origin
Referrer-Policy: strict-origin
Referrer-Policy: strict-origin-when-cross-origin
Referrer-Policy: unsafe-url

no-referrer

整个 Referer 首部会被移除。访问来源信息不随着请求一起发送。

no-referrer-when-downgrade （默认值）

在没有指定任何策略的情况下用户代理的默认行为。在同等安全级别的情况下，引用页面的地址会被发送(HTTPS->HTTPS) ，但是在降级的情况下不会被发送 (HTTPS->HTTP)。

origin

在任何情况下，仅发送文件的源作为引用地址。例如 https://example.com/page.html 会将 https://example.com/ 作为引用地址。

origin-when-cross-origin

对于同源的请求，会发送完整的 URL 作为引用地址，但是对于非同源请求仅发送文件的源。

same-origin

对于同源的请求会发送引用地址，但是对于非同源请求则不发送引用地址信息。

strict-origin

在同等安全级别的情况下，发送文件的源作为引用地址(HTTPS->HTTPS)，但是在降级的情况下不会发送 (HTTPS->HTTP)。

strict-origin-when-cross-origin

对于同源的请求，会发送完整的 URL 作为引用地址；在同等安全级别的情况下，发送文件的源作为引用地址(HTTPS->HTTPS)；在降级的情况下不发送此首部 (HTTPS->HTTP)。

unsafe-url

无论是同源请求还是非同源请求，都发送完整的 URL（移除参数信息之后）作为引用地址。