前端安全之target="_blank"

关于前端安全问题，一直关注的比较少。从target="_blank"开始！

如果你开启了eslint校验，如下的写法：

<a
  target="_blank"
  href={`https://work.alibaba-inc.com/nwpipe/search?keywords=${item.nickName}&type=person`}
>XXXX
</a>

那就会得到以下的错误提示：

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

而且提示这是一个很严重的安全漏洞。

真是让人烦恼，解决方法很 easy呀，加上

rel="noopener noreferrer"

Buuuuuutttttttttt，why？

参考原文：

https://mathiasbynens.github.io/rel-noopener/

关于rel = noopener

它解决了什么问题呢？

当你正在浏览index.html

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

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

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

这意味着一旦用户点击了链接，malicious.html就可以对文档的wind