平时微信都会关注一些相关的前端公众号什么的，无聊的时候，不仅可以打发时间，还能稍稍学点儿东西，我认为大多人都会有这些习惯吧！ 今天上班路上，随便打开手机看了下订阅号，突然看到了一个标题，一下吸引了我的注意力！

上面写的 外链 用 target="_blank" 结果悲剧了？？？？？ 我在想，不就一个 a 标签跳转页面，能有什么悲剧呢？？ 今天之前，如果跳转页面，并在新的窗口打开，我第一个想到的肯定是 a 标签，当然也知道 window.open 也可以打开新的页面，但是那不是需要多写一个点击事件嘛，所以，还是直接使用 a 标签 搞定的

如果你需要用 a 标签打开一个标签页时，你会使用target='_blank'这个属性，此时你需要添加 rel='noreferrer noopener'

这就让人很迷惑了，这俩属性是干什么的呢，google 一下方才知道，它是为了解决安全问题。

当你使用** target=’_blank’ **打开一个新的标签页时，新页面的 window 对象上有一个属性 opener，它指向的是前一个页面的 window 对象，因此，后一个页面就获得了前一个页面的控制权，so 可怕！！

比如的 a 标签是这样

打开新的连接

打开后在控制台输入 window.opener.alert(1)看看？

甚至在跨域的情况下他也可以生效，比如打开

博客链接后，你可以使用

window.opener.location.replace更改前一个页面的 url。

那么，为了避免这种情况，就需要咱们的主角登场了！

比如你的链接现在变成了这样链接，

再打开后你会发现 window.opener已经被置为了 null，

如果是一些旧的浏览器，可以使用rel=noreferrer，

它不仅禁用了window.opener，

后一个页面也无法获取到referrer，

再不行，可以利用 js 来打开新的页面，之后将 opener置为null来完成这个功能