Reply
Highlighted
Member
Posts: 3
Registered: ‎11-27-2019
Accepted Solution

Accept Hosted: Blocked a frame with origin [site url] from accessing a cross-origin frame

I'm using the code from the Authorize.net dev guide for the iFrameCommunicator:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Iframe Communicator</title>
    <script type="text/javascript">
        //<![CDATA[
        function callParentFunction(str) {
            if (str && str.length > 0 &&
                window.parent &&
                window.parent.parent &&
                window.parent.parent.AuthorizeNetIFrame &&
                window.parent.parent.AuthorizeNetIFrame.onReceiveCommunication) {
                // Errors indicate a mismatch in domain between the page containing the iframe and this page.
                window.parent.parent.AuthorizeNetIFrame.onReceiveCommunication(str);
            }
        }

        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>

When I get to the payment page, the form loads fine, but an error gets thrown in the console saying "Uncaught DOMException: Blocked a frame with origin [my url] from accessing a cross-origin frame" in Chrome, and just says Access Denied in Microsoft Edge when trying to access CallParentFunction in the above code.

 

I've tried with no X-Frame-Options and Content-Security-Policy, and I've tried with the Content-Security-Policy found in this similar discussion but nothing has fixed the problem, and it causes the payment form to just sit there and do nothing when submitted.

 

Am I making some obvious mistake that I've just missed? Nobody else seems to be having this issue.


Accepted Solutions
Solution
Accepted by topic author edrinshrike
‎11-30-2019 05:40 AM
Member
Posts: 3
Registered: ‎11-27-2019

Re: Accept Hosted: Blocked a frame with origin [site url] from accessing a cross-origin frame

I think I got it fixed, and of course it was my fault. Since Chrome hides the beginning of URLs in the address bar, I neglected to notice that I wasn't forcing the redirect to www. It was working for me at work because my bookmark was set to www, but all the recent tests have just been typing the URL in without the www. Now that's I've set the redirect, it seems to be working. Sorry for wasting anyone's time.

View solution in original post


All Replies
All Star
Posts: 684
Registered: ‎11-05-2018

Re: Accept Hosted: Blocked a frame with origin [site url] from accessing a cross-origin frame

@edrinshrike

What may be the case is that your communicator url is on an http connection and your payment page is on an https, or vice versa. That will trigger a cross origin block.
Member
Posts: 3
Registered: ‎11-27-2019

Re: Accept Hosted: Blocked a frame with origin [site url] from accessing a cross-origin frame

I wish it was that simple, but everything seems to be using HTTPS, as the error shows:

 

iframecommunicator:9 Uncaught DOMException: Blocked a frame with origin "https://www.[site].com" from accessing a cross-origin frame.
    at callParentFunction (https://www.[site].com/checkout/iframecommunicator:9:10)
    at https://www.[site].com/checkout/iframecommunicator:35:13

The strange thing is that I don't get the error in Chrome on my work computer or my personal computer at home, which are the two browsers I used for development. Everything just works in those two, but none others. It also never happened in any browser in Sandbox mode (which also used a different authorize.net account).

Solution
Accepted by topic author edrinshrike
‎11-30-2019 05:40 AM
Member
Posts: 3
Registered: ‎11-27-2019

Re: Accept Hosted: Blocked a frame with origin [site url] from accessing a cross-origin frame

I think I got it fixed, and of course it was my fault. Since Chrome hides the beginning of URLs in the address bar, I neglected to notice that I wasn't forcing the redirect to www. It was working for me at work because my bookmark was set to www, but all the recent tests have just been typing the URL in without the www. Now that's I've set the redirect, it seems to be working. Sorry for wasting anyone's time.

All Star
Posts: 684
Registered: ‎11-05-2018

Re: Accept Hosted: Blocked a frame with origin [site url] from accessing a cross-origin frame

@edrinshrike 

 

You're not wasting anyone's time. I hop on here while waiting for pancakes at whatever odd hour of the day or night I happen to be eating breakfast (I work 18 to 28 hours at a time, occassionally, and it throws my sleep off).  Can you mark this thread as solved?  Best of luck to you. 

New Member
Posts: 6
Registered: ‎12-02-2019

Re: Accept Hosted: Blocked a frame with origin [site url] from accessing a cross-origin frame

All this requires careful attention. Concentrate when you work.