ColaDaddyz
最近梳理团队 eslint 时，在 airbnb 的配置中发现了这么一项 ``` 'react/jsx-no-target-blank': 2 ``` 官方文档的介绍大概是这样的 如果你需要用 a 标签打开一个标签页时，你会使用 target='_blank' 这个属性，此时你需要添加 rel='noreferrer noopener' 这就让人很迷惑了，这俩属性是干什么的呢，google 一下方才知道，它是为了解决安全问题。 当你使用 `target='_blank'` 打开一个新的标签页时，新页面的 `window` 对象上有一个属性 `opener`，它指向的是前一个页面的 `window` 对象，因此，后一个页面就获得了前一个页面的控制权，so 可怕！！ 比如的 a 标签是这样 `<a href='/index'>打开连接</a>` ，打开后在控制台输入 `window.opener.alert(1)` 看看？ 甚至在跨域的情况下他也可以生效，比如打开 `<a href='https://github.com/ZhangFe/Blog'>链接<a/>`后，你可以使用 `window.opener.location.replace` 更改前一个页面的 url。 那么，为了避免这种情况，就需要咱们的主角登场了！ 比如你的链接现在变成了这样 `<a href='/index' rel=noopener>链接<a/> `，再打开后你会发现 `window.opener` 已经被置为了 null，如果是一些旧的浏览器，可以使用 `rel=noreferrer`，它不仅禁用了 `window.opener`，后一个页面也无法获取到 `referrer`，再不行，可以利用 js 来打开新的页面，之后将 `opener` 置为 `null` 来完成这个功能 ``` var otherWindow = window.open(); otherWindow.opener = null; otherWindow.location = url; ``` 参考文档 https://html.spec.whatwg.org/multipage/links.html#link-type-noopener https://mathiasbynens.github.io/rel-noopener/#hax