a标签 链接 target=”_blank” 为什么要增加 rel=”noopener noreferrer”

在<a></a>中使用target="_blank"

那么会得到以下错误提示：

Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener [react/jsx-no-target-blank]
 

意思就是必须要加rel="noopener noreferrer"，但是，为什么呢

参考原文：https://mathiasbynens.github.io/rel-noopener/

关于rel = noopener

它解决了什么问题呢？

当你正在浏览index.html

想象一下以下的链接是你网站上用户生成的内容。

点击上面的链接，新打开malicious.html在新的页面(使用target=_blank)。就本身而言，并不是一件让人兴奋的事情。

但是malicious.html文档在一个新的tab页包含了一个window.opener，它指向你当前正在浏览的页面。

这意味着一旦用户点击了链接，malicious.html就可以对文档的window的对象有着觉得的控制权。

index.html:

<a target=_blank  href="./malicious.html">
    Click me !! one (same-origin)
</a>

 

malicious.html

// window.opener 返回打开当前窗口的那个窗口的引用
if(window.opener){
    opener.location = 'http://localhost:63342/Security/index.html/#hax'
    // Just `opener.location.hash = '#hax'` only works on the same origin.

}
 

注意，当index.html和malicious.html如果是不同源，这也是有效的，windoe.opener.location可以跨源访问！(像window.opener.document是不能跨源访问的，因此CORS不适用在此处)。

在此概念证明中，malicious.html用index.html＃hax替换包含index.html的选项卡，index.html＃hax选项卡显示隐藏的信息。这是一个相对无害的示例，但它可以重定向到网页仿冒页面，设计看起来像真正的index.html，要求用户填写登录凭据。用户可能不会注意到这一点，因为当重定向发生在后台时，用户焦点会集中在新窗口中的恶意页面上。通过在重定向到后台的网络钓鱼页面之前添加延迟，可以使此攻击更加微妙。