iframe 禁止打开新窗口_打开新窗口的安全和性能问题

作者：你好赵伟 | 2024-03-04 19:19:23

踩

iframe中页面中有url,点击在新窗口中打开,浏览器阻止

相信大部分同学都接到过"点击页面某个地方从新窗口打开一个页面"的需求, 一般这个需求都有一下两种处理方式来完成:

1. a标签加上target="_blank"属性

2. window.open(url)

但是以上两种处理方式可能会遇到已下问题:

1. 用户账户或个人信息被盗取

2. 打开新页面后, 原窗口页面出现卡顿情况

经过一顿猛操作去验证, 发现新窗口打开新页面可能出现安全问题和性能问题, 原因是Window对象的opener属性

(关于window opener属性解释摘自菜鸟教程)

废话不多说, 我们通过代码来检验

<html><head>  <meta charset="utf-8">  <title>原始页面title>head><body><h1 style="color: red;" id="alert-tips">h1><a href="./target.html" target="_blank">1.target _blanka><br><a id="btn-diff" href="javascript:void(0);">2.window.opena><br><a id="btn-open" href="javascript:void(0);">3.window.open并且设置opener为nulla><br><a id="btn-iframe" href="javascript:void(0);">4.新建iframe打开a><br><a href="./target.html" target="_blank" rel="noopener">5.target _blank noopenera><p id="random-number">0.6890402854817066p><script>  window.onload = function () {    var randomItem = document.getElementById('random-number'),      btnDiff = document.getElementById('btn-diff'),      btnIframe = document.getElementById('btn-iframe'),      btnOpen = document.getElementById('btn-open');    console.log('DOM READY');    btnDiff.addEventListener('click', function () {      window.open('./target.html');    });    btnIframe.addEventListener('click', function () {      iframeOpen('./target.html');    });    btnOpen.addEventListener('click', function () {      var child = window.open('./target.html');      child.opener = null;    })    var setRandom = function () {      randomItem.innerHTML = Math.random();      setTimeout(setRandom, 10);    }    checkHash();    setRandom();  }  window.onhashchange = checkHash;  function checkHash() {    if (location.hash.indexOf('#hack') >= 0) {      document.getElementById('alert-tips').innerHTML = '你被HACK了啊！这个页面的地址已经变了！';    }  }  /**   * Opens the provided url by injecting a hidden iframe that calls   * window.open(), then removes the iframe from the DOM.   *   * @param   {string} url The url to open   * @param   {string} [strWindowName]   * @param   {string} [strWindowFeatures]   * @returns {Window}   */  function iframeOpen(url, strWindowName, strWindowFeatures) {    var iframe, iframeDoc, script, openArgs, newWin;    iframe = document.createElement('iframe');    iframe.style.display = 'none';    document.body.appendChild(iframe);    iframeDoc = iframe.contentDocument || iframe.contentWindow.document;    openArgs = '"' + url + '"';    if (strWindowName) {      openArgs += ', "' + strWindowName + '"';    }    if (strWindowFeatures) {      openArgs += ', "' + strWindowFeatures + '"';    }    script = iframeDoc.createElement('script');    script.type = 'text/javascript';    script.text = 'window.parent = null; window.top = null;' +      'window.frameElement = null; var child = window.open(' + openArgs + ');' +      'child.opener = null';    iframeDoc.body.appendChild(script);    newWin = iframe.contentWindow.child;    document.body.removeChild(iframe);    return newWin;  }script>body>html>

(如上为origin.html)

<html><head>  <meta charset="utf-8">  <title>目标页面title>head><body><p id="content">p><script>  window.onload = function(arguments) {    hackOrigin();    superFunJankTime();  };  function hackOrigin() {    var content = document.getElementById('content');    if (window.opener) {      // console.log('window.opener', window.opener)      // console.log('opener', opener)      opener.location = './origin.html#hack';      content.innerHTML = 'HACK成功，再看看上个TAB？';    } else {      content.innerHTML = 'HACK失败。。。。';    }  }  function superFunJankTime() {    var start = Date.now();    while (Date.now() - start < 1000);    setTimeout(superFunJankTime, 1000);  }script>body>html>

(如上为target.html)

经过动手尝试后, 发现原来第1,2个跳转链接是可以通过window.opener.location=newUrl来重写原页面的url的, 即使与原窗口的页面不同域; 利用这种方式原始页面窗口的链接就被悄悄换成钓鱼页面的地址. 一般人也不会关注到url悄悄变了, 因此就会造成安全性问题.

那么, 透过上面的代码, 不难发现, 这个安全性问题可以通过3,4,5可以解决安全性问题; 但是, 如果透过3,4去发生跳转的话, 我们会发现一开始的页面上的一串鬼畜随机数, 偶尔有点小卡顿; 这个随机数是通过一个定时器生成的, 每隔一段时间就有一个持续循环. 这个循环在阻塞新页面本身的js线程的同时, 也阻止了opener(即打开了新页面的原始页面)里的js线程. 若这种类似的操作很多的话, 原始页面的可能会卡死;

问题来了, 为啥新窗口会影响原来窗口的线程呢? chrome不是每个标签页一个单独的进程吗? 进程内包含若干线程吗?

chrome确实有不同的标签页面使用不同的进程和线程, 但是有个例外, 通过a标签的target="_blank"属性, 或者window.open(url)在新窗口中打开页面, 会与原窗口共用进程和线程. 这是因为opener中含有DOM信息, 两个进程中同时hold住这个DOM信息, 在多个进程下很难控制, 于是放到一个进程里面

当然, 上述的问题也有对应的解决方案: 通过a标签上添加noopener属性, 可将新打开窗口的opener置为空. 这个方案可解决除IE以外的安全问题和所有现代浏览器的性能问题

总结一下:

1. 使a标签noopener属性, 将新打开的窗口opener置为空(推荐)

特点: 可解决除IE外的安全问题和所有现代浏览器的性能问题

2. window.open并设置opener为空

特点: 可解决所有除safari下的安全问题, 无法解决性能问题

var newWindow = window.open();newWindow.opener = null;newWindow.location = 'url';newWindow.target = '_blank';

3. 新建iframe中打开新窗口, 然后关掉iframe

特点: 可解决safari下的安全问题, 无法解决性能问题

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/188425