javascript - access to iframe contents of local file

Question

I have the file file:///C:/index.html that has an iframe inside it:

<iframe id="folder_browser" src="file:///C:/Files/"></iframe>

the contents of the Files folder load into the iframe but I can not access to them by javascript or jquery. what can I do?

I have tried $('#folder_browser').contents().find('body').html(); but no luck!

Answer 1

Cause "Same origin policy" you can't get the content of an iframe either in this kind of situations nor in the case you have the main page from a domain and the iframe document from another domain.

"Same origin policy" is a set of restrictions that browsers apply to webpages to prevent communicating each other. These restrictions prevent a lot of security issues from internet web sites like accessing to your private data stored on your local machine using tricks like that one.

Nevertheless there are some ways (and conditions) to bypass these restrictions:

1. window.document.domain variable manipulation
2. Proxy
3. Cross Document Messaging

But this is possible only if both pages are into the same domain and by modifying the content of both html pages (in particular their javascripts) so pages can authorize each other communications. This can be only done if both the parent page and the iframe child page are web pages: in this case the address file:///C:/something/ is not a web address, it is a local directory.

It is possible to find some interesting tutorials about same origin policy at

Bypass Same Origin Policy ,

and

Same-origin policy for file: URIs .

In this last one in particular you can read "The new security.fileuri.strict_origin_policy preference, which defaults to true, can be set to false if the user doesn't want to strictly enforce the same origin policy on file: URIs."

Another interesting information resource is:

Bypassing the Same-Origin-Policy For Local Files During Development .

In which I found the following hint that may help:

The only real cross-browser solution to circumvent the problem altogether is to serve the content with a local webserver, so that you can access it through HTTP.

In other words you have to install a web server software into your computer and configure it to serve files under an address like http:///yourlocalwebserverdirectory.

Nevertheless you can get files (with the interaction of the user) by using the html input type file, here a working example:

document.getElementById('loadfile').onchange = function(event) {
  var files = loadfile.files;
  var len = files.length;
  var outpt = document.getElementById('filelist');
  
   for (var i=0; i<len; i++)
     {
       outpt.innerHTML += files[i].name + '<br>';
     }
 }

<input type="file" id="loadfile" name="files[]" multiple = "multiple" title="load one or more files" autofocus="autofocus" />

<div id="filelist"></div>