rel="noopener"能切断window.opener引用,因为它在浏览器解析target="_blank"链接时主动将新页面的window.opener设为null,彻底阻断双向引用和劫持可能;必须与target="_blank"配合使用才生效。

为什么 rel="noopener" 能切断 window.opener 引用
当用 target="_blank" 打开新窗口时,浏览器默认让子页面通过 window.opener 持有对父页面的引用。这不仅是安全风险(子页可调用 opener.location.replace() 劫持父页),还会阻碍父页的垃圾回收——即使父页已跳转或关闭,只要子页还活着,父页 DOM 就无法释放。rel="noopener" 的作用就是从源头禁止这个引用建立,子页中 window.opener 直接为 null,彻底断开双向关联。
rel="noopener" 必须和 target="_blank" 一起用才生效
单独写 rel="noopener" 在其他场景下无实际效果。它只在创建新浏览上下文(即新开 tab 或 window)时起作用:
- 仅对
<a target="_blank">、<form target="_blank">或window.open(url, "_blank")生效 - 若写成
target="_blank" rel="noopener",现代浏览器(Chrome 61+、Firefox 52+、Safari 12.1+)均会忽略window.opener - 注意:IE 不支持
rel="noopener",但 IE 也不支持target="_blank"的 opener 引用(其window.opener行为本就受限)
别漏掉 rel="noreferrer" —— 它顺便解决 Referer 泄露
rel="noopener" 只切断 JS 引用,不阻止 HTTP 请求头中的 Referer 字段。如果链接指向第三方,父页 URL 可能被泄露。此时应叠加使用:
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Link</a>
这样既清空 window.opener,又让发起的请求不带 Referer 头。注意:rel="noreferrer" 本身也会隐式启用 noopener(行为等价),但显式写出两者更清晰、兼容性更稳。
立即学习“前端免费学习笔记(深入)”;
用 window.open() 时不能只靠 HTML 属性
JS 主动打开窗口时,rel 属性无效,必须靠 features 参数控制:
- 错误写法:
window.open(url, "_blank", "noopener")——noopener不是合法 feature 名 - 正确写法:
window.open(url, "_blank", "noopener=yes")(Chrome/Edge 支持)或更稳妥的window.open(url, "_blank", "noopener")加rel="noopener"配合(但仅限同源) - 最可靠方案:改用
location.replace()+ 新窗口监听,或直接依赖rel="noopener noreferrer"的<a>标签触发
真正容易被忽略的是:服务端渲染或 CMS 输出的链接常自动补 target="_blank" 却忘了加 rel,这类“半截子”链接才是真实风险高发区。


















