聊聊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 属性。

结语

细节决定成败，本以为没问题却成了一个大问题。

参考文献

1. 聊聊rel=external nofollow和rel=noopener noreferrer
2. 使用rel=noopener
3. 使用rel=noopener

-- EOF --
本文转载自IMJCW
原文链接：聊聊a标签的rel属性