聊聊新窗口打开页面的opener问题

1.新窗口中打开页面的方式：

//a 链接
<a target="_blank" />//opener
window.open()

2.新窗口中打开页面会有两方面的问题：安全问题，性能问题；

2.1安全问题：

上面新窗口中打开页面的方式都会在新窗口中找到一个opener的对象。

那什么是opener（MDN:）,简单来说，它是父窗口的窗口对象。如果新窗口和服窗口同域的情况下，可以直接拿到这个对象，不同域的情况下，浏览器是会禁止访问这个对象的。但是！！！还是可以通过window.opener.location=newurl的方式来重写父页面的url，这样当再次来到父窗口时，用户一般不会发现当前的父窗口已经改变，还会以为是原来的url页面，如果再次去输入用户名密码什么的，就会被非法盗窃，而用户又察觉不到。这就是安全问题。

2.2性能问题：

一般来说，chrome的每一个窗口就是一个单独的进程，一个进程包含多个线程。

然而通过a标签的target="_blank"属性或者window.open打开的心窗口会与父窗口共用进程和线程。

那这个原因是为什么呢？

因为opener里面有DOM信息。两个进程中同时hold住了DOM信息，在多线程下去合理控制DOM比较难，于是就放在了一个进程里。目前这样的问题chrome和firefox都存在。

3.解决方式：

在a标签上添加这个noopener属性，在新打开窗口的opner置为空


<a  rel='noopener'/>// es6
let newWindow= window.open();
newWindow.opener = null;

聊聊新窗口打开页面的opener问题相关推荐

router-link 返回上页和新窗口打开链接
1.如果使用了Vue-router的话,就可以用 this.$router.go(-1) 实现返回: 2.如果没使用vue-router,就可以用 window.history.go(-1) 实现返回 ...
html超链接怎么新建窗口打开,html超链接新窗口打开怎么写
扩展回答谁知道超链接新窗口打开的技巧有哪些打开网页文件,在a里添加="new". 2.在IE里测试效果. 3.点击链接,新打开窗口加载网页内容览器总在一个新打开.未命名的窗口中 ...
图解 wp WordPress 文章链接在新窗口打开
wp WordPress 文章链接在新窗口打开因为wp默认是不在新窗口打开链接的,这对于我们这样习惯关窗口的人,用起来很不方便.其实改起来很简单,下面开始一.打开外观,选择编辑二.打开主题页 ...
php新窗口打开链接,wordpress如何设置在新窗口打开链接
WordPress里面几乎所有的链接都是默认在当前窗口打开,无论是站外链接还是站内链接.这样的设定无忧主机小编觉得很不合理.试想:在博客网页上看到一个感兴趣的链接,点击之后就离开你的博客了,想要返回还 ...
新窗口打开html页面,网页是选择新窗口打开还是原窗口打开？
我本人挺喜欢原窗口打开的,如果需要打开新窗口一般是ctrl+鼠标左键,原本以为这个快捷键大家都会用呢,不过这一看法在上周改变.如果你还在纠结,可以看看本文. (主流浏览器都默认ctrl+点击=开新窗口 ...
vue-router 设置路由在新窗口打开页面
一. <router-link>标签实现新窗口打开: 官方文档中说 v-link 指令被 <router-link> 组件指令替代,且 <router-link> ...
vue-router 如何在新窗口打开页面
1. <router-link>标签实现新窗口打开: 官方文档中说 v-link 指令被 <router-link> 组件指令替代,且 <router-link> ...
js jquery新窗口打开的几种方式
js jquery新窗口打开的几种方式第一种:创建一个form表单,通过表单提交来实现新标签页打开. var form = document.createElement('form'); form. ...
点击链接新窗口打开页面
列表页面,要是没有内页得话,就新窗口打开一个页面,-------要是有的话在点击列表页得就覆盖打开的窗口页面使用的标签是 target="_block" 要是想一直打开在新窗 ...

聊聊新窗口打开页面的opener问题

聊聊新窗口打开页面的opener问题相关推荐

最新文章

热门文章