2022年8月11日

新开窗口的那些事：拦截、安全、target

前端开发经常会遇到需要新开窗口的需求，而某些时候，新窗口的地址需要通过接口返回，经常就会遇到新开窗口被拦截的情况，这里说一下新开窗口的几种方式、被拦截的原因以及如何避免被拦截、新窗口安全、target 的秘密。

方式

主流的新开方式分为两种：

window.open

window.open 也是比较常用的一种弹窗方式，可以直接脚本打开新窗口，且可控制窗口是否弹出、大小等。

window.open(url, name, features);

模拟 a 标签

第三种方式是创建一个 a 标签，然后通过触发它的点击事件来打开新窗口，也算是比较常用的方式。

const openLink = (link: string) => {
    const a = document.createElement('a');
    a.href = link;
    a.target = '_blank';
    a.click();
};

除了上述几种常用方式，还有可以使用弹窗提示用户再次点击跳转、预先请求链接完成后再渲染按钮等，这里不做讨论。

拦截和避免

然而无论是 window.open 还是模拟 a 标签点击，都会遇到被拦截的情况，原因是很多黑产滥用弹窗功能，导致浏览器对这块功能收紧，当浏览器弹窗不是由用户发起时，便会拦截该操作。那浏览器是怎么判定是否由用户发起的呢？其实是当用户进行了点击行为一段时间内，浏览器都会认为该操作是用户的行为。并且该时间段内只能触发一次合法弹窗，多次弹窗依旧会被拦截。同时如果该时间段内触发的 setTimeout，会以 setTimeout 调用的时间为准，即只需要 setTimeout 在指定时间内调用，而不管 setTimeout 中的 window.open 或模拟点击的时间。

通过上面的分析，我们可以知道，如果用户点击后，一段时间内还没拿到 url 进行新窗口打开的操作，浏览器就会进行拦截，这个时间段各浏览器中好像并不一致。

通过上面的信息，为了避免被拦截，可以想到以下方案：

通过 setTimeout 定时一段足够请求返回的时间段，获取请求到的数据，打开新窗口，这种方式过于死板，不推荐。

在点击后直接打开窗口，然后等待请求返回后，再将新窗口重定向到返回的地址，这也是使用最为广泛的方式。

const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
const getUrl = async () => {
    await sleep(1000);
    return 'https://www.baidu.com';
};
const newWindow = window.open('about:blank', '_blank');
newWindow.location.href = await getUrl();

不过该方式体验上也有点问题，因为打开窗口触发后窗口便会弹出，而等待请求的这段时间里该窗口都会是一片空白，还有接口报错后窗口依旧保留，这里可以做一些小小的优化。

const newWindow = window.open('about:blank', '_blank');
newWindow.document.write('waiting...');
try {
    newWindow.location.href = await getUrl();
} catch (error) {
    newWindow.close();
    alert('open failed');
}

其它的还有通过将请求改为同步请求等方式，这里不做讨论。

安全

通过 window.open 或者 a 链接打开的标签可以通过 window.opener 拿到原页面的 window 引用，如果新窗口为外部页面，可能会导致信息泄漏、被钓鱼等安全问题。为了避免该情况，需要在 a 标签中添加 rel='noopener' 或 rel='noreferrer'，在 window.open 中添加 noopener 或 noreferrer 的 features。