topic Error on accessing a cross-origin frame in Integration and Testing

Error on accessing a cross-origin frame

julin123 — Thu, 10 Aug 2017 19:13:11 GMT

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

Re: Error on accessing a cross-origin frame

NexusSoftware — Fri, 11 Aug 2017 15:17:25 GMT

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

Re: Error on accessing a cross-origin frame

mvkotekar1983 — Sat, 08 Dec 2018 08:45:09 GMT

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)