javascriptiframecross-origin-read-blocking

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


I have an iframe located just one directory away:

  <iframe id="menu" src="./menu/menu.htm" title="MenĂ¼"></iframe> 

Goal is to share the same menu among multiple pages. This iframe should be able to communicate with its "parent".

Unfortunately, I run into the "cross-origin" error.

This happens even when all files are local and the parent is run from the browser as file:///C:/Users/..../testiframe.htm

When specifying the iframe src with the same protocol and full path file:///C:/Users/... I get the same error complaining about 'null origin'.

BTW: The exception happens when running a script in the iframe with e.g.

console.log(top.location);

and has the full text

"Error: Failed to read a named property from 'Location': Blocked a frame with origin "null" from accessing a cross-origin frame."


Solution

  • Yeah, for some unknown reason browser treat file:/// and localhost as being cross domain. The solution is to run a local http-server and use the IP address of the machine if you want it to appear local like you would expect.

    Failing that their is the PostMessage API which allows you to talk cross domain to iframes.