本文详解如何使用原生 HTML 的 rel="noreferrer" 属性，在不依赖 JavaScript 的前提下，彻底隐藏或重置页面跳转时的 Referer 信息，实现对目标站点不可见真实来源的效果。
本文详解如何使用原生 html 的 `rel="noreferrer"` 属性，在不依赖 javascript 的前提下，彻底隐藏或重置页面跳转时的 referer 信息，实现对目标站点不可见真实来源的效果。
在 Web 开发与隐私合规实践中，控制 HTTP 请求中的 Referer 请求头至关重要。例如，当用户从 page1.com 点击链接跳转至 example1.com 时，浏览器默认会在请求头中携带 Referer: https://page1.com/ —— 这不仅暴露了流量来源，还可能引发数据追踪、反爬识别或第三方平台的策略限制（如广告归因干扰、API 访问拒绝等）。
需要明确的是：你无法通过前端手段将 Referer “伪造”为任意自定义值（如 rock&roll.com）。HTTP 规范和主流浏览器出于安全考虑，严格禁止客户端篡改 Referer 为非空、非当前源的任意字符串。但你可以可靠地清空 Referer，使其变为完全缺失（即不发送 Referer 头），从而达到“对目标站不可见原始来源”的实际效果。
最标准、兼容性最佳且无需 JS 的方案是使用 HTML 标签的 rel 属性：
<a href="https://example1.com" rel="noreferrer">访问示例站点</a>
✅ 此写法在所有现代浏览器（Chrome、Firefox、Safari、Edge ≥79）及绝大多数移动端 WebView 中均生效；
✅ 不依赖 JavaScript，禁用 JS 时仍完全有效；
✅ 符合 HTML5 规范，语义清晰，SEO 友好；
✅ 同时隐式启用 noopener 行为，避免新开窗口被恶意脚本反向操控（安全加固）。
? 补充说明：rel="noreferrer" 会完全抑制 Referer 请求头的发送（即服务端收到的请求中不含该字段），而非将其设为空字符串或伪造值。这是 W3C 明确规定的标准行为。
立即学习“前端免费学习笔记（深入）”；
⚠️ 注意事项：
- ❌ 不要混用 rel="noreferrer nofollow" 试图“伪装” Referer —— nofollow 仅影响搜索引擎爬虫的链接权重传递，对 Referer 头毫无影响；
- ❌ 避免错误使用 window.location.href 或 等跳转方式：它们无法控制 Referer，多数情况下仍会继承原始来源；
- ✅ 若需兼顾 SEO 与 Referer 控制，可结合服务端重定向（如 302 跳转）并设置 Referrer-Policy: no-referrer 响应头，但该方案需后端配合，不适用于纯静态链接场景。
总结：对于纯前端、零依赖、高兼容性的 Referer 隐藏需求，rel="noreferrer" 是唯一推荐的标准解法。它简洁、可靠、安全，且已被 MDN、CanIUse 和各大浏览器厂商长期验证。务必优先采用此属性，而非尝试绕过浏览器安全机制的非常规手段。
