Question

32

Using iframe with local files in Chrome

rated 0 times [ 35] [ 3] / answers: 1 / hits: 77196 / 11 Years ago, tue, july 30, 2013, 12:00:00

I am having a tough time figuring out how to access a page loaded in an iframe from the outer page. Both pages are local files, and I'm using Chrome.

I have an outer page, and many inner pages. The outer page should always display the page title for the inner page (it makes sense in my application, perhaps less so in this stripped-down example). This works without any problem in AppJS, but I've been requested to make this app work directly in the browser. I'm getting the error Blocked a frame with origin null from accessing a frame with origin null. Protocols, domains, and ports must match..

I think this is due to Chrome's same origin policy regarding local files, but that hasn't helped me fix the problem directly. I can work around the issue in this stripped-down example by using the window.postMessage method per Ways to circumvent the same-origin policy. However, going beyond this example, I also want to manipulate the DOM of the inner page from the outer page, since this will make my code much cleaner - so posting messages won't quite do the job.

Outer Page

<!DOCTYPE html>

<html>

    <head> 

        <meta name=viewport>

    </head> 

    <body>

        This text is in the outer page

        <iframe src=html/Home.html seamless id=PageContent_Iframe></iframe>

        <script src=./js/LoadNewPage.js></script>

    </body>

</html>

Inner Page

<!DOCTYPE html>

<html>

    <head>

        <title id=Page_Title>Home</title> 

        <meta name=viewport>

    </head> 

    <body>

        This text is in the inner page

    </body>

</html>

JavaScript

var iFrameWindow = document.getElementById(PageContent_Iframe).contentWindow;

var pageTitleElement = iFrameWindow.$(#Page_Title);

Per Is it likely that future releases of Chrome support contentWindow/contentDocument when iFrame loads a local html file from local html file?, I tried launching Chrome with the flag

--allow-file-access-from-files

But there was no change in the results.

Per Disable same origin policy in Chrome, I tried launching Chrome with the flag

--disable-web-security

But again there was no change in the results.

Per What does document.domain = document.domain do?, I had both pages run the command

document.domain = document.domain;

This resulted in the error Blocked a frame with origin null from accessing a frame with origin null. The frame requesting access set document.domain to , but the frame being accessed did not. Both must set document.domain to the same value to allow access.

For fun, I had both pages run the command

document.domain = foo.com;

This resulted in the error Uncaught Error: SecurityError: DOM Exception 18.

I'm floundering. Any help from more knowledgeable people would be fantastic! Thanks!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

osvaldo

Add To Favorites

Follow

Total Points: 102

Total Questions: 95

Total Answers: 102

Location: Fiji

Member since Wed, Jul 14, 2021

3 Years ago

answered 11 Years ago janettejordynm · Accepted Answer

Per our discussion in my cube just a minute ago :)

I hit this same problem (Ajax post response from express js keeps throwing error) trying to get an AJAX post request to work correctly.

What got me around it is not running the file directly off the file system but instead running it from a local server. I used node to run express.js. You can install express with the following command: npm install -g express

Once that is accomplished, you can create an express project with the following command: express -s -e expressTestApp

Now, in that folder, you should see a file named app.js and a folder named public. Put the html files you wish to work with in the public folder. I replaced the file app.js with the following code:

var express = require('/usr/lib/node_modules/express');

var app = express();



app.use(function(err, req, res, next){

  console.error(err.stack);

  res.send(500, 'Something broke!');

});



app.use(express.bodyParser());

app.use(express.static('public'));



app.listen(5555, function() { console.log(Server is up and running);  });

Note, the require line may be different. You have to find where your system actually put express. You can do that with the following command: sudo find / -name express

Now, start the express web server with the following command: node app.js

At this time, the webserver is up and running. Go ahead and open a browswer and navigate to your ip address (or if you're on the same machine as your server, 127.0.0.1). Use the ip address:portnumberfilename.html where port number is the 5555 in the app.js file we created.

Now in that browser, you shouldn't (and didn't when we tested it) have any of these same problems anymore.