使用 rel=noopener

最近看到一篇文章，又涨知识了，以前还真没想到 opener 能这么玩。简单介绍下：

解决什么问题#

假设你当前在浏览一个页面，上面有个链接（可能是用户输入的）：

<a target="_blank" href="">点击</a>

在新打开的标签页通过 window.oponer ，可以获得当前页面的 window 。这样的话，http://keenwon.com （被打开的页面）将获得当前页面的部分控制权，即使新打开的页面是跨域的也照样可以（例如 location 就不存在跨域问题）。

大家试试这个 demo，demo 只是跳到了百度首页，但是如果跳到了钓鱼网站呢？直接提示用户登录，而此时用户注意力集中在新开标签页里，很可能不会注意到原页面在后台的变化。

rel=noopener 新特性#

在 chrome 49+，Opera 36+，打开添加了 rel=noopener 的链接，window.opener 会为 null。在老的浏览器中，可以使用 rel=noreferrer 禁用 HTTP 头部的 Referer 属性，使用下面 JavaScript 代替 target='_blank' 的解决此问题：

var otherWindow = window.open('http://keenwon.com')
otherWindow.opener = null
otherWindow.location = url

使用 window.open 打开页面，手动将 opener 设置为 null。