0

I know that there's a few different questions like this one, but I've encountered some problems trying to implement their solutions.

I have 2 html pages. The first one has an iframe that contains the second page. I want the first page to be able to get the value of a textarea from the second page via the iframe.

Here comes the problem. Both files are in the same directory on my computer but I get this error: Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.

JavaScript:

window.onload = function(){
    var f = document.getElementById("text-box-iframe").contentWindow;
    var innerDoc = f.contentDocument || f.contentWindow.document;
}

HTML:

<iframe id="text-box-iframe" src="text-box.html"></iframe>

So here's the two questions I have: Why isn't this code able to access the iframe's page (page 2), and what do I have to do to fix that?

IDK if this helps, but here's the second page's code:

<textarea id="text-box"></texarea>

Please don't suggest any plugins or libraries. I would like this answer in JavaScript/HTML (no jQuery), and I don't want to use postMessage to communicate between pages. I'm almost 100% sure that this method will work, I just need some help getting it to work.

Thanks in advance.

  • Have you seen [this](https://stackoverflow.com/questions/6170925/get-dom-content-of-cross-domain-iframe) question? – Pyromonk Jul 31 '17 at 04:53
  • refer this https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame and this https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage – Anil Jul 31 '17 at 04:53
  • `window.onload` fires when the main page loads, perhaps the iframe isn't loaded yet? – Jaromanda X Jul 31 '17 at 04:55
  • No @JaromandaX, it seems he has to enable cross-origin request. – Anil Jul 31 '17 at 04:57
  • no he doesn't, **Both files are in the same directory on my computer** - that's "same origin" ... unless he's using Chrome with file:/// protocol (not http or https) – Jaromanda X Jul 31 '17 at 04:58
  • huh, I could have sworn that I said that I didn't want to use the `postMessage` method. Ah well, would you be able to post a formal answer on how to allow page 1 to acces page 2 using HTTP access control (CORS)? –  Jul 31 '17 at 05:00
  • @JaromandaX, as Origin is considered different if at least one of the following parts of the address isn't maintained: ://:/path/to/page.html and he is only mentioning file name. – Anil Jul 31 '17 at 05:01
  • @Jordan - you are using Chrome? using file:/// (not a http server in other words) you need to start chrome with `--allow-file-access-from-files` – Jaromanda X Jul 31 '17 at 05:05
  • `he is only mentioning file name` therefore protocol, hostname and port are identical, therefore it's same origin, therefore it's only cross origin if protocol is file:// **and** the browser is **Chrome** – Jaromanda X Jul 31 '17 at 05:07
  • see https://stackoverflow.com/questions/45407378/cross-origin-requests-error-when-loading-local-file-in-chrome-but-in-firefox – Jaromanda X Jul 31 '17 at 05:08

3 Answers3

2

For security reasons, all operations on file:// frames are treated as cross-origin. In short, you can't perform cross-frame operations when displaying local files -- set up a web server if you need to do that.

(If you're curious: This is to prevent malicious HTML files you open from reading the contents of other files on your computer.)

duskwuff -inactive-
  • 171,163
  • 27
  • 219
  • 269
  • yes, that is what I am saying in comment. :) – Anil Jul 31 '17 at 05:02
  • @duskwuff That may be what I'm looking for! I'll have to try it to be sure. –  Jul 31 '17 at 05:03
  • `all operations on file:// frames are treated as cross-origin` ... **in Chrome** ... Firefox does not suffer this abomination – Jaromanda X Jul 31 '17 at 05:05
  • in fact, Firefox, Edge, Internet Explorer (haven't checked Opera or Safari) don't treat `file://` accessing `file://` as cross origin - only Chrum does that (use command line `--allow-file-access-from-files` to make Chrum not so stupid) – Jaromanda X Jul 31 '17 at 05:11
0

the inner frame and the parent frame, all should be from the same domain. else the browser will not allow you to access the child frame's element.

Its part of security.

Vetrivel
  • 107
  • 6
  • I know that already. I don't understand how they're not in the same domain. They're in the same folder! –  Jul 31 '17 at 04:53
  • did you opened the file directly into the browser or loaded it via a local server? – Vetrivel Jul 31 '17 at 04:55
  • @Jordan, if it's the same domain, you could probably do [this](https://stackoverflow.com/questions/1452871/how-can-i-access-iframe-elements-with-javascript). Except I don't really understand why you are punishing yourself by working with iframes when you could fire an AJAX request to the page you need. – Pyromonk Jul 31 '17 at 04:57
0

it should be like this

window.onload = function() {
  var f = document.getElementById("text-box-iframe");
  var innerDoc = (f.contentWindow || f.contentDocument);
  console.log(innerDoc)
  console.log(innerDoc.document.getElementById('text-box').value)
}
ewwink
  • 15,852
  • 2
  • 35
  • 50