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 不受影响。可以有效的防止跳转的子页面操作父页面跳转网络钓鱼攻击,垃圾邮件发送者劫持您的网页。

分享此页面

Comments