How can I prevent an iframe from accessing parent frame?

Question

I've got a page with an iframe. The page and the source of the iframe are in different domains. Inside the iframe I'm using a rich text editor called CuteEditor (which has turned out to be not so cute). There are certain javascript functions in CuteEditor which try to access 'document' but the browser denies access since they're not in the same domain.

Here's the exact error:

Permission denied to access property 'document' http://dd.byu.edu/plugins/cuteeditor_files/Scripts/Dialog/DialogHead.js Line 1

Editing the javascript is out of the question because it's been minfied and obfuscated so all the variable names are cryptic.

Using a different editor is currently out of the question because this is a work project and this is the editor I've been told to use.

Is there a way to keep the iframe self-contained? So it does everything inside the iframe and doesn't try to break out to the parent frame?

Answer 1

If the child iframe is loaded from a different domain, then it will not be able to access the parent page or DOM.

However, there is a still a possible vulnerability to man-in-the-middle attack as follows. Suppose your page loads off http://yoursite.com and the iframe goes to http://badsite.org

• first http://badsite.org redirects to http://yoursite.com/badpage

• This is the step that requires a man-in-the-middle attack. The attacker must either be able to get between the user and yoursite.com, or control the answers to your DNS lookup. This is easier than it sounds -- anyone who has administrative control over a public WiFi access point could do it (think Starbucks, hotels, airports.) The goal is to serve the content of http://yoursite.com/badpage from the attacker's site, not your actual site.

• The attacker can then serve whatever malicious code they like from the (fake) http://yoursite.org/badpage. Because this is in the same domain as the main page, it will have access to the parent DOM.

The HTML5 iframe sandbox attribute seems to be the way to avoid this. You can read the spec, but the best description might be here.

This seems to be supported on Chrome, IE10, FireFox, Safari.

The spec says that if the "allow-same-origin" attribute is not set, "the content is treated as being from a unique origin." This should prevent your child iframe from accessing any part of the parent's DOM, no matter what the browser thinks the URL is.