聊聊a标签的rel属性
前言
在掘金上分享了一篇文章，发现链接的地址直接是自己的分享链接，就想看看是否启用了 rel="nofllow"，然而发现掘金使用了 rel="nofollow noopener noreferrer"，对 rel 不是很了解的我，开始了搜索之路。
探索
看到的第一篇文章是《聊聊rel=external nofollow和rel=noopener noreferrer》，看的一知半解，初步了解了 rel 的一些属性的含义。
rel="nofllow"
它告诉搜索引擎，不要将该链接计入权重。因此大多数外部链接都可以加上 rel="nofllow"。
rel="nofollow noopener noreferrer"
摘录
超链接
target="_blank"要增加rel="nofollow noopener noreferrer"来堵住钓鱼安全漏洞。如果你在链接上使用target="_blank"属性，并且不加上rel="noopener"属性，那么你就让用户暴露在一个非常简单的钓鱼攻击之下。
看到 noopener 和 noreferrer，顿时一脸懵逼，这是什么。
这时，看到了一篇新文章《使用rel=noopener》写的很好，分析的也很透彻。我了解到，若 target="_blank" 没有和 rel="nofollow noopener noreferrer" 配合使用，目标页面会拿到当前页的 window 对象，并进行操作。
举个栗子：demo。Tips：栗子来源使用rel="noopener"。
<!-- http://keenwon.com/demo/201603/noopener.html -->
<a href="http://keenwon.com/demo/201603/noopener2.html" target="_blank">没有rel=noopener</a>
<a href="http://keenwon.com/demo/201603/noopener2.html" target="_blank" rel="noopener">有rel=noopener</a>
<!-- http://keenwon.com/demo/201603/noopener2.html -->
<script>
if (window.opener) {
opener.location = 'http://baidu.com'
} else {
document.querySelector('h1').innerHTML = '刚才的页面是安全的，window.opener为空。';
}
</script>
两个的区别在于：在 chrome 49+、Opera 36+，打开添加了 rel="noopener" 的链接，window.opener 会为 null。在老的浏览器中，可以使用 rel="noreferrer" 禁用 HTTP 头部的 Referer 属性。
结语
细节决定成败，本以为没问题却成了一个大问题。
参考文献
-- EOF --
本文转载自IMJCW
原文链接：聊聊a标签的rel属性
