聊聊a标签的rel属性

回到原文章

## 前言

在掘金上分享了一篇文章,发现链接的地址直接是自己的分享链接,就想看看是否启用了 `rel="nofllow"`,然而发现掘金使用了 `rel="nofollow noopener noreferrer"`,对 `rel` 不是很了解的我,开始了搜索之路。

##探索

看到的第一篇文章是《[聊聊rel=external nofollow和rel=noopener noreferrer](http://www.lucktribe.com/0448x1701t1107.html)》,看的一知半解,初步了解了 `rel` 的一些属性的含义。

###rel="nofllow"

它告诉搜索引擎,不要将该链接计入权重。因此大多数外部链接都可以加上 `rel="nofllow"`。 

###rel="nofollow noopener noreferrer"

> **摘录**
>
> 超链接 `target="_blank"` 要增加 `rel="nofollow noopener noreferrer"` 来堵住钓鱼安全漏洞。如果你在链接上使用 `target="_blank"` 属性,并且不加上 `rel="noopener"` 属性,那么你就让用户暴露在一个非常简单的钓鱼攻击之下。

看到 `noopener` 和 `noreferrer`,顿时一脸懵逼,这是什么。

这时,看到了一篇新文章《[使用rel=noopener](https://my.oschina.net/dawd/blog/816023)》写的很好,分析的也很透彻。我了解到,若 `target="_blank"` 没有和 `rel="nofollow noopener noreferrer"` 配合使用,目标页面会拿到当前页的 `window` 对象,并进行操作。

举个栗子:[demo](http://keenwon.com/demo/201603/noopener.html)。*Tips:栗子来源[使用rel="noopener"](http://keenwon.com/1548.html)。*

```html
<!-- 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>
```

```html
<!-- 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](http://www.lucktribe.com/0448x1701t1107.html)
2. [使用rel=noopener](https://my.oschina.net/dawd/blog/816023)
3. [使用rel=noopener](http://keenwon.com/1548.html)

-- EOF --
本文转载自[IMJCW](http://jcwblog.com)
原文链接:[聊聊a标签的rel属性](http://jcwblog.com/articles/frontend/a-rel-explore.html)