聊聊新窗口打开页面的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;