本文介绍如何通过 html 原生属性（无需 javascript）在页面跳转时安全、可靠地控制 referer 头，实现隐藏真实来源或避免被追踪，兼顾兼容性与用户体验。
在 Web 开发中，当用户从 page1.com 点击链接跳转至 example1.com 时，浏览器默认会在 HTTP 请求头中携带 Referer: https://page1.com。这一行为虽有助于分析流量来源，但也可能引发隐私泄露或被目标站点识别来源策略（如反爬、权限限制等）。用户提出的需求——将 Referer 替换为自定义值（如 rock&roll.com）或彻底清除——需明确一点：现代浏览器出于安全与隐私考虑，不支持任意伪造 Referer 值；但完全清空 Referer 是可行且标准化的方案，且无需依赖 JavaScript。
✅ 推荐方案：使用 rel="noreferrer"（推荐首选）
最简洁、可靠、无 JS 依赖的方式是在 <a> 标签中添加 rel="noreferrer" 属性：
<a href="https://example1.com" rel="noreferrer">访问示例站点</a>
✅ 效果：
- 浏览器不会发送 Referer 请求头（即服务端收到空 Referer 或 null）；
- 同时隐式启用 noopener（防止新页面通过 window.opener 访问原页面，规避安全风险）；
- 兼容所有现代浏览器（Chrome 14+、Firefox 23+、Safari 9.1+、Edge 12+）；
- 无需等待 JS 加载，首屏即生效，完美解决“JS 渲染关闭”或“加载延迟”问题。
? 补充说明：rel="noreferrer" 作用于 <a>、<area> 和 <form> 元素。对 <form method="GET/POST"> 同样有效：<form action="https://example1.com" method="GET" rel="noreferrer"> <button type="submit">提交并清除 Referer</button> </form>
⚠️ 关于 rel="nofollow" 的说明
rel="nofollow" 不影响 Referer 行为，它仅是向搜索引擎声明“此链接不构成内容背书”，用于 SEO 场景（如评论区、用户生成链接）。与 Referer 控制无关，可单独使用，也可与 noreferrer 组合（语义更完整）：
<a href="https://example1.com" rel="noreferrer nofollow">安全跳转（无 Referer + 不索引）</a>
⚠️ 注意：组合使用时，noreferrer 仍是 Referer 清除的决定性属性，nofollow 仅为附加语义。
❌ 不可行方案澄清
- 无法伪造自定义 Referer（如 rock&roll.com）：受同源策略与浏览器安全模型限制，前端无法篡改 Referer 头值。任何尝试（如 Service Worker 拦截、meta refresh、iframe 中转等）均不可靠或已被主流浏览器禁用/限制。
- document.referrer 是只读属性：JavaScript 无法修改该字段，也无法影响实际网络请求中的 Referer 头。
- Meta Refresh / iframe 跳转已失效：旧方案（如通过中间页 meta redirect）在现代浏览器中仍会保留原始 Referer，且体验差、SEO 不友好，强烈不推荐。
✅ 最佳实践总结
| 场景 | 推荐方式 | 说明 |
|---|---|---|
| ✅ 隐藏来源（最常用） | <a href="..." rel="noreferrer"> | 简洁、标准、零依赖、高兼容 |
| ✅ 表单提交去 Referer | <form action="..." rel="noreferrer"> | 同样生效，适用于 POST/GET 提交 |
| ✅ SEO 友好 + 隐私保护 | rel="noreferrer nofollow" | 双重语义，适合用户生成内容 |
| ❌ 伪造 Referer | — | 浏览器禁止，技术上不可行 |
? 小贴士：若后端需识别特定来源（如合作渠道），应改用URL 参数传递（如 ?utm_source=rock_roll）或服务端跳转（302），由可信后端控制 Referer，而非前端伪造。
综上，rel="noreferrer" 是当前唯一符合标准、跨浏览器、无需脚本、安全可靠的 Referer 控制方案。它虽不能“替换”为任意值，但能精准满足“隐藏真实来源”的核心诉求，是隐私敏感型跳转（如广告落地页、第三方授权、合规外链）的黄金实践。
