How to Resolve Iframe Cross Domain 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

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('','*');

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 implement iFrame communication to prevent from cross origin error?

This is a security feature in iFrames not to allow hijacking if the domain doesn't allow. this Stack Overflow answer gives a good explanation...

You need control over the domain you want to embed to remove/amend its
CORS policy. It the domain has explicitely 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).

---

Edit:

To overcome this, either you have to host the webpage with the iframe in the third party domain. or you can request the third party domain owner to enable CORS for a specific domain address (your hosting domain).

React iframe cross origin error despite being in same origin

I found the answer. Turns out same origin access is not allowed by default (for some reason) so you have to enable it by specifying it in the sandbox parameter:

<iframe sandbox="allow-same-origin" ... />

---

Related Topics