Changing src of iframe inside iframe

Question

I'm getting this problem in Chrome (Running the files locally) when I try to change the src of an Iframe inside iframe, I am getting this Error Message

Error = 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.

This the code that I'm using to retrieve the iframe

iframe = $("iframe").contents().find('iframe');
iframe.attr("src", url);`

I don't get this issue when I upload the files to the server. But if I open them locally I get the error.

It works good in firefox and safari.

How can i do this in chrome and in other browser ?

Answer 1

Security features built into all browsers ensure that Javascript cannot interact with objects in other windows and/or frames if those Windows or frames were loaded from a different site. This is commonly known as the "same origin policy". Whether something was loaded from a different site is determined by the hostname part of the URL. If for example the outer frame is loaded from http://yoursite.com and the inner frame is loaded from http://example.com then Javascript running in the scope of the outer frame will not be able to access or modify any properties or objects within the scope of the inner frame.

In this case the specific error is indicating that your Javascript, which is running in the context of the outer frame, is denied from accessing an object (contentDocument) whose scope is the inner frame. Hidden somewhere in the jQuery you are trying to use will be an implicit access to the frame's document element (as accessed by the contentDocument property of that iframe).

You may be able to work around this by destroying the iframe and re-creating a new iframe with the desired src.