HTML a标签打开新标签页避免出现安全漏洞，请使用“noopener”

新标签页中打开一个网址如何出现安全漏洞

让咱们在网站上的新标签页中打开一个网址，HTML以下

<a href="https://malicious-domain.netlify.com" target="_blank">
  访问恶意网站！
</a>
复制代码

这里咱们有一个指向恶意网站的 href 属性，并以 _blank 属性为 target，使其在新标签页中打开。

该流程看起来如此简单明了，用户在这里可能面临的安全风险是什么？

用户从你的页面重定向到域，此时，浏览器会将你当前网站的全部 window 变量内容附加到恶意网站的 window.opener 变量。如今恶意网站能够访问你网站的 window，这显然在重定向此方法时打开了一个安全漏洞。

恶意网站一旦经过 window.opener 访问了你的网站的 window 变量，它能够将你以前的网站重定向到一个新的钓鱼网站，这个网站可能与你打开的实际网站类似，甚至可能会要求你再次登陆。

在恶意网站中，只需编写如下代码便可完成上述修改

if (window.opener) {
  window.opener.location = 'https://www.dhilipkmr.dev';
}
复制代码

所以，无辜用户将陷入此陷阱，并提供可能暴露给攻击者的登陆详细信息。

咱们如何避免这种状况？

一种简单的方法是将带有 noopener 的 rel 属性添加到 <a> 标记。

<a href="https://malicious-domain.netlify.com" rel="noopener" target="_blank">
  访问恶意网站！
</a>
复制代码

它有什么做用？

rel = "noopener" 表示浏览器不要将当前网站的 window 变量附加到新打开的恶意网站。

这使得恶意网站的 window.opener 的值为 null。

所以，在将用户导航到你未维护的新域时，请小心。

并不是老是咱们用标签打开一个新标签，在某些状况下，你必须经过执行javascript的 window.open() 来打开它，以下所示：

function openInNewTab() {
  // 一些代码
  window.open('https://malicious-domain.netlify.com');
}
复制代码

<span class="link" onclick="openInNewTab()">访问恶意网站！</span>
复制代码

这里没有说起 noopener，所以这致使当前网站的 window 传递到恶意网站。

经过js打开新标签页时，该如何处理？

function openInNewTabWithoutOpener() {
   var newTab = window.open();
   newTab.opener = null;
   newTab.location='https://malicious-domain.netlify.com';
 }
复制代码

<span class="link" onclick="openInNewTabWithoutOpener()">访问恶意网站！</span>
复制代码

咱们已经经过 window.open() 打开了一个虚拟标签，该标签打开了 about:blank，所以这意味着它还没有重定向到恶意网站。

而后，咱们将新标签的 opener 值修改成 null。

将咱们将新标签的网址修改成恶意网站的网址。

此次，opener 再次为空，所以它没法访问第一个网站的 window 变量。

问题解决了。

可是在旧版本的Safari中将没法使用此方法，所以咱们再次遇到问题。

如何解决Safari的问题？

function openInNewTabWithNoopener() {
  const aTag = document.createElement('a');
  aTag.rel = 'noopener';
  aTag.target = "_blank";
  aTag.href = 'https://malicious-domain.netlify.com';
  aTag.click();
}
复制代码

<span class="link" onclick="openInNewTabWithoutOpener()">访问恶意网站！</span>
复制代码

在这里，咱们模拟点击锚标记。

• 咱们建立 <a> 标记并分配所需的属性，而后在其上执行 click()，其行为与单击连接相同。
• 不要忘记在此处向标签添加 rel 属性。

其余事实：

• 当您在锚标记上单击 CMD + LINK 时，Chrome，Firefox和Safari会将恶意网站的 window.opener 视为 null。
• 可是，在经过JavaScript处理新标签页打开的元素上的 CMD + LINK 上，浏览器将附加窗口变量并将其发送到新标签页。
• 默认状况下，新版的Safari会在全部状况下删除 window.opener，要将窗口信息传递给新的标签页，你必须明确指定 rel='opener'。

没有人能够绕过你的"保安"。

---

来源：dev.to，做者：Dhilip kumar，翻译：公众号《前端外文精选》

本文首发于微信公众号《前端外文精选》，关注即送大礼包，准能为你节省很多钱！