聊聊 rel=noopener

CollinPeng 发布于2019-08-01 17:02 / 2139人阅读

摘要：同步自我的博客最近梳理团队时，在的配置中发现了这么一项官方文档的介绍大概是这样的如果你需要用标签打开一个标签页时，你会使用这个属性，此时你需要添加这就让人很迷惑了，这俩属性是干什么的呢，一下方才知道，它是为了解决安全问题。

同步自我的博客

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

"react/jsx-no-target-blank": 2

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

如果你需要用 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 来完成这个功能

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

参考文档
https://html.spec.whatwg.org/...
https://mathiasbynens.github....

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50909.html

你不曾察觉的隐患：危险的 target="_blank" 与 “opener”

摘要：恶意网站根据来伪造一个足以欺骗用户的页面，并展示出来期间还可以做一次跳转，使得浏览器的地址栏更具有迷惑性。而如果在链接中加入了，则此时两个标签页将会互不干扰，使得原页面的性能不会受到新页面的影响。在网页中使用链接时，如果想要让浏览器自动在新的标签页打开指定的地址，通常的做法就是在 a 标签上添加 target等于_blank 属性。然而，就是这个属性，为钓鱼攻击者带来了可乘之机。 s...

venmos 2019-08-02 16:05 评论0 收藏0
你不曾察觉的隐患：危险的 target="_blank" 与 “opener”

摘要：恶意网站根据来伪造一个足以欺骗用户的页面，并展示出来期间还可以做一次跳转，使得浏览器的地址栏更具有迷惑性。而如果在链接中加入了，则此时两个标签页将会互不干扰，使得原页面的性能不会受到新页面的影响。在网页中使用链接时，如果想要让浏览器自动在新的标签页打开指定的地址，通常的做法就是在 a 标签上添加 target等于_blank 属性。然而，就是这个属性，为钓鱼攻击者带来了可乘之机。 s...

EsgynChina 2019-08-23 12:00 评论0 收藏0
你不曾察觉的隐患：危险的 target="_blank" 与 “opener”

摘要：恶意网站根据来伪造一个足以欺骗用户的页面，并展示出来期间还可以做一次跳转，使得浏览器的地址栏更具有迷惑性。而如果在链接中加入了，则此时两个标签页将会互不干扰，使得原页面的性能不会受到新页面的影响。在网页中使用链接时，如果想要让浏览器自动在新的标签页打开指定的地址，通常的做法就是在 a 标签上添加 target等于_blank 属性。然而，就是这个属性，为钓鱼攻击者带来了可乘之机。 s...

jackwang 2019-06-21 16:49 评论0 收藏0
Security risk for opening new tabs or windows

Background Today eslint reports an error when I introduce eslint-plugin-react error Using target=_blank without rel=noopener noreferrer is a security risk: see https://mathiasbynens.github.io/rel-noo...

lanffy 2019-06-21 16:47 评论0 收藏0
使用<a>标签时，你可能会忽略的一个安全问题

摘要：当一个外部链接使用了的方式，这个外部链接会打开一个新的浏览器。此时，新页面会打开，并且和原始页面占用同一个进程。笔者的总结这是一篇很短的文章，主要介绍了在使用标签打开一个新窗口过程中的安全问题。本文首发于公众号: 符合预期的CoyPan本文章翻译于：https://medium.com/front-end-weekly/prevent-sending-http-referer-hea...

rozbo 2019-08-02 14:05 评论0 收藏0