超链接的noopener、noreferrer以及nofollow属性

项目中有条eslint规则 react/jsx-no-target-blank，当代码中有超链接且是新页打开的情况下，如果你没有加上 rel="noopener noreferrer" 时，就会出现下面的报错：

Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener

之前一直没去思考过为啥要这样，最近刚好看到一篇文章，对这个的理解清晰了些。

一、noopener

这个属性是为了防止钓鱼，如果你有一个新开页打开的外部链接并且没有加上rel="noopener"的话，那么新开的那个页面就有了上一个页面的权限，它可以通过 window.opener.location.href="看起来跟原网站相同的假的网站地址"，由此一来，就可以将原先的页面弄成假的登录页面让你登录，从而拿到你的信息。

那么加上rel="noopener"之后会发生什么呢，新开页的window.opener就会被设置成null，他们也没有了控制上一个页面的权限

二、noreferrer

它和noopener差不多的功能，不同的点在于一些老的浏览器可能不支持noopener，所以经常是看到 noopener和noreferrer同时出现。

一个没加noreferrer的新开页链接，在新页面可通过document.referrer拿到上一个页面的信息

三、nofollow

这个属性比较少用，是因为看了上面提到的那个文章才知道这个跟seo有关。有些网站底部会有友情链接，一般来说都是你信任的网站，所以才会愿意将这些网站添加到你的网站底部，然而当你不是很信任某些网站或者你在你的大网站里面添加了小网站链接时，那么就可以加上这个属性。