Understanding Cross-Domain Issue in Iframes

Understanding Cross-Domain issue in Iframes

Cross-domain issues are about the communication between iframes. You can always embed any iframe but, if domains differ, iframes cannot interact with each other e.g. execute JS, modify DOM etc.

HTML5 provides a sandbox property that re-enables particular features of the cross-domain iframe interaction. Be careful, it can be dangerous.

how to resolve iframe cross domain issue

You need control over the domain you want to embed to remove/amend its CORS policy.

If the domain has explicitly blocked Cross-Origin requests, there's nothing you can do about it.

This is used to avoid anyone hijacking any site you want (you could have a full screen Google in an iframe running with your ads on top on bettergoogle.com, things like that).

This page will give you more insights on Cross-Origin

Cross domain iframe issue

If you don't have control over the framed site, you cannot circumvent the cross-domain policy.

If you have control over both sites, you can use the postMessage method to transfer data across different domains. A very basic example:

// framed.htm:
window.onmessage = function(event) {
    event.source.postMessage(document.body.innerHTML, event.origin);
};

// Main page:
window.onmessage = function(event) {
    alert(event.data);
};

// Trigger:
// <iframe id="myframe" src="framed.htm"></iframe>
document.getElementById('myframe').contentWindow.postMessage('','*');

Iframe cross domain issue

I just recently helped another person with a very similar concern, passing messages between IFrames. (see Issues with Cross Document Messaging between IFrame & Parent).

Using a modified version of the code that I am borrowing from suamikim in that aforementioned topic, I have integrated a timer. This should serve as a good starting point for you. These parent and child html pages will work cross-domain just as described in the comments above by Amadan. I just tested and confirmed it, by placing parent.html on one domain, which pointed to child.html on a totally separate untrusted domain.

parent.html

<html><head>    <script type="text/javascript">        function parentInitialize() {            var count = 0;            window.addEventListener('message', function (e) {                // Check message origin etc...                if (e.data.type === 'iFrameRequest') {                    var obj = {                        type: 'parentResponse',                        responseData: 'Response #' + count++                    };                    e.source.postMessage(obj, '*');                }                // ...            })  }    </script></head><body style="background-color: rgb(72, 222, 218);" onload="javascript: parentInitialize();">    <iframe src="child.html" style="width: 500px; height:350px;"></iframe></body></html>

Cross domain issue with iframes

i'm not a fan of jsonp, it creates coupling between data and presentation, and so i researched this issue before, and well, there's a trick that you can use, follow this:

let's say we have the main window named A and the "child" window in the iframe named B.
A and B must be served from the same host, but can have different subdomains, something like:

A is served from sub1.example.com
B is served from sub2.example.com

browsers will let you change the domain of the document, but still restrict you on that, so you can only change the domain by removing subdomains until you reach the host, and so in A you change the domain, like so:

document.domain = "example.com";

in B you first make an ajax call to its domain (sub2.example.com), then after the first request was sent you change the domain just like in A, so that both documents have the same domain.
since you made a request to the original domain in B the browser will allow you to keep sending requests to it, but since you also changed its domain, and now A and B have the same domain they can communicate with each other.

it's important that you first make at least one request in B to its original domain, before you change the domain.
also, it won't work if both pages are not served from the same host, so in most cases it does not solve the problem, but it does allow you a bit more room to maneuver.

i used this trick more than once and haven't came across any problems, as far as i'm aware, it works in all browsers, let me know if it doesn't in some cases.

here's a pseudo example:

in A
==================
document.domain = "example.com";
var child; // keep reference to B
function setChild(win) {
    childDocument = win;
}

function handleMessage(message) {
    do what ever it is you need to
}

in B
==================
make ajax request
document.domain = "example.com";
parent.setChild(this);

function ajaxCallback(message) {
    parent.handleMessage(message);
}

Understanding Cross-Domain Issue in Iframes