referrerpolicy 是控制浏览器发起请求时是否及如何发送 Referer 请求头的属性，必须在涉及隐私泄露风险（如外链跳转、CDN资源加载）或需与CSP协同安全加固时显式配置。
referrerpolicy 是什么，什么时候必须配
referrerpolicy 控制浏览器在发起请求（比如 <a> 跳转、<img> 加载、<script> 引入）时，是否以及如何发送 Referer 请求头。不配它，默认行为因浏览器和上下文而异——比如 Chrome 对 HTTPS 页面的跨域 <a> 默认发完整 Referer，但对 <img> 可能只发源站；Firefox 更保守。这意味着你无法靠“默认”保证隐私或兼容性。
必须配的典型场景：
• 外链跳转到第三方统计/登录页，不想泄露来源路径
• 静态资源（如 CDN 上的图片、JS）被嵌入多个站点，避免 Referer 泄露主站路径
• 使用 CSP 的 reflected-xss 或配合 strict-origin-when-cross-origin 做安全加固
常见 referrerpolicy 值的实际效果差异
值不是越多越好，关键看你要平衡“溯源需求”和“隐私/安全”。以下是最常用且行为明确的几个：
-
no-referrer：完全不发Referer头。适合敏感跳转，但目标站将彻底丢失来源信息 -
origin：只发协议+域名+端口（如https://a.com），丢弃路径和查询参数。多数外链推荐用这个 -
strict-origin-when-cross-origin：同源请求发完整 Referer；跨域 HTTPS→HTTPS 发 origin；跨域 HTTPS→HTTP 什么也不发（防降级泄露）。这是目前最安全的默认选项 -
unsafe-url：始终发完整 URL（含路径、参数）。仅限内网调试，生产环境禁用
注意：no-referrer-when-downgrade 是旧版默认值，但在现代 HTTPS 普及后已不够用——它允许 HTTPS→HTTP 发完整 Referer，存在信息泄露风险。
立即学习“前端免费学习笔记（深入）”；
怎么加 referrerpolicy —— 元素级 vs 全局配置
不能全局统一设，必须按需加在具体标签上。HTML 中只支持元素级设置，没有 <meta> 或 HTTP Header 级别的“全站默认”（Header 里用 Referrer-Policy 字段是另一套机制）。
实操建议：
- 外链跳转：
<a href="https://third.com/login" referrerpolicy="origin">登录</a> - CDN 图片：
<img src="https://cdn.com/logo.png" referrerpolicy="no-referrer">（防止 CDN 日志暴露你的页面路径） - 第三方脚本：
<script src="https://stats.com/tracker.js" referrerpolicy="strict-origin-when-cross-origin"></script> - 不要给
<link rel="stylesheet">加，除非你确认 CSS 服务器依赖 Referer 做权限校验（极少见）
Vue/React 等框架里动态生成的标签，也要记得在 JSX 或模板中显式绑定 referrerpolicy 属性，它不会继承父节点设置。
容易被忽略的坑：CSP 和 referrerpolicy 冲突
如果你同时用了 CSP 的 reflected-xss 或设置了 referrer-policy HTTP Header，浏览器会按“更严格的策略”生效。例如：
• HTTP Header 返回 Referrer-Policy: no-referrer
• HTML 中某个 <a> 标签写了 referrerpolicy="origin"
→ 实际生效的是 Header 的 no-referrer，标签上的设置被忽略
排查方法：
• 打开 DevTools → Network → 点开请求 → 查看 Request Headers 是否有 Referer
• 对比响应头里的 Referrer-Policy 和元素属性，以 Header 为准
• 如果只想用 HTML 属性控制，确保服务器没返回同名 Header
另外，<meta name="referrer"> 已废弃，Chrome 85+ 完全忽略，别再用。
