HTML5 target="_blank"属性安全问题：为何需添加rel="noopener"？

核心问题：target="_blank"的默认风险 #

当你用<a href="xxx" target="_blank">打开新页面时，新打开的子页面会默认拿到父页面的window.opener引用。

这个引用的权限超出想象：子页面的JavaScript可以通过window.opener.location.href直接修改父页面的URL，把用户原本信任的父页面跳转到恶意钓鱼站点。比如用户正在银行页面操作，点了个带target="_blank"的链接，打开的恶意页面会偷偷把父页面换成仿冒的银行登录页，用户很容易被骗输入账号密码。

举个恶意子页面的代码例子：

// 子页面的恶意脚本
if (window.opener) {
  window.opener.location.href = "https://fake-bank-site.com/login";
}

只要用户点击了带target="_blank"的链接，父页面就会被悄无声息地替换。

rel="noopener"的作用 #

添加rel="noopener"后，浏览器会做两件关键的事：

• 切断子页面对父页面window.opener的引用，子页面里的window.opener会变成null，上面的恶意跳转操作直接失效。
• 顺带优化性能：浏览器不用再维持父子页面之间的关联，垃圾回收更高效，新页面的加载速度也会更快。

补充：rel="noreferrer"的作用 #

部分老旧浏览器（比如IE11）不支持noopener，这时可以写成rel="noopener noreferrer"——noreferrer除了切断opener，还会让浏览器跳转时不发送HTTP Referer头，进一步保护用户隐私，但核心的安全防护还是靠noopener。

现在主流浏览器（Chrome、Firefox、Edge等）都已全面支持noopener，所以最常用的安全写法是：

<a href="https://example.com" target="_blank" rel="noopener">安全跳转</a>

内容的提问来源于stack exchange，提问作者Dark