聊聊 rel=noopener

时间 2019-12-01

标签聊聊 rel noopener 繁體版

原文原文链接

最近梳理团队 eslint 时，在 airbnb 的配置中发现了这么一项html

'react/jsx-no-target-blank': 2复制代码

官方文档的介绍大概是这样的react

若是你须要用 a 标签打开一个标签页时，你会使用 target='_blank' 这个属性，此时你须要添加 rel='noreferrer noopener'复制代码

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

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

好比的 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 来完成这个功能oop

var otherWindow = window.open();
otherWindow.opener = null;
otherWindow.location = url;复制代码

参考文档
html.spec.whatwg.org/multipage/l…
mathiasbynens.github.io/rel-noopene…google