uncaught domexception: blocked a frame with origin – Code Example

Browsers throw uncaught domexception: blocked a frame with origin when you try to load a url in an iframe which is not of your domain. This is a CORS error and it is for the safety of users as well as websites.

A website is considered or different origin if any of these properties differs –

1. Protocol: http | https | ftp – If you are running your website on http then you can only load iframe url of http protocol.
2. Domain: Domain is the name of your website. It is also known as hostname. It needs to match exactly. You can’t use different subdomains too.
3. Port: The port needs to match. So if you website is running at port 80 then you can’t load iframe for port 443.

Solution with Code Example

You can use window.postMessage() if you own both the websites –

In parent file –

const frame = document.getElementById('frame-id');
frame.contentWindow.postMessage("passed to frame", 'https://iframe-site.com');

In iframe file –

window.addEventListener('message', event => {
    // IMPORTANT: check the origin of the data!
    if (event.origin.startsWith('https://main-domain.com')) {
        // The data was sent from your site.
        // Data sent with postMessage is stored in event.data:
        console.log(event.data);
    } else {
        // The data was NOT sent from your site!
        // Be careful! Do not use it. This else branch is
        // here just for clarity, you usually shouldn't need it.
        return;
    }
});