Uncaught SecurityError: Blocked a frame with origin “null” from accessing a frame with origin “null”. Protocols, domains, and ports must match

Question

I set an iframe on my page and use below script to remove the double navigation bars. It works well on any browser, but doesn't work on Chrome, it shows double vertical navigation bars!

function calcHeight() {
    //find the height of the internal page
    var the_height = document.getElementById('the_iframe').contentWindow.
                     document.body.scrollHeight;

    //change the height of the iframe
    document.getElementById('the_iframe').height = (the_height + 30) +"px";
}

I get 2 errors messages in Chrome:

First error message:

Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

and it points out the error at:
```
var the_height = document.getElementById('the_iframe').contentWindow.
                 document.body.scrollHeight;
```
Second error message, it is located in jquery-1.10.2.js:

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

It points out the error message at:
```
elem.contentDocument || elem.contentWindow.document : 
```

This is because of same origin policy. You should include the location of that page and the one of the page in the iframe. — Oriol
Thank you, Oriol! The first error is from my page, the second one is from jquery-1.10.2.js. Would you please direct more about "should include the location of that page and the one of the page in the iframe." — abcid d
I meant you should say the URL of your page (e.g example.com/path/file.php) and the URL of the document loaded inside the iframe (i.e <iframe src=""></iframe>). This way we will see if they have the same origin or not. — Oriol
Thank you, Oriol! My page is: JSExample.html, this page contains an iframe: <iframe src="JS1.html" width="110%" height="100%" name="mainIFrame" id="the_iframe" class="iframeHideScr" frameborder="0" onLoad="calcHeight();"></iframe>. These 2 pages (JSExample.html and JS1.html) are in the same folder and the same level. — abcid d
Then it seems it should work. Are those pages local? In that case, see Using iframe with local files in Chrome — Oriol

Yibo Yang Yibo Yang · Accepted Answer · 2015-11-08T17:32:05

Try setting up a server on your machine and test your page from there, instead of on your local file system.

If you have Python 2, do python -m SimpleHTTPServer [port]
In Python 3, do python -m http.server [port]
This will set up a server on localhost:[port]. Then fire up a browser and navigate to your page and see if the problem goes away.

Uncaught SecurityError: Blocked a frame with origin “null” from accessing a frame with origin “null”. Protocols, domains, and ports must match

2 Answers