强制 window.top.location.href 在 iframe 内重新加载答案

【问题标题】：Force window.top.location.href to reload inside an iframe强制 window.top.location.href 在 iframe 内重新加载
【发布时间】：2018-07-15 08:10:52
【问题描述】：

我在 iframe 中有表单

<iframe name=“name_12341323556” class="wpwl-target" src="about:blank" frameborder="0" style="display: inline; width: 100%; height: 580px;">
#document
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="STYLESHEET" type="text/css" href="css/demo.css">
    <title>3D test payment</title>
</head>
<body text="#08297B">

    <form name="acsform" action="https://test.ppipe.net/action” method="POST">
    <table>
      <tbody>
        <tr><td>PASSWORD:</td>
          <td><input id="password" name="password" type="password"></td>
          <input type="hidden" name="vpc_3dset” value="3VrAhRyM4k5s8RGM1fFpwalwCFg=">
        </tr>
        <tr>
          <td colspan="2"><input name="commit" value="Submit" type="submit"></td>
        </tr>
      </tbody>
     </table>
    </form>


</body></html>


</iframe>

更新

经过更多的挖掘，发现重定向的原因不是表单的提交，表单的响应带有重定向逻辑，迫使页面重定向

<html>
    <head>
        <meta charset="utf-8">
        <script src="/v1/paymentWidgets/js/Spinner.min.js"></script>
    </head>
    <body onload="onLoadDocument()">
           <div id="infoForScriptEnabled" style="display:none">
            <p>You are being redirected in 0 seconds. If this doesn't happen, please <a target="_top" href="http&#x3a;&#x2f;&#x2f;ec2-54-171-52-4.eu-west-1.compute.amazonaws.com&#x2f;api&#x2f;test&#x3f;id&#x3d;A6583FC808A9B2E98FAD5D012EAE343E.sbg-vm-tx02&amp;resourcePath&#x3d;&#x25;2Fv1&#x25;2Fcheckouts&#x25;2FA6583FC808A9B2E98FAD5D012EAE343E.sbg-vm-tx02&#x25;2Fpayment">Click here to continue</a></p>
           </div>
        <script type="text/javascript">
            function onLoadDocument() {
                var spinner = new Spinner({}).spin(document.body);
                document.getElementById("infoForScriptEnabled").style.display = "block";
                window.top.location.href = "http\x3A\x2F\x2Fec2\x2D54\x2D171\x2D52\x2D4.eu\x2Dwest\x2D1.compute.amazonaws.com\x2Fapi\x2Ftest\x3Fid\x3DA6583FC808A9B2E98FAD5D012EAE343E.sbg\x2Dvm\x2Dtx02\x26resourcePath\x3D\x252Fv1\x252Fcheckouts\x252FA6583FC808A9B2E98FAD5D012EAE343E.sbg\x2Dvm\x2Dtx02\x252Fpayment";
            }
        </script>

        <noscript>
            <a target="_top" href="http&#x3a;&#x2f;&#x2f;ec2-54-171-52-4.eu-west-1.compute.amazonaws.com&#x2f;api&#x2f;test&#x3f;id&#x3d;A6583FC808A9B2E98FAD5D012EAE343E.sbg-vm-tx02&amp;resourcePath&#x3d;&#x25;2Fv1&#x25;2Fcheckouts&#x25;2FA6583FC808A9B2E98FAD5D012EAE343E.sbg-vm-tx02&#x25;2Fpayment">Click here to continue</a>
        </noscript>
    </body>
</html>

我无法修改此响应，因此我需要再次将重定向放在我的 iframe 中。

通过 Teemu 的建议，我可以阻止页面重新加载，但这不会在 iframe 内进行重新加载。

【问题讨论】：

不确定它是否真的有效，但您可以尝试将iframe 沙箱化，并且不允许顶部导航..？
@Teemu 谢谢，已经尝试过了，但没有用

标签： javascript angular forms iframe

【解决方案1】：

您可以阻止本地表单提交，然后使用 AJAX POST 提交表单并监听响应。

我伪造了下面的请求，但同样适用于您的网站。

(function(){
  "use strict";
  
  const request = ({ method, action, data }) => new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.addEventListener('load', resolve);
    xhr.addEventListener('error', reject);
    xhr.open(method, action);
    xhr.send(data);
  });
  
  const fakeRequest = () => request({ method: 'GET', action: 'https://gist.githubusercontent.com/Tiny-Giant/a82536362d0530eebc76bdcfe9e6f122/raw/5df210478c69fab5682ef279728bd96a48933019/response.html' });
  
  const form = document.querySelector('form[name="acsform"]');
  form.addEventListener('submit', async event => {
    event.preventDefault();
    const { method, action } = form;
    const data = new FormData(form);
    // const response = await request({ method, action, data });
    const response = await fakeRequest({ method, action, data });
    console.log(response.target.responseText);
  });
})();

<form name="acsform" action="https://test.ppipe.net/action" method="POST">
<table>
  <tbody>
    <tr><td>PASSWORD:</td>
      <td><input id="password" name="password" type="password"></td>
      <input type="hidden" name="vpc_3dset" value="3VrAhRyM4k5s8RGM1fFpwalwCFg=">
    </tr>
    <tr>
      <td colspan="2"><input name="commit" value="Submit" type="submit"></td>
    </tr>
  </tbody>
 </table>
</form>

【讨论】：