How to execute javascript that is obtained after form submit inside iframe

Question

In my application, i am submitting the form to an external url using iframe. On form submit i get javascript as response inside the iframe. I want to execute the script that i have received as a response. But the script doesnt execute and i am not able to extract data from response. Its a payment integration and i am following this link

Below is the code before and after form submit

DOM before form submit, the form is added inside iframe dynamically on window.load event

<div class="3ds-empty-iframe">
<iframe height="1" width="1" id="ddciframe" style="display:none">
<body><form id="collectionForm" method="POST" action="https://secure-test.worldpay.com/shopper/3ds/ddc.html">
    <input type="hidden" id="ddcBin" name="Bin" value="4444333322221111">
    <input type="hidden" id="ddcJWT" name="JWT" value="sfsfJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2OWFkYzE4NS0xNzQ4LTQ1MjUtOWVmOS00M2YyNTlhMWMyZDYiLCJpYXQiOjE1NDg4Mzg4NTUsImlzcyI6IjViZDllMGU0NDQ0ZGNlMTUzNDI4Yzk0MCIsIk9yZ1VuaXRJZCI6IjViZDliNTVlNDQ0NDc2MWFjMGFmMWM4MCJ9.qTyYn4rItMMNdnh6ouqW6ZmcCNzaG9JI_GdWGIaq6rY">
  </form>
</body>
</iframe>
</div>

After form submit using $('#collectionForm').submit() method, the DOM looks like below inside iframe

<script>

    sendNotification(true, "822193d2-6bf4-4e3a-a79b-edasab7f8d33");

    function sendNotification(status, sessionId){
        try{
            var message = {
                MessageType: 'profile.completed',
                SessionId: sessionId,
                Status: status
            };
            window.parent.postMessage(JSON.stringify(message), '*');
        } catch(error){
            console.error('Failed to notify parent', error)
        }
    }
</script>

i want this script to be executed, so that i can catch the response in window.addeventlistener like below

window.addEventListener("message", function (event) {
            //This is a Cardinal Commerce URL in live.
            if (event.origin === "https://secure-test.worldpay.com/") {
                var data = JSON.parse(event.data);
                console.warn('Merchant received a message:', data);
                if (data !== undefined && data.Status) {
                    // Extract the value of SessionId for onward processing.
                    alert(data);
                }
            }
        }, false);

I know I don't use iframes much, but that looks like a completely incorrect usage of an iframe. Iframes are intended to reference other documents. You don't put html between the — Taplar, Apr 07 '20 at 17:46

score 0 · Answer 1 · edited Jul 24 '20 at 19:13

Like @Taplar said you're not using the iFrame properly.

Iframes are super weird if you're injecting content into them than you need to open them manually and inject it into the body, then close it.

An easier solution is to have your frame and form as siblings and simply target the form output to be inside the iframe:

<div class="3ds-empty-iframe">
  <iframe height="1" width="1" id="ddciframe" style="display:none"></iframe>
  
  <!-- use the iframe ID as the target -->
  <form target="ddciframe" id="collectionForm" method="POST" action="https://secure-test.worldpay.com/shopper/3ds/ddc.html">
    <input type="hidden" id="ddcBin" name="Bin" value="4444333322221111">
    <input type="hidden" id="ddcJWT" name="JWT"
      value="sfsfJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2OWFkYzE4NS0xNzQ4LTQ1MjUtOWVmOS00M2YyNTlhMWMyZDYiLCJpYXQiOjE1NDg4Mzg4NTUsImlzcyI6IjViZDllMGU0NDQ0ZGNlMTUzNDI4Yzk0MCIsIk9yZ1VuaXRJZCI6IjViZDliNTVlNDQ0NDc2MWFjMGFmMWM4MCJ9.qTyYn4rItMMNdnh6ouqW6ZmcCNzaG9JI_GdWGIaq6rY">
  </form>
</div>

Here's some MDN docs, checkout the target attribute for more information: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

Like @user3267206 said, this implementation is not of his design; it's Worldpay / Cardinal Commerce's design (to have access to the browser for "device data collection"). The IFrame fix is to dynamically load the IFrame using srcdoc (https://stackoverflow.com/a/60888041/196285). BUT this does not solve the problem of blocking form submission until the window.message is received from the IFrame POST. — GlennG, Dec 21 '20 at 07:33

How to execute javascript that is obtained after form submit inside iframe

1 Answers1