Referrer-Policy 是什么？前端如何避免 Referer 泄露敏感信息？

简化版

Referrer-Policy 用来控制浏览器在跳转、加载图片、脚本、接口等跨页面请求时，Referer 请求头携带多少来源信息。默认策略如果过宽，URL 里的 token、订单号、搜索词等可能泄露给第三方站点。常见推荐值是 strict-origin-when-cross-origin，敏感页面可用 no-referrer。更重要的是不要把敏感信息放在 URL 里。

详细版

Referer 不是拼错，是历史遗留字段名。它可能包含完整 URL，所以安全风险来自 URL 中的敏感参数。

策略	跨源时发送什么	适合场景
`no-referrer`	不发送	高敏页面
`origin`	只发送源	需要统计来源
`strict-origin`	HTTPS 到 HTTPS 发源，降级不发	安全折中
`strict-origin-when-cross-origin`	同源完整 URL，跨源只发源	常见默认推荐

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

真正安全的做法是“URL 不放秘密”，Referrer-Policy 是减少泄露面的第二道保险。

完整版教学

一、Referer 会在什么时候出现

用户从 A 页面跳到 B 页面，浏览器可能在请求 B 时带上 A 的地址。页面加载第三方图片、脚本、统计像素时，也可能带 Referer。

如果 A 的 URL 是 https://site.com/reset?token=xxx，第三方就可能看到这个 token。

二、Referrer-Policy 控制什么

它控制 Referer 头的发送规则，可以通过响应头、HTML meta 或标签属性配置。

<meta name="referrer" content="strict-origin-when-cross-origin" />
<a href="https://third.com" referrerpolicy="no-referrer">外链</a>

响应头优先适合全站策略，标签属性适合局部覆盖。

三、常见策略怎么选

多数业务站点可以使用 strict-origin-when-cross-origin。它在同源请求保留完整路径，方便站内分析；跨源只发送 origin，减少路径和参数泄露。

金融、支付、重置密码、邀请码等敏感页面，可以考虑 no-referrer。

四、不要把敏感数据放 URL

Referrer-Policy 不是根治。URL 还会出现在：

浏览器历史记录。
代理、网关和服务端日志。
截图和分享。
第三方 SDK 采集的页面地址。

敏感 token 应放在安全存储或一次性表单提交里，避免出现在查询参数。

五、和 noreferrer 的关系

外链可以使用：

<a href="https://example.com" target="_blank" rel="noopener noreferrer">link</a>

noreferrer 会阻止 Referer，同时也包含不让新页面获取 opener 的安全效果。但如果只想防 opener，noopener 就够。

六、如何验证

可以打开 DevTools Network，看请求头中的 Referer。也可以创建一个测试第三方 endpoint，观察不同策略下收到的 Referer。

验证项	看什么
同源请求	是否保留完整路径
跨源 HTTPS	是否只保留 origin
HTTPS 到 HTTP	是否被禁止发送
单个链接	标签策略是否覆盖

七、常见误区与追问

误区：Referer 泄露只发生在页面跳转。 加载第三方资源、统计脚本、图片也可能携带。
误区：配置 Referrer-Policy 后 URL 可以放 token。 URL 仍会进入历史记录、日志和分享链路。
误区：no-referrer 永远最好。 它更安全，但可能影响来源分析和部分业务统计。
追问：推荐默认值是什么？ 常见推荐是 strict-origin-when-cross-origin，敏感页面单独收紧。
追问：noopener 和 noreferrer 区别？ noopener 防 opener 引用，noreferrer 还会阻止 Referer。
追问：前端怎么局部控制？ <a>、img、script 等可设置 referrerpolicy 属性。

八、加强记忆

Referrer-Policy 记成“跳出去时带多少来路”。默认用严格折中策略，敏感页面不发 Referer，但根本原则是 URL 不放秘密。

简化版

详细版