代码之家 › 专栏 › 技术社区 › Amer Qarabsa

强制window.top.location.href在iframe中重新加载

iframe forms angular javascript

Amer Qarabsa · 技术社区 · 6 年前

我有一个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中进行重新加载。

1 回复 | 直到 6 年前

Tiny Giant 6 年前

您可以阻止本机表单提交,然后使用Ajax日志提交表单并侦听响应。

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

(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>