码迷,mamicode.com
首页 > 其他好文 > 详细

聊聊 rel=noopener

时间:2020-01-21 19:50:28      阅读:57      评论:0      收藏:0      [点我收藏+]

标签:更改   cat   禁用   标签   hat   zhang   输入   code   irb   

同步自我的博客

最近梳理团队 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/...
https://mathiasbynens.github....

聊聊 rel=noopener

标签:更改   cat   禁用   标签   hat   zhang   输入   code   irb   

原文地址:https://www.cnblogs.com/10yearsmanong/p/12222786.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!