务必给网站外链添加 noopener 属性，确保网站的安全性

发布于

前段时间写 React 代码的时候，eslint 总是会在报一个下面的错。

eslint 写 react 代码报错 react/jsx-no-target-blank

这种 a 链接的代码在 Html 里面写了这么多年都一直没有问题的，怎么在 React 里面总是不符合要求，于是我扒了一下前因后果。

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-target-blank.md

看 Eslint 这个规范文档里面说了，当使用 target="_blank" 属性来标记一个打开新标签页的 a 链接时，如果不带 rel="noreferrer noopener" 会是一个严重的安全漏洞。

在 https://mathiasbynens.github.io/rel-noopener/ 这个页面里，当你点击第一个链接（Click me!!1 same-origin），会打开一个新的页面，新的页面没有任何异常，但是当你重新回到当前这个页面时，你会发现这个页面的顶部变了！

原页面已经被 hacked

这是由于这个链接没有带 noopener 属性，从而当打开一个新的页面时，这个新的页面拥有了当前这个页面的 document 对象完整控制权。

看一下新打开页面的源代码：

代码语言：javascript
复制
 <script>
   if (window.opener) {
     opener.location = 'https://mathiasbynens.github.io/rel-noopener/#hax';
     // Just `opener.location.hash = '#hax'` only works on the same origin.
   } else {
     document.querySelector('h1').innerHTML = 'The previous tab is safe and intact. <code>window.opener</code> was <code>null</code>; mischief <em>not</em> managed!';
   }
 </script>

很简单的一段代码，但是却可以做很多事情。

举个例子：

假设在淘宝网上有一个 B网站链接没有带 noopener，当你打开了 B 网站的时候，B 检测到你没有添加 window.opener 的时候，我就把你网站重定向到一个高仿的淘宝网站。

当你从 B 网站回到前面的淘宝网站时，你可能并不会注意这个时候已经是一个假淘宝网了。然后让你输入用户名密码进行登录等等操作。这个时候你的淘宝账号就泄露了。

其实这个就是网络钓鱼的过程。

所以，当你的网站里面有外链的时候，都应该在连接上加上 noopener 这个属性。当我们在开发网站的时候，务必要给每个新也页面打开的链接都加上 noopener 属性。

关于 noopener 的常见问题（FAQ）：

noopener 是否会对网站 SEO 有影响？

没有影响，openner 属性是一个解决安全问题的属性，没有任何 SEO 方面的影响。

noopener 是否会对 Affiliate 链接有影响？

没有影响，这篇文章说的比较详细。

noopener 是否一定要添加？

当你的网站没有外链或者链接出去的网站是你信任的网站时，可以不添加。其他 target="_blank" 的情况建议都添加。而且，wordpress 现在也是默认添加的。

#网站#seo#github#eslint#react