CODEWITHSUNDEEP
javascripthtmliframe
EviGL
EviGL

Reputation: 43

Form target breaks when global variable name is specified inside iframe

You have an HTML like this:

<form action="frame.html" target="frame1"><input type="submit"></form>
<iframe name="frame1" id="frame1" src="frame.html"></iframe>

And it works fine reloading the frame (sending some post data in case of production code). BUT if in the frame.html there is a code defining global variable "name", the code breaks and opens frame.html in a new tab instead.

var name = "a";

Works the same way in Chrome and Firefox.

Here's the example on github.io: http://evigl.github.io/form-target-iframe-test/
Sources: https://github.com/EviGL/form-target-iframe-test/tree/gh-pages
(first frame is normal working frame, second opens new window, several console.log's for clarity).

It's strange, huh? It works the same way even if frame.html is on another domain. Doesn't it break Same Origin Policy?

Is there a way to override this behavior? I have some uncontrolled code inside the frame (user-generated code preview), changing it is not an option. And it is also on another domain.

Upvotes: 3

Views: 73

Answers (1)

Quentin
Quentin

Reputation: 943922

It's strange, huh?

Yes. It's a consequence of very early DOM design which has been kept for backwards compatibility (because browsers won't throw out anything terrible that websites might actually still use).

Doesn't it break Same Origin Policy?

No. The JS isn't reading anything across origins.

Is there a way to override this behavior?

Not really. You might be able to hack around it by using getElementById to assign a new src to the frame with JS (I don't know if linking to a new page within the frame would break that though), or by destroying the frame entirely and replacing it with a new one (also with JS).

Upvotes: 2

Related Questions