rel="noopener" 是 HTML 中 <a> 标签（超链接）的一个安全属性，用于限制通过该链接打开的新窗口（或标签页）对原页面的访问权限，核心作用是防范潜在的安全风险和性能问题。
一、核心作用：解决「window.opener 安全漏洞」
当使用 <a target="_blank"> 打开新窗口时，浏览器会默认赋予新窗口一个特殊对象 window.opener，该对象允许新窗口直接操作原页面（如修改原页面的 URL、跳转至恶意网站、读取原页面部分信息等）。
而 rel="noopener" 的核心功能就是禁用新窗口的 window.opener 对象 ，让新窗口无法访问原页面，从而彻底阻断基于 window.opener 的恶意攻击。
二、具体风险场景（没有 rel="noopener" 时）
假设原页面有一个未加安全属性的链接：
html
xml
<!-- 危险：新窗口可通过 window.opener 操控原页面 -->
<a href="https://恶意网站.com" target="_blank">点击访问</a>当用户点击该链接后，新打开的「恶意网站」可以执行以下操作：
- 篡改原页面 URL ：通过
window.opener.location.href = "https://钓鱼网站.com"，将原页面跳转至钓鱼页面，诱导用户输入账号密码； - 读取原页面信息 ：在某些场景下，恶意网站可通过
window.opener读取原页面的document对象、localStorage等（虽有浏览器安全限制，但仍存在漏洞风险）； - 影响原页面性能：新窗口的 JavaScript 执行可能占用原页面的浏览器资源，导致原页面卡顿。
三、使用场景：所有 target="_blank" 的链接都建议添加
只要你的超链接需要用 target="_blank" 打开新窗口 / 标签页，无论链接指向的是自己的网站还是外部网站，都强烈建议添加 rel="noopener" ，尤其针对：
-
指向外部第三方网站的链接（风险最高，无法控制第三方网站是否恶意）；
-
用户生成内容（UGC）中的链接（如评论区、论坛的用户分享链接，可能被注入恶意地址）。
正确用法示例：
html
xml
<!-- 安全：新窗口无 window.opener 权限 -->
<a href="https://安全网站.com" target="_blank" rel="noopener">点击访问</a>四、相关属性：rel="noreferrer"
除了 noopener，还有一个类似属性 rel="noreferrer"，二者功能有重叠但不完全相同：
| 属性 | 核心功能 | 是否禁用 window.opener |
是否隐藏「来源信息」（Referrer） |
|---|---|---|---|
rel="noopener" |
仅限制新窗口对原页面的访问权限 | ✅ 是 | ❌ 否（新窗口仍能获取原页面 URL） |
rel="noreferrer" |
同时限制 window.opener + 隐藏来源信息 |
✅ 是 | ✅ 是（新窗口无法获取原页面 URL） |
- 选择建议 ：
若仅需防范window.opener漏洞，用noopener即可；
若需要额外隐藏原页面的来源（如不希望目标网站知道用户从你的页面跳转过去），可使用noreferrer（但注意：隐藏 Referrer 可能影响目标网站的流量统计）。
五、浏览器兼容性
rel="noopener" 支持所有现代浏览器（Chrome 49+、Firefox 52+、Safari 10.1+、Edge 79+），对于极少数老旧浏览器（如 IE），虽不识别该属性，但这些浏览器本身也逐渐被淘汰，无需过度兼容。
综上，rel="noopener" 是保障 <a target="_blank"> 链接安全的「必备属性」，开发中应养成添加的习惯，避免因疏忽导致安全风险。
补充资料：
rel="noopener" 作为一项安全功能，其添加时间在不同浏览器和平台上有所不同。
在浏览器兼容性方面，据一些资料显示，Chrome 6.0（2010 年 9 月）、Firefox 4.0（2011 年 3 月）、Opera 11.1（2011 年 3 月）、Safari 5.0（2010 年 6 月）就开始支持 rel 属性，但当时可能并未完全明确其防范 window.opener 安全漏洞的功能。而 IE / Edge 12.0 则是在 2015 年 7 月开始支持。
从功能明确实现的角度来看，2016 年 11 月 23 日，rel="noopener" 作为安全修复程序被添加到 TinyMCE 插件中，WordPress 4.7.4 版本也随之更新了该功能。到 2019 年，Firefox 67 开始，当元素设置了 target="_blank" 属性后，会自动附加 rel="noopener" 的特性。Chrome 88 之后也更新了安全策略，默认 a 链接的 rel="noopener"。