谈谈 a 标签 target='_blank' 跳转外部链接的问题

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

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

那接下来就谈谈，target='_blank'这个属性吧！

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

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

noopener window.opener 属性置空( null )

至于 noreferrer 属性则是为了兼容旧版本的浏览器，功能是一样的。

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

比如的 a 标签是这样

<a href='/index'>打开新的连接</a>

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

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

<a href='https://blog.csdn.net/weixin_44369568'>博客链接<a/>后，你可以使用

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

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

比如你的链接现在变成了这样<a href='/index' rel=noopener>链接<a/>，

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

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

它不仅禁用了window.opener，

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

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

• 1、

var otherWindow = window.open();
otherWindow.opener = null;
otherWindow.location = url;

• 2、

var yourWindow = window.open();
yourWindow.opener = null;
yourWindow.location = "http://someurl.here";
yourWindow.target = "_blank";