本文介绍如何使用 html 的 `rel="noreferrer"` 属性在页面跳转时清除或隐藏原始来源（referer），从而防止目标网站获取真实来源地址，同时兼顾兼容性与无需 javascript 的原生方案。
在 Web 开发中，当用户从 page1.com 点击链接跳转至 example1.com 时，浏览器默认会在 HTTP 请求头中携带 Referer: https://page1.com 字段。这虽有助于流量分析，但也带来隐私与安全顾虑——例如不希望目标站点知晓真实来源，或需规避某些基于 Referer 的访问限制。
关键结论：你无法“伪造”或“自定义”Referer 值（如设为 rock&roll.com），但可以可靠地“清除”它。 浏览器出于安全策略，禁止前端脚本（包括 <meta http-equiv>、document.referrer 修改、fetch() 的 referrerPolicy 覆盖等）篡改跨域请求的 Referer 头；唯一标准、可靠且无需 JavaScript 的方式是使用 HTML 的 rel 属性。
✅ 推荐方案：rel="noreferrer"
在链接中添加 rel="noreferrer" 即可完全移除 Referer 头：
<a href="https://example1.com" rel="noreferrer">访问示例站点</a>
效果：
立即学习“前端免费学习笔记（深入）”；
- 点击后跳转至 https://example1.com；
- 发起的请求 不包含 Referer 请求头（即服务器端 $_SERVER['HTTP_REFERER'] 或 request.headers.referer 为空）；
- 同时隐式启用 noopener（防止新页面通过 window.opener 反向操控原页面，提升安全性）；
- 兼容所有现代浏览器（Chrome 18+、Firefox 23+、Safari 7.1+、Edge 12+），且纯静态 HTML 即可生效，无需 JS，无加载延迟，对禁用 JavaScript 的用户完全友好。
? 补充说明：rel="noreferrer" 与 rel="nofollow noreferrer" 效果一致，但 nofollow 仅影响搜索引擎爬虫的链接权重传递，对 Referer 控制无实际作用。因此若仅关注 Referer 隐私，noreferrer 单独使用即可。
❌ 不可行方案澄清
- JavaScript 重定向（如 location.href 或 window.open）：无法可靠修改 Referer；fetch() 或 XMLHttpRequest 的 referrerPolicy 仅适用于同源或 CORS 配置下的资源请求，不适用于页面级导航。
- <meta http-equiv="refresh">：会保留原始 Referer，且用户体验差。
- 服务端 302 重定向 + 自定义 Referer：Referer 由发起请求的客户端决定，服务端无法设置或覆盖用户浏览器发出的 Referer 头。
⚠️ 注意事项
- rel="noreferrer" 会同时禁用 window.opener，因此若需子页面回调父页面（如 OAuth 回调），应改用 postMessage 等安全通信机制；
- 若需部分保留 Referer（如仅移除路径、保留域名），可使用 referrerPolicy="strict-origin" 等更精细策略，但需注意其兼容性略低于 noreferrer；
- noreferrer 对表单提交同样有效：<form action="https://example1.com" method="GET" rel="noreferrer">（注意：HTML 规范中 rel 在 <form> 上的支持始于 HTML5.2，主流浏览器已广泛支持）。
综上，rel="noreferrer" 是当前最简洁、安全、兼容且符合标准的 Referer 隐私控制方案——它不提供“伪装”，但能坚定地“清空”，而这恰恰是多数合规与隐私场景下的最优解。
