HTML怎么做Referrer Policy_html Referrer Policy来源策略设置实用技巧

最直接有效的做法是：对跳转链接加 rel="noreferrer"；对资源加载用 referrerpolicy 属性；全局策略优先用 HTTP 响应头 Referrer-Policy。

想控制 Referer 发送行为，最直接有效的做法是：对跳转链接加 rel="noreferrer"；对资源加载（如 <img>、<script>）用 referrerpolicy 属性；全局策略优先走 HTTP 响应头 Referrer-Policy，而非 <meta>。

什么时候该用 rel="noreferrer" 而不是 referrerpolicy

只对 <a> 标签的跳转行为生效，且效果最强——它会彻底移除 Referer 请求头，同时自动附带 noopener（防 window.opener 劫持）。这和 referrerpolicy 的语义完全不同：referrerpolicy 是“怎么发”，而 rel="noreferrer" 是“不发”。

• 适用场景：用户点击外链跳转（尤其是敏感页、支付页、后台页）、广告链接、第三方推广链接
• 错误用法：写成 rel="nofollow" 或 rel="noopener" 单独使用——前者不影响 Referer，后者不阻止 Referer
• 注意：不能用于 <form> 提交，该属性仅对 <a> 和 <area> 有效

referrerpolicy 属性在哪些标签上能用

支持的 HTML 元素包括：<img>、<iframe>、<script>、<link>、<audio>、<video>、<embed>。但不支持 <a>（要用 rel）或 <form>（无标准控制方式）。

• 常见误配：<a href="..." referrerpolicy="no-referrer"> —— 浏览器忽略该属性，毫无效果
• 局部优先级高于全局：比如页面设了响应头 Referrer-Policy: origin-when-cross-origin，但某个 <img referrerpolicy="no-referrer"> 仍会按 no-referrer 执行
• 值选错风险：unsafe-url 会泄露完整 URL（含 query 参数），包括 token、user_id 等，生产环境禁止使用

HTTP 响应头 Referrer-Policy 和 <meta> 哪个更靠谱

服务端设置的响应头 Referrer-Policy 优先级最高，覆盖所有请求（含内联脚本发起的 fetch/fetch()、XMLHttpRequest），也覆盖 <meta> 和大部分标签属性。而 <meta name="referrer"> 是遗留方案，仅影响当前 HTML 文档后续发出的请求，且不被所有浏览器完全支持（如 Safari 对其处理较弱）。

立即学习“前端免费学习笔记（深入）”；

• 必须用响应头的场景：需要控制 JS 发起的跨域请求 Referer、统一管理全站策略、满足合规审计要求
• 避免混用：CSP 中的 referrer 指令（如 Content-Security-Policy: referrer no-referrer）会覆盖 HTML 中的 <meta>，但不会覆盖响应头 Referrer-Policy；若三者共存，顺序为：响应头 > CSP 指令 > <meta>
• 兼容性提示：strict-origin-when-cross-origin 在 Chrome 85+、Firefox 79+、Safari 16.4+ 支持良好；老版本 Safari 可能降级为 no-referrer-when-downgrade

调试时怎么看 Referer 到底有没有发出去

别猜，直接看 DevTools Network 面板里每个请求的 Request Headers —— 找 Referer 字段是否存在、值是什么。注意两个关键点：

• 如果字段完全缺失（不是空字符串），说明策略生效（如 rel="noreferrer" 或 referrerpolicy="no-referrer"）
• 如果值是空字符串（Referer: ），可能是服务器主动清空，或某些中间件/CDN 干预，不代表前端策略成功
• 特别留意重定向链：第一次请求可能带 Referer，但 302 后的跳转请求是否还带，取决于跳转目标页自身的策略，不是源页面能控制的

真正容易被忽略的是：Referer 控制只作用于“出站”请求，对同域内导航、history.pushState、location.href 赋值等行为无效；另外，document.referrer 的值由上一个页面决定，前端无法通过任何属性修改它——它只是只读快照。