共计 3448 个字符，预计需要花费 9 分钟才能阅读完成。
这篇文章介绍了 rel=”noopener noreferrer nofollow” 的用法，安全性和对 SEO（search engine option）的影响，点击查看原文。
如果你参与到 web 开发，或者 SEO 相关的工作，你大概已经知道了有 noopener，noreferrer 和 nofollow 这三个属性值，但是这三个属性值是什么，在这篇文章中，我们将会对他们一一介绍，并指出他们在 SEO 和 web 安全方面的影响。
简介
这三个属性值，是 a 标签的 rel 的 attribute，可以说，在 web 开发者和 SEO 专家中，nofollow 是最广为人知的。
<a href="https://www.pointjupiter.com">
Click here to visit the Point Jupiter website.
<a>在上面的代码中，你可以看到 a 标签有个 href 属性，秉着这个属性的地址指向了 pointjupiter 的首页，中间的文本就是展示给用户的，由于设置的 CSS 和浏览器不同，这段文本最终的展示效果也不同。
A 标签有很多不同的属性（attributes），rel（rel 是 RELationship，用于说明当前页面和目标链接之间的关系）就是其中一个。这篇文章的主题就是介绍 rel 属性的三个属性值 noopener, noreferrer, nofollow。
<a href="https://www.pointjupiter.com"
rel="noopener noreferrer nofollow"
target="_blank">Click here to visit Point Jupiter website.
</a>你应该已经注意到上面代码 a 标签 rel 属性以及属性值，并且还有一个 target="_blank" 属性，这个主要是用来设置新开 tab 页打开 a 标签的目标网站。
target="_blank"就是设置 rel 属性的主要原因，同样也是引起网站潜在风险和钓鱼网站的根本原因。
让我们详细的讨论下他们的细节，对 SEO 的重要性，安全性，什么场景下需要添加这些属性。
noopener
当你使用 target="_blank" 时，会发生一些有趣的事情。你通过 A 页面跳转过去到 B 页面，B 页面可以通过一些方法访问到 A 页面信息。比如window.opener。（A,B 页面主要是为了方便描述，并无其他含义）。
然后，B 页面可以通过 window.opener.location 来让原本的 A 页面打开恶意网站。window.opener.location
这样就可以实现网络钓鱼攻击，考虑以下场景：
你创建了一个恶意网站 C，并在里面设置了些恶意代码，然后将这个网站通过社交网络或者其他方式分享出去，让其他人通过 target="_blank" 的形式打开，Facebook 就是个典型的例子。不明所以的用户在 Facebook 页面点击了这个链接，浏览器在新的 tab 页打开了这个页面，并在同时，你的恶意网站 C，就可以通过 window.opener.location 来控制 Facebook 页面所在的 tab，跳转到了一个新网站，让后这个网站让告诉用户，你的登录信息已经过期，需要重新登录。这个时候，用户并不知道自己的网站已经不是真正的 Facebook，然后开始输入账户信息，提交。。。
更多细节
使用 noopener 属性值，就是明确的告诉浏览器，新的 tab 打开目标网站 B，但是不能提供给 B 网站控制 A 的权限。最终的结果就是在 B 网站 window.opener 返回的结果是个 null。
综上所述，rel="noopener"属性，并不会影响 SEO，但是当你在使用 target="_blank" 跳转到外部网站的时候（非可控，自己公司的网站，倒是没必要添加这个属性），还是需要添加这个属性。
noreferrer
和 nofollow 类似，noreferrer同样可以限制新开的 B 网站，操作 window.opener 对象。另外，在页面跳转的时候，noreferrer 会限制浏览器将 referring 网站信息传递给 B 网站。
简单来说，noreferrer在点击链接的手，会隐藏 referrer 信息。举个🌰，当别人把你的网站地址放到他们的网站 A 中，并且设置了 noreferrer，那么当用户点击这个链接的手，你是不能够看到这个链接是从哪个网站过来的，在你的数据分析平台，这可能就划分为直接流量，而不是引流过来的。
同样，noreferrer也不会对 SEO 产生什么影响，但是会多上报一些直接流量，从而影响到你的数据分析和软件追踪。
所以，noreferrer和 noreferrer 到底该什么时候用？我建议你考虑两者都用。现在主流的浏览器都支持 noopener，但是在某些场景下，如果浏览器不支持noopener，就可以用noreferrer 代替。
这意味着，在某些场景下，为了能够兼容旧版本的浏览器，最好是两个一起使用。但是最好的方式就是避免使用target="_blank"，除非你有必须要使用的场景。（个人观点：这点可能国内和国外有些使用上的差别，国外好些网站是直接在当前页面打开的，比如 GitHub、stackoverflow 等，国内的网站大部分都是新开页面，个人也比较习惯新开，毕竟自己翻了几页找见的内容，点了下链接，就把当前页面刷新了，等下回来也挺麻烦。）。
nofollow
很多高质量和高价值（？）的网站链接到你的网站，对于 SEO 是相当重要的。这种叫做反向链接（backlinks，知道这么翻译是不是合适）。但是并不是所有的链接都是有一样的效果。
通常一个网站 B 链接到你的网站 A，这将会影响链接权重（link juice），意思就是，搜索引擎将会认为你的网站 A 有更好的信誉。本质上来讲，你可以把他当做是一种宣传。如果有一个权威的网站，链接到了你的网站，这是在为你的网站背书，搜索引擎将会把这个作为排名的参考，Google 会参照网站排名来衡量网站的质量。
然而有些时候，你并不想设置链接权重相关的内容。比如，你不想将重要 / 有价值的网站的链接权重，传递给一般或者不重要的网站。
在 a 标签上设置rel="nofollow"，设置了这个属性，就是告诉浏览器，不要将自身网站的链接权重（link juice）/ 排名传递到你链接的网站上。
<a href="https://www.pointjupiter.com"
rel="noopener noreferrer nofollow"
target="_blank">Click here to visit Point Jupiter website.
</a>
何时用 nofollow
通常是在论坛或者评论中设置。用户输入的内容可能包含一些垃圾或者低质量的链接内容，你并不想把你的博客或者论坛网站的链接权重（link juice）/ 排名传递给那些链接内容上。
同时，Google 和其他的搜索引擎，也要求你在赞助商链接和广告链接上使用这个属性，新闻中的链接和其他的付费链接也是如此。
noopener, noreferrer, nofollow 相关
有时你会看到有些人提到 noopener，noreferrer 标签，其他场景下，你会见到 rel noreferrer 属性，尽管很多开发者可以理解这些内容，但是还有以下几点需要注意。
- noopener, noreferrer, nofollow 是属性值，并没有对应的标签或者属性。
- rel 也不是标签，是个属性名。
<a></a>是个 HTML 标签，因此它有一些属性（比如 rel,href 等）。
总结
本文主要讲了 a 标签 rel 属性的三个属性值，noopener, noreferrer, nofollow。
- rel=”noopener”，可以在所有，需要新开 tab(
target=_blank) 的链接上使用，避免不必要的安全隐患。如果不设置，恶意网站可以通过 window.opener 来改变原本网站的内容和链接。 - rel=”noreferrer”，和 noopener 有类似的功能，兼容性略好，两者一起使用更佳。另外，noreferrer 会影响到数据分析，将浏览计算为直接浏览，而不是引流过来的。
- rel=”nofollow”，会影响搜索引擎传递链接权重（link juice）和网站排名。你可以在链接到非自己的网站的时候，添加这个属性值。这是他们三个中，唯一一个会对 SEO 产生影响的值。
