Cross Domain Iframe Issue

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

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.

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 Iframe Issue

how to resolve iframe cross domain issue

Understanding Cross-Domain issue in Iframes

Cross domain iframe issue

Iframe cross domain issue

Related Topics

Leave a reply