Question

From the page file://localhost/Users/pistacchio/dev/epress/catflow/test_html/index.html I have the following (coffeescript) code trying to access an iframe:

$('#ipad-viewport iframe').bind 'load', () ->
    console.log $(this).contents().find('map')

(This translates to the following javascript, but I don’t think the issue relies here):

(function() {

  $('#ipad-viewport iframe').bind('load', function() {
    return console.log($(this).contents().find('map'));
  });

}).call(this);

I wait for the iframe page to be loaded and try to access an element within its body. I get the following error:

Unsafe JavaScript attempt to access frame with URL file://localhost/Users/pistacchio/dev/epress/catflow/test_html/catalogo/catalog/intro.html from frame with URL file://localhost/Users/pistacchio/dev/epress/catflow/test_html/index.html. Domains, protocols and ports must match.

Now, since the iframe is defined like this:

<iframe src="file://localhost/Users/pistacchio/dev/epress/catflow/test_html/catalogo/catalog/intro.html" width="1024" height="768"></iframe>

Aren’t both my page and the iframe in the same domain, or file://localhost? Why am I experiencing this problem?

Oh, if relevant, I’m testing this with Chrome 18.

Answer 1

file:/// URLs are subject to a slightly different javascript security policy to the normal same origin policy that applies to hosted content. In order to stop a saved web page from being able to read the entire contents of your disk, different files are seen as different origins. Just fire up a local server and host your content on that; you will fall back to the “standard” policy where origins are defined by domain/ip.

If for some reason you can’t run a web server, you may get some mileage out of the
command line switch: --allow-file-access-from-files. I believe this has the affect of making all file:/// URLs to be defined as belonging to the same origin.