Blocked a frame with origin from accessing a cross-origin frame

Same-Origin Policy (SOP) restricts how a document or script loaded from one origin can interact with a resource from another origin. For example, when Site X tries to fetch content from Site Y in a frame, by default, Site Y's pages are not accessible due to security reasons, it would be a huge security flaw if you could do it.

Origin is considered different if at least one of the following parts of the address isn't maintained:

 
protocol://hostname:port/...

Protocol, hostname and port must be the same of your domain if you want to access a frame.

How to solve?

The window.postMessage() method provides a controlled mechanism to securely circumvent this restriction. The window.postMessage() safely enables cross-origin communication between Window objects; e.g: between a page and an iframe embedded within it.

Syntax:

 
postMessage(message, targetOrigin)
postMessage(message, targetOrigin, [transfer])

targetOrigin - specifies what the origin of targetWindow must be for the event to be dispatched, either as the literal string "*" (indicating no preference) or as a URI.

example

Main Page source

 
const frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, 'http://your-second-site.com');

The second argument to postMessage() can be '*' to indicate no preference about the origin of the destination. Always provide a specific targetOrigin, not '*' , if you know where the other window's document should be located. Failing to provide a specific target discloses the data you send to any interested malicious site.

The dispatched event

In your ‹iframe› contained in the main page, a window can listen for dispatched messages by executing the following JavaScript:

 
window.addEventListener('message', event => {
  if (event.origin.startsWith('http://your-first-site.com')) { //check the origin of the data!
    // The data was sent from your site. It sent with postMessage is stored in event.data:
    console.log(event.data);
  } else {
    // The data was NOT sent from your site!
    return;
  }
});

Disabling same-origin policy in your browser

Running a browser with same-origin security settings disabled grants any website access to cross-origin resources.

For Windows:

Go into the command prompt and go into the folder where Chrome.exe is and type:

 
chrome.exe --disable-web-security

For Linux :

 
$ google-chrome --disable-web-security

Also if you're trying to access local files for development purposes like AJAX or JSON, you can use this flag too.

 
--allow-file-access-from-files

NOTE: Disabling same-origin policy is very unsafe and should NEVER be done if you do not know exactly what you are doing.

Next : Unable to get property undefined or null reference