rel="noreferrer"让浏览器在a标签点击跳转时彻底不发送referer请求头，目标服务器收不到该字段，document.referrer为空，不依赖js、全现代浏览器支持，但需配合noopener防opener劫持。
加 rel="noreferrer" 就能彻底不发 Referer 请求头——不是“隐藏”，是压根不带来源 URL，目标服务器收不到 Referer 字段。
rel="noreferrer" 的实际效果是什么
它让浏览器在点击跳转时，完全省略 HTTP 请求头中的 Referer 字段。目标站点（比如 example.com）收到的请求里，连 Referer: https://yoursite.com/path 这行都没有。这不是遮掩，是清零。
- document.referrer 在目标页也会是空字符串，不是被截断或脱敏，而是根本没传过去
- 不依赖 JavaScript，静态 HTML、邮件模板、CMS 输出页都能生效
- 所有现代浏览器（Chrome 51+、Firefox 50+、Safari 11.1+、Edge 79+）原生支持，无 polyfill 需求
- 右键“在新标签页打开”不受影响——这是设计使然，HTML 层面无法干预用户主动行为
为什么不能只写 rel="noreferrer"
它确实能清 Referer，但旧版 Safari（≤12.0）、部分 Android WebView、以及写了其他 rel 值（如 rel="nofollow"）时，noreferrer 不会自动启用 noopener，window.opener 仍可能被利用。
- 必须显式补上
rel="noopener noreferrer"，两者作用不同：noopener防劫持，noreferrer防泄露 - 如果只写
rel="noreferrer"，Lighthouse 等工具仍会报target="_blank"缺失noopener的中危问题 - 不要写成
rel="noreferrer noopener"以外的顺序——虽然多数浏览器兼容，但规范未定义顺序优先级，保守起见按标准组合写
哪些场景必须加，又容易漏掉
只要链接指向第三方域名，且你不想暴露当前页面路径（比如 /admin/user?id=123 或 /dashboard/report?token=abc），就必须加。
- 广告位、联盟链接、下载按钮（如
@#@#@#@#@#@#@#@#@#@0） - 后台系统里的“访问官网”“帮助中心”等外链，常被开发者当成内部跳转忽略
- 邮件模板中嵌入的 HTML 链接——很多 CMS 会 strip
rel属性，需检查最终渲染结果是否保留 -
target="_blank"时只加noopener没加noreferrer：Referer 依然泄露，隐私保护形同虚设
和 referrerpolicy="no-referrer" 别混用
rel="noreferrer" 和 referrerpolicy="no-referrer" 表面效果相似，但机制完全不同，不能互相替代，也不能共存于同一标签。
-
rel="noreferrer"只作用于<a></a>点击跳转，且隐式启用noopener -
referrerpolicy="no-referrer"可用于<img>、<script></script>、<iframe></iframe>、<form></form>，但对<a></a>无效（会被rel属性覆盖） - 若同时写
rel="noreferrer" referrerpolicy="no-referrer"，后者会被忽略——rel优先级更高 - 服务端需要 Referer 做白名单校验时，加
noreferrer会导致校验失败，此时应改用后端 302 跳转来控制 Referer
真正难处理的是那些你控制不了的跳转方式：右键新开、拖拽地址栏、复制粘贴 URL。它们绕过所有 HTML 属性，rel="noreferrer" 对它们无效——这不是缺陷，而是浏览器有意为之的安全边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
