a标签加referrerpolicy能防跨域跳转泄露路径和参数,因默认no-referrer-when-downgrade在HTTPS→HTTPS时仍发完整URL,而设origin或strict-origin-when-cross-origin可裁剪为仅源站;但它仅对用户点击生效,右键新开会绕过,须搭配rel="noreferrer"才真正可靠。

直接加 referrerpolicy 属性能防跨域跳转时泄露路径和查询参数,但只对用户点击生效,右键“在新标签页打开”会绕过它——必须搭配 rel="noreferrer" 才真正可靠。
为什么 a 标签加 referrerpolicy 能保护隐私
默认策略 no-referrer-when-downgrade 在 HTTPS → HTTPS 跳转时仍发送完整 URL(比如 https://site.com/admin/user?id=123&token=abc),第三方目标站全都能看到。而显式设为 origin 或 strict-origin-when-cross-origin 后,跨域时只发 https://site.com,路径、参数、hash 全部裁掉。
-
origin:一律只发协议+域名+端口,不管同源还是跨源 -
strict-origin-when-cross-origin:同源发完整 URL;跨源 HTTPS 只发 origin;HTTPS → HTTP 不发 Referer - 拼错值(如
origin-when-crossorigin少个-)会被静默降级为默认策略,敏感信息照漏
a 标签的 referrerpolicy 对哪些行为有效
它只控制「用户主动点击」这个动作触发的跳转请求,且仅影响 Referer 请求头内容,不改变页面逻辑或安全上下文:
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF,自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页,适用于看板、报表、网页和交互图表转 PDF。
- ✅ 点击链接跳转(包括
target="_blank") - ❌ 右键“在新标签页中打开”——浏览器忽略该属性,走自身默认策略
- ❌
window.location.href = url或location.assign()—— 完全不认这个属性 - ❌ 新页面里 JS 发起的
fetch()或图片加载——由新页面自己的策略或响应头控制
容易被忽略的关键冲突点
最常踩的坑是混用 rel 和 referrerpolicy:
立即学习“前端免费学习笔记(深入)”;
- 如果同时写
<a href="..." rel="noreferrer" referrerpolicy="origin">,浏览器以rel="noreferrer"为准,referrerpolicy被静默忽略 -
rel="noreferrer"比referrerpolicy="no-referrer"更彻底:它不仅清 Referer,还隐式启用noopener,防止新开页通过window.opener反控原页面 - 想精确控制 Referer 内容(比如只发 origin),就别加
rel="noreferrer";图省事保安全,直接用rel="noreferrer"更稳妥
真正起效的前提是:你得知道下游服务怎么校验 Referer。比如 CDN 配了白名单只认 https://yoursite.com/*,你却设了 origin,Referer 变成 https://yoursite.com,照样 403。单点加属性不是万能解药,得跟后端策略对齐。


















