打开浏览器标签页的方法和可能遇到的问题

本文参考如下文章:
https://mp.weixin.qq.com/s/T4jQUdS-rar7hr2EWilJrw
https://paper.seebug.org/
https://www.pixelstech.net/article/1537002042-The-danger-of-target=_blank-and-opener
https://www.tutorialdocs.com/article/html-opener-blank.html

1.起因

我在查看chrome的new features,忽然看到了如下的一个Chrome 89 上面的一个feature
https://www.chromestatus.com/features/schedule
在这里插入图片描述
这个feature会给不谙世事的开发者带来一些困惑,例如下图的sessionStorage丢失问题
在这里插入图片描述

2.什么是window.opener

在深入了解之前,你要了解这个对象window.opener

window.opener本质上提供了一种跨越标签访问的能力,或者说操控另一个标签页。

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/opener
返回打开当前窗口的那个窗口的引用,例如:在window A中打开了window B,B.opener 返回 A.

如果没有这个对象,那么一些问题就不存在了,但是有时候我们需要使用opener进行一些操作。

3.The danger of target=_blank and opener(危险的 target="_blank" 与 “opener”)

加入我们要新打开一个标签页,我们可以使用如下方法
window.open()
target="_blank"
不幸的是,这两种方法,在老版本的浏览器上都会把window.opener传递过去。

4.如何防范opener攻击

a标签上面添加noopener
在这里插入图片描述

5.opener的利用

网页标签页的操纵
比如说你在A标签页打开了B标签页,那么你在B标签页执行一些脚本,可以影响到A标签页,就像变魔术一样有趣。

6.思考

其实我们眼睛所能看到的只是一小部门,就像冰上一样,水下的部分更大。
在这里插入图片描述

百度结果页点击链接之后都发生了什么?

在这里插入图片描述
在这里插入图片描述


人类本质是复读机,甚至公司也是,a公司对接支付宝和微信,b公司也要对接,从产品到开发再到测试,重复着重复。


You make the world better, the world makes us better!

猜你喜欢

转载自blog.csdn.net/lineuman/article/details/115333578
今日推荐