Blank page displayed in challenge iframe on IE first time

[surajbyanju]

@slogsdon We are facing yet another issue in IE browser. For the challenge flow, the challenge iframe is displaying blank page for the first call to the initiateAuthentication method. Subsequent calling of the initiateAuthentication method brings up the iframe with the forms and overlay inside it properly.

I figured - IE could not append forms and overlays because the body has not been loaded for the first time. Ref: https://stackoverflow.com/a/28465896

Looks like we have to check if the document is loaded before appending the form and overlay to the body in postToIframe method.

When I change the handle3dsVersionCheck to following the iframe displays the inner forms fine.

function handle3dsVersionCheck(data, options) {
        return __awaiter(this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0:
                        if (!data.enrolled) {
                            throw new Error("Card not enrolled");
                        }
                        options = options || {};
                        options.hide = typeof options.hide === "undefined" ? true : options.hide;
                        options.timeout =
                            typeof options.timeout === "undefined" ? 30 * 1000 : options.timeout;
                        if (!data.methodUrl) return [3 /*break*/, 2];
                        return [4 /*yield*/, window.onload = function(){postToIframe(data.methodUrl, [{ name: "threeDSMethodData", value: data.methodData }], options)}];
                    case 1:
                        _a.sent();
                        _a.label = 2;
                    case 2: return [2 /*return*/, data];
                }
            });
        });
    }

Is this the best place to make this change?

[slogsdon]

@surajbyanju Apologies for the delay. I've been out of the office for a bit. Are you seeing this just with the challenge window or with the method window as well?

Taking a look at the SO link you provided, I'd need to investigate further on my end to see if this is related to what you're experiencing. We're not currently setting the src attribute of the iframe, and when building the form to initiate the request, we're appending the form to the parent window document and not the iframe window's document.

[surajbyanju]

@slogsdon I am not sure if this happens in method window because the method window closes immediately. This for sure happens in challenge window and just in IE browser. I think the issue is when trying to append the challenge iframe to html body.

if (!data.methodUrl) return [3 /*break*/, 2];
                        return [4 /*yield*/, window.onload = function(){postToIframe(data.methodUrl, [{ name: "threeDSMethodData", value: data.methodData }], options)}];

When I add window.onload in this line. the challenge renders fine so my guess is we have to add window.onload function somewhere before calling handleInitiateAuthentication method.

[slogsdon]

@surajbyanju I did some testing, and it appears the hidden method iframe isn't being removed from the DOM. Since the method iframe is still on the page, the form posting the creq to the ACS for the challenge is targeting the method iframe instead of the challenge / lightbox iframe as we re-use the ID's.

I believe the root cause of this issue is essentially the same as #1 but at this location: https://github.com/globalpayments/globalpayments-3ds-js/blob/master/src/lib/post-to-iframe.ts#L85-L86. Would you want to submit another PR for this, or do you want me to handle this?

[surajbyanju]

@slogsdon I am sorry for getting you back on this late. I got caught up in something else and missed out the github email.

Yes, I tested with the change you suggested and it works fine in IE now. I will make the change and create a pull request.

Thank you for looking into this.