tags:

views:

2459

answers:

4
+2  Q: 

"Access is denied" JavaScript error when trying to access the document object of a programmatically-created <iframe> (IE-only)

I have project in which I need to create an <iframe> element using JavaScript and append it to the DOM. After that, I need to insert some content into the <iframe>. It's a widget that will be embedded in third-party websites.

I don't set the "src" attribute of the <iframe> since I don't want to load a page; rather, it is used to isolate/sandbox the content that I insert into it so that I don't run into CSS or JavaScript conflicts with the parent page. I'm using JSONP to load some HTML content from a server and insert it in this <iframe>.

I have this working fine, with one serious exception - if the document.domain property is set in the parent page (which it may be in certain environments in which this widget is deployed), Internet Explorer (probably all versions, but I've confirmed in 6, 7, and 8) gives me an "Access is denied" error when I try to access the document object of this <iframe> I've created. It doesn't happen in any other browsers I've tested in (all major modern ones).

This makes some sense, since I'm aware that Internet Explorer requires you to set the document.domain of all windows/frames that will communicate with each other to the same value. However, I'm not aware of any way to set this value on a document that I can't access.

Is anyone aware of a way to do this - somehow set the document.domain property of this dynamically created <iframe>? Or am I not looking at it from the right angle - is there another way to achieve what I'm going for without running into this problem? I do need to use an <iframe> in any case, as the isolated/sandboxed window is crucial to the functionality of this widget.

Here's my test code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Document.domain Test</title>
    <script type="text/javascript">
      document.domain = 'onespot.com'; // set the page's document.domain
    </script>
  </head>
  <body>
    <p>This is a paragraph above the &lt;iframe&gt;.</p>
    <div id="placeholder"></div>
    <p>This is a paragraph below the &lt;iframe&gt;.</p>
    <script type="text/javascript">
      var iframe = document.createElement('iframe'), doc; // create <iframe> element
      document.getElementById('placeholder').appendChild(iframe); // append <iframe> element to the placeholder element
      setTimeout(function() { // set a timeout to give browsers a chance to recognize the <iframe>
        doc = iframe.contentWindow || iframe.contentDocument; // get a handle on the <iframe> document
        alert(doc);
        if (doc.document) { // HEREIN LIES THE PROBLEM
          doc = doc.document;
        }
        doc.body.innerHTML = '<h1>Hello!</h1>'; // add an element
      }, 10);
    </script>
  </body>
</html>

I've hosted it at:

http://troy.onespot.com/static/access_denied.html

As you'll see if you load this page in IE, at the point that I call alert(), I do have a handle on the window object of the <iframe>; I just can't get any deeper, into its document object.

Thanks very much for any help or suggestions! I'll be indebted to whomever can help me find a solution to this.

+1  A: 

Have you tried jQuery.contents() ?

Deniss Kozlovs  2009-12-11 08:14:49
Deniss, good suggestion, and thank you - I gave this a shot (see <http://troy.onespot.com/static/access_denied_jquery.html>) but got a similar error; this time it's "Permission denied" within the jQuery script. I suspect it's the same or a similar roadblock.
Bungle  2009-12-11 08:38:49
Sorry, that URL got mangled. Try: http://troy.onespot.com/static/access_denied_jquery.html
Bungle  2009-12-11 08:39:22
Why would jQuery have magical access to the iframe's document?
Tim Down  2009-12-11 09:17:48
@Tim Down: I don't think the assumption was that jQuery would have magical access; rather, jQuery often has some nifty tricks up its sleeve to solve cross-browser issues, and might have already implemented a workaround. I agree it didn't bode well, but I think it was a good suggestions and worth a shot.
Bungle  2009-12-11 10:14:02
+2  A: 

Well yes, the access exception is due to the fact that document.domain must match in your parent and your iframe, and before they do, you won't be able to programmatically set the document.domain property of your iframe.

I think your best option here is to point the page to a template of your own:

iframe.src = '/myiframe.htm#' + document.domain;

And in myiframe.htm:

document.domain = location.hash.substring(1);
David Hedlund  2009-12-11 08:18:33
Thanks, David - I appreciate what appears to be a solid suggestion, but I'd rather not take this approach unless it's a last resort. If I understand correctly, the template would need to live on the same domain as the parent page (is that right?), and that would complicate implementation for our customers. Ideally the implementation should be as simple as inserting a few lines of JavaScript in their pages' HTML.
Bungle  2009-12-11 08:34:18
Yes, the solution does require another file on that very domain. I'm afraid that's the best I can come up with, though.
David Hedlund  2009-12-11 08:43:50
@Bungle: I think it's your only option.
Tim Down  2009-12-11 09:15:49
+1  A: 

if the document.domain property is set in the parent page, Internet Explorer gives me an "Access is denied"

Sigh. Yeah, it's an IE issue (bug? difficult to say as there is no documented standard for this kind of unpleasantness). When you create a srcless iframe it receives a document.domain from the parent document's location.host instead of its document.domain. At that point you've pretty much lost as you can't change it.

A horrendous workaround is to set src to a javascript: URL (urgh!):

 iframe.src= "javascript:'<html><body><p>Hello<\/p><script>do things;<\/script>'";

But for some reason, such a document is unable to set its own document.domain from script in IE (good old “unspecified error”), so you can't use that to regain a bridge between the parent(*). You could use it to write the whole document HTML, assuming the widget doesn't need to talk to its parent document once it's instantiated.

However iframe JavaScript URLs don't work in Safari, so you'd still need some kind of browser-sniffing to choose which method to use.

*: For some other reason, you can, in IE, set document.domain from a second document, document.written by the first document. So this works:

if (isIE)
    iframe.src= "javascript:'<script>window.onload=function(){document.write(\\'<script>document.domain=\\\""+document.domain+"\\\";<\\\\/script>\\');document.close();};<\/script>'";

At this point the hideousness level is too high for me, I'm out. I'd do the external HTML like David said.

bobince  2009-12-11 15:15:08
@bobince: You're awesome! I actually did stumble upon this very approach late last night after a lot more Googling. In fact, I think I might have found an even more robust, and potentially less kludgy cross-browser solution: http://www.telerik.com/community/forums/aspnet-ajax/editor/document-domain-access-denied-in-ie-6.aspx - notice Jeff Tucker's post from August 21. Setting the <iframe>'s "src" attribute to "javascript:void((function(){document.open();document.domain=\'tld.com\';document.close();})())" seems to do the trick, and in a cross-browser way. It also works in Safari (at least v3+).
Bungle  2009-12-11 18:29:16
Here's a test page illustrating my previous comment: http://troy.onespot.com/static/access_denied_test.html
Bungle  2009-12-11 18:29:57
Oh great! That's much better! Interesting that doing it directly should work... normally, a javascript: URL would be executed in the context of its parent, but that seems not to be the case with iframe src. You can probably also lose the `void()` call, since the function already returns `undefined`.
bobince  2009-12-11 19:03:48
Incidentally you get an error reloading the page in IE with this, as IE tries to retain the iframe location... argh. Dunno if there's a way around that.
bobince  2009-12-11 19:05:09
@bobince: Oh man, you're right. Thanks for pointing that out; I was so excited that it worked the first time that I didn't bother to reload. What do you mean by IE trying to retain the <iframe> location? I've got to find a solution to this so I'll keep you posted - please do the same if you happen to find anything.
Bungle  2009-12-12 04:37:53
A: 

It seems that the problem with IE comes when you try and access the iframe via the document.frames object - if you store a reference to the created iframe in a variable then you can access the injected iframe via the variable (my_iframe in the code below).

I've gotten this to work in IE6/7/8

var my_iframe; var iframeId = "my_iframe_name" if (navigator.userAgent.indexOf('MSIE') !== -1) { // IE wants the name attribute of the iframe set my_iframe = document.createElement(''); } else { my_iframe = document.createElement('iframe'); }

iframe.setAttribute("src", "javascript:void(0);"); iframe.setAttribute("scrolling", "no"); iframe.setAttribute("frameBorder", "0"); iframe.setAttribute("name", iframeId);

var is = iframe.style; is.border = is.width = is.height = "0px";

if (document.body) { document.body.appendChild(my_iframe); } else { document.appendChild(my_iframe); }

 2010-03-22 20:19:35

related questions

What JavaScript patterns do you use most?
Javascript events
What style do you use for creating an "class" in JavaScript?
Graphing JavaScript Library
What's the difference in closure style
Getting the text from a drop-down box
How to specify javascript to run when ModalPopupExtender is shown
Length of Javascript Associative Array
How Do I Post and then redirect to an external URL from ASP.Net?
How to set up a CSS switcher in ASP.NET
Wrapping lists into columns
Javascript keyboard events primer? (or rather: help me with my custom dropdown)
Http Auth in a Firefox 3 bookmarklet
Best Debugging Tools for JavaScript/xulrunner Development
How can I turn a string of HTML into a DOM object in a Firefox extension?
Call ASP.NET Function From Javascript?
Javascript troubleshooting tools in IE
MAC addresses in JavaScript
Capturing TAB key in text box
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
Triple Quotes? How do I delimit a databound Javascript string parameter in ASP.NET?
ASP .Net Custom Client-Side Validation
What JavaScript library would you choose for a new project and why?
Detecting font in JavaScript