本文详解如何通过 html 原生属性（如 `rel="noreferrer"`）安全、可靠地隐藏或清除跳转时的 referer，规避 javascript 依赖与兼容性问题，适用于 seo 友好且注重隐私的外链场景。
在 Web 开发中，当用户从 page1.com 点击链接跳转至 example1.com 时，浏览器默认会在 HTTP 请求头中携带 Referer: https://page1.com。这虽有助于分析流量来源，但也可能暴露敏感路径、影响用户隐私，或被目标站点用于反爬/限流策略。你希望将 Referer 替换为自定义值（如 rock&roll.com），但需注意：现代浏览器出于安全与隐私考虑，完全禁止前端代码伪造或篡改 Referer 头——无论是通过 、JavaScript location.replace() 还是表单提交，均无法实现“指定任意自定义 Referer”。
✅ 正确且标准的解决方案是使用 HTML 的 rel 属性组合：
访问示例站点
该写法会：
- 完全移除 Referer 请求头（服务端收到空或缺失的 Referer 字段）；
- 同时隐式启用 noopener（防止新页面通过 window.opener 访问原页面，提升安全性）；
- 无需 JavaScript，100% 原生支持，所有现代浏览器（Chrome 49+、Firefox 36+、Safari 10.1+、Edge 15+）均兼容；
- 页面加载零延迟，无 JS 关闭导致的失效风险。
⚠️ 注意事项：
- rel="noreferrer" 与 rel="nofollow" 可共存（如 rel="noreferrer nofollow"），但二者作用不同：noreferrer 控制 Referer，nofollow 仅向搜索引擎表明“不背书该链接”，不影响请求头；
- ❌ 不要尝试 rel="noreferrer" + target="_blank" 而不加 noopener —— 尽管 noreferrer 已隐含 noopener，显式写出更清晰（rel="noreferrer noopener"）；
- ❌ 无法设置“自定义 Referer”（如 rock&roll.com）：浏览器只允许 null（即清空）或继承原始来源，这是强制的安全限制；
- 若需更高阶控制（如服务端跳转伪造 Referer），必须由后端发起（如 PHP cURL 设置 CURLOPT_REFERER），但该 Referer 属于服务端请求，对最终用户浏览器无意义。
? 总结：
对于前端可控的跳转场景，rel="noreferrer" 是唯一符合标准、跨浏览器、无 JS 依赖的 Referer 清除方案。它不是“替换”，而是“安全清空”，既保护用户隐私，又防范 opener 漏洞，应作为外链跳转的默认实践。
