Integration and Testing

Authorize.Net API questions and help with your payment integration.

Reply
Member
Posts: 1
Registered: ‎08-10-2017

Error on accessing a cross-origin frame

[ Edited ]

Hi,

 

I am hosting an add payment form inside my page and I am using ICommunicator.html from the authorize.net samle application. I am able to host the form but communication between iframe and parent is not happening and it throwing an error about 

 

 "Uncaught DOMException: Blocked a frame with origin "https://na.local.com" from accessing a cross-origin frame.
at callParentFunction (https://na.local.com/ssl/checkout/iCommunicator.html:8:29)
at https://na.local.com/ssl/checkout/iCommunicator.html:28:4".

 

For some reason its not allowing to use the js function.

 

this is  how my ICommunicator.html looks like 

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IFrame Communicator</title>
<script type="text/javascript">

function callParentFunction(str) {
if (str && str.length > 0 && window.parent && window.parent.parent
&& window.parent.parent.CommunicationHandler && window.parent.parent.CommunicationHandler.onReceiveCommunication)
{
var referrer = document.referrer;
window.parent.parent.CommunicationHandler.onReceiveCommunication({qstr : str , parent : referrer});
}
}

function receiveMessage(event) {
if (event && event.data) {
callParentFunction(event.data);
}
}

if (window.addEventListener) {
window.addEventListener("message", receiveMessage, false);
} else if (window.attachEvent) {
window.attachEvent("onmessage", receiveMessage);
}

if (window.location.hash && window.location.hash.length > 1) {
callParentFunction(window.location.hash.substring(1));
}

</script>
</head>
<body>
</body>
</html>

 

and  I have added javascript in my code but its not hitting that because of that error.

 ///<summary> authorize.net js</summary>  
    window.CommunicationHandler = {};
    function parseQueryString(str) {
        var vars = [];
        var arr = str.split('&');
        var pair;
        for (var i = 0; i < arr.length; i++) {
            pair = arr[i].split('=');
            vars[pair[0]] = unescape(pair[1]);
        }
        return vars;
    }
    window.CommunicationHandler.onReceiveCommunication = function (argument) {


        var params = parseQueryString(argument.qstr);

        switch (params['action']) {
            case "resizeWindow":

                console.log('resize'); break;

            case "successfulSave":

                console.log('save'); break;

            case "cancel":

                console.log('cancel'); break;

            case "transactResponse":

                sessionStorage.removeItem("HPTokenTime");

                console.log('transaction complete');

                var transResponse = JSON.parse(params['response']);

                window.location.href = 'ssl/checkout/ReviewAndPay.aspx';

        }
    }

 

Thanks,

Julin

Posts: 492
Topics: 0
Kudos: 99
Blog Posts: 0
Ideas: 0
Solutions: 42
Registered: ‎04-28-2017

Re: Error on accessing a cross-origin frame

[ Edited ]

Hello @julin123,

 

The X-Frame-Options directives are deprecated, the modern alternative is the Content-Security-Policy header, which along with many other policies can white-list what URLs are allowed to host your page in a frame, using the frame-ancestors directive, frame-ancestors supports multiple domains and even wildcards.

 

One way to resolve this issue on Apache is to use the following in your .htaccess file.

Header set Content-Security-Policy "frame-ancestors 'self' *.YOUR_WEBSITE.com *.authorize.net"

Or for a specific file: 

<Files iCommunicator.html>
Header set Content-Security-Policy "frame-ancestors 'self' *.YOUR_WEBSITE.com *.authorize.net"
</Files>

See a working example at : https://nexwebhost.com/authorizenet/gethosted.html

 

Powered by NexWebSites.com -
Certified Authorize.net developers
Contributor
Posts: 24
Registered: ‎11-30-2018

Re: Error on accessing a cross-origin frame

Thanks for the resolution. I am new to web deveopment, did not see much about whitelisting. Can you ellaborate little more on this. 

 

AM facing exactly same issue when using iframe. I am unable to white list. When we say header. which html file header needs to be updated ? Is it Icommunicator or the payment form contained page ?

 

(Am using asp.net/webforms)