Showing results for 
Search instead for 
Did you mean: 

Error on accessing a cross-origin frame



I am hosting an add payment form inside my page and I am using ICommunicator.html from the 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 "" from accessing a cross-origin frame.
at callParentFunction (


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


this is  how my ICommunicator.html looks like 


<html xmlns="">
<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 && {

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) {



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

 ///<summary> 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":


                console.log('transaction complete');

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

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






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' * *"

Or for a specific file: 

<Files iCommunicator.html>
Header set Content-Security-Policy "frame-ancestors 'self' * *"

See a working example at :


Powered by -
Certified developers
Trusted Contributor

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