聊聊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" 属性,那么你就让用户暴露在一个非常简单的钓鱼攻击之下。

看到 noopenernoreferrer,顿时一脸懵逼,这是什么。

这时,看到了一篇新文章《使用rel=noopener》写的很好,分析的也很透彻。我了解到,若 target="_blank" 没有和 rel="nofollow noopener noreferrer" 配合使用,目标页面会拿到当前页的 window 对象,并进行操作。

举个栗子:demoTips:栗子来源使用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 --

# HTML

发表于 2017-10-15 。 已被累计阅读「172」次。查看 Markdown 版本

本文标题:聊聊a标签的rel属性

本文链接:http://jcwblog.com/articles/frontend/a-rel-explore.html

本站使用「 署名-非商业性使用 4.0 国际 (CC BY-NC 4.0) 」创作共享协议,转载或使用请署名并注明出处。