今天我们来做一个简单的实验，新建两个 HTML 页面
page1.html
<a href="page2.html" target="_blank">页面2</a>page2.html
<html>
<body>
<script>
window.opener.location = 'https://www.bing.com'
</script>
</body>
</html>我们访问 page1.html，然后点击链接，打开 page2，你会惊奇地发现 page1 跳转到了 bing。这是什么骚操作？一个新链接的页面居然能够控制原页面。
当然，这完全归结于 window.opener，它可以拿到打开当前窗口的那个窗口的引用，更可怕的是，上面的操作在跨域下也是被允许的的。当你从自己的页面链接到其它域的页面时，发现自己的页面窗口也被重置到一个很可能有恶意的地址。
除了引发安全问题，在部分浏览器下，如果被打开页面性能开销很大，那么也会直接影响到原来页面的运行，主要原因是，这两个窗口可能运行在同一个进程中，势必会相互影响。
所以，处理 window.opener 是我们需要解决的问题，要达到的目标就是让链接页面拿不到 window.opener。由于是通过 <a> 标签做的链接，所以只需要加一个属性 rel="noopener" 即可，这会让目标窗口的 window.opener 变成 null
<a href="page2.html" rel="noopener" target="_blank">页面2</a>由于历史原因，还有另外一个 rel 值和 noopener 有关系，那就是 noreferrer，作用是阻止链接传递 referrer 值给目标页面，很多文章没有说清楚的是，实际上下面两种写法是一样的效果
<a rel="noreferrer" href='xxx' target="_blank">...</a>等价于
<a rel="noreferrer noopener" href='xxx' target="_blank">...</a>至于为什么呢？官方也没有说清楚，就说了是历史原因。这样看来，noreferrer 包含了 noopener 的功能，不过通常是两者一起用。
实际上 noreferrer 对目标网站的统计会产生影响，用过网站统计功能的同学会知道，网站访问分为直接访问和外部链接，本身通过 <a> 标签链接过来的都会显示原网站的地址，但是加了 noreferrer 后就变成直接访问了，所以是没办法准确统计访问来源的。
接下来介绍第三个 rel 值 nofollow，从名字可以看出，就是让别跟随链接，那又是在对谁说呢？答案是：搜索引擎。当我们做一些外链的时候，由于无法信任外部链接的质量和安全性，会加上这个属性值，就是告诉搜索引擎到此为止，别再去爬目标外链了，这样有利于保护本站的 SEO 权重值，避免了外部的影响。
当然，上面说了这么多都是针对 target=_"blank" 的外部链接，自己网站的内部链接是不推荐加的，毕竟没理由去防自己，目前很多网站对于外链的做法就是这 3 个 rel 值都加上：
<a rel="nofollow noreferrer noopener" href="xxx" target="_blank">..</a>但并非所有情况都推荐这样做，比如友情链接这种，我就想对方知道是从我这链接过去的，要是加个 noreferrer 就适得其反了。
再比如一些文章转载，原文链接是不推荐加上 nofollow 的，曾经有很多人明确谴责了这种做法，既然你转载了我的文章，还断我的 SEO，从道德层面来说是不对的。
除了直接外链，其实还有一些网站会做一个跳板，比如知乎，它有一个 link.zhihu.com，所有外部链接都会经过这，避免了直接外链，只存在内部链接。不过它还是给这个跳板链接加了 nofollow 和 noreferrer。这也导致了所有来自知乎的访问统计只会标识来源为 link.zhihu.com，具体来自哪个页面是看不到的。
最新评论