最直接有效的做法是:对跳转链接加 rel="noreferrer";对资源加载用 referrerpolicy 属性;全局策略优先用 HTTP 响应头 Referrer-Policy。

想精准控制 Referer 的发送行为,其实没那么复杂。核心思路就三条:处理跳转链接,用 rel="noreferrer";控制静态资源加载,用 referrerpolicy 属性;至于全站统一的策略,则优先通过 HTTP 响应头 Referrer-Policy 来设置,这比在 HTML 里写 标签要靠谱得多。
什么时候该用 rel="noreferrer" 而不是 referrerpolicy
这里有个关键区别,很多人容易混淆。rel="noreferrer" 只对 标签的跳转行为生效,而且效果是“一刀切”的——它会彻底移除 Referer 请求头,同时自动附带 noopener 属性来防止 window.opener 劫持。你可以这么理解:referrerpolicy 是在规定“怎么发”Referer,而 rel="noreferrer" 则是直接决定“不发”。
- 适用场景:用户点击外链跳转时,尤其是涉及敏感信息(如支付页面、管理后台)的链接,或者广告、第三方推广链接,用这个属性最省心。
- 常见误区:别把它和
rel="nofollow"或单独使用rel="noopener"搞混了。前者是给搜索引擎看的,不影响 Referer;后者只防劫持,不阻止 Referer 发送。 - 重要限制:这个属性对
表单提交是无效的,它只作用于和标签。
referrerpolicy 属性在哪些标签上能用
这个属性的支持范围很明确,主要针对那些会发起资源请求的标签,比如 、、、、、 和 。但请注意,它不支持 标签(那里是 rel 属性的地盘),也不支持 标签(表单提交的 Referer 控制目前没有标准的前端属性)。
- 典型错误:在
标签上写referrerpolicy="no-referrer"是没用的,浏览器会直接忽略它。 - 优先级规则:这个属性的设置具有“局部优先”的效力。举个例子,即使你的页面通过 HTTP 响应头设置了全局策略
Referrer-Policy: origin-when-cross-origin,但某个具体的图片请求,依然会按照no-referrer执行,不发送 Referer。 - 值选错的风险:使用
unsafe-url这个策略值时要格外小心,它会将完整的 URL(包括所有查询参数)都发送出去。如果 URL 里包含了 token、user_id 等敏感信息,就等于直接泄露了,生产环境必须禁止。
HTTP 响应头 Referrer-Policy 和 哪个更靠谱
答案是明确的:服务端设置的 HTTP 响应头 Referrer-Policy 优先级最高,也最可靠。它能覆盖页面发出的几乎所有请求,包括由内联 Ja vaScript 发起的 fetch() 或 XMLHttpRequest 调用,并且会覆盖 标签和大部分标签上的 referrerpolicy 属性设置。而 更像是一个遗留方案,它只影响当前 HTML 文档解析后发出的请求,而且浏览器的支持度并不统一(比如 Safari 对其处理就比较弱)。
立即学习“前端免费学习笔记(深入)”;
- 必须用响应头的场景:当你需要统一控制由 Ja vaScript 发起的跨域请求的 Referer、希望对全站进行集中策略管理,或者需要满足严格的安全合规审计要求时,响应头是唯一的选择。
- 策略冲突与优先级:注意避免混用多种策略。如果同时存在 CSP (Content Security Policy) 中的
referrer指令、HTTP 响应头和 HTML标签,它们的生效顺序是:HTTP 响应头 > CSP 指令 >标签。 - 兼容性提示:目前推荐使用的
strict-origin-when-cross-origin策略,在 Chrome 85+、Firefox 79+、Safari 16.4+ 上支持良好。但对于老版本的 Safari,它可能会自动降级为no-referrer-when-downgrade,这点在测试时需要注意。
调试时怎么看 Referer 到底有没有发出去
别靠猜测,最直接的方法就是打开浏览器的开发者工具。在 Network(网络)面板里,查看每一个请求的 Request Headers(请求头),找找看有没有 Referer 字段,以及它的具体值是什么。这里有两个细节特别关键:
- 如果
Referer这个字段在请求头里完全不存在(而不是一个空值),那通常说明前端策略(如rel="noreferrer"或referrerpolicy="no-referrer")生效了。 - 如果字段存在但值是空字符串(
Referer:),那可能是服务器端或某个中间件、CDN 主动清空了它,并不一定代表前端策略设置成功。 - 特别留意重定向链:一个页面发起的请求可能带了 Referer,但如果服务器返回了 302 重定向,那么跳转后的第二个请求是否还携带 Referer,就取决于目标页面的策略了,源页面是无法控制的。
最后,还有一个容易被忽略的边界:Referer 控制只作用于从当前页面“出站”的 HTTP 请求。对于同域名内的页面导航、使用 history.pushState 改变 URL,或者直接给 location.href 赋值这些行为,它是无效的。另外,document.referrer 这个属性是只读的,它记录的是上一个页面的 URL,当前页面无法通过任何 HTML 属性或 Ja vaScript 去修改它。
