window.opener的安全漏洞和rel=noopener标签的使用

最近我更新了我的网站代码，给友情链接和外部链接增加了rel=noopener标签，所以今天就讨论一下为什么要使用rel=noopener标签，其实这个是一个安全漏洞，JavaScript提供了window.opener来获取创建该窗口的 Window 对象，那么问题就来了，我们一点一点说。

关于window.opener

window.opener 属性是一个可读可写的属性，可返回对创建该窗口的 Window 对象的引用。例如： window.opener.close()将关闭源（父）窗口。但a链接需要有 target="_blank"才会有这个问题。

window.opener的安全风险讨论

我们知道通过window.opener可以获得创建该窗口的 Window 对象，那么可以做的事情就比较多了。Web 应用的安全性，很大程度上是由同源策略（Same Origin Policy，SOP）保证的。但是，在子页面访问 window.opener.location 的一些属性和方法时却不受 SOP 保护，这就是漏洞的核心所在。

案例：假设父页面中有新窗口打开的子页面链接：

<a href="https://www.renfei.net/demo.html" target="_blank">demo</a>

在https://www.renfei.net/demo.html中有这样一段代码：

<script>
    window.opener.location = 'https://www.google.com/posts';
    //window.opener.location.replace('https://www.google.com/posts');
</script>

在大部分浏览器中，通过父页面中的链接打开子页面后，子页面都可以通过 window.opener.location 将父页面跳走（上面两行 JS 可以都可以跳转，不同之处是 replace 不产生历史纪录）。

加入用户填写的链接或者友情链接站点被黑，跳转的子页面中包含了这类代码，就可以操控父页面，而且域名不相同都可以操作，例如跳转到钓鱼页面、恶意挂马页面等等。这个现象，很早之前就被人发现并利用在黑帽 SEO 上。

rel=noopener标签

为了解决上述window.opener造成的安全漏洞，引入了一个新属性：rel=noopener, Ensure new browsing contexts are opened without a useful window.opener。当给 A 链接加上这个属性，打开的新页面再也无法通过 window.opener 获取父页面，同时 Referer 不受影响。可以有效的防止跳转的子页面操作父页面跳转网络钓鱼攻击，垃圾邮件发送者劫持您的网页。