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

Question

I have project in which I need to create an  lt iframe gt  element using JavaScript and append it to the DOM  After that  I need to insert some content into the  lt iframe gt   It s a widget that will be embedded in third-party websites   I don t set the  src  attribute of the  lt iframe gt  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  lt iframe gt    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  lt iframe gt  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  lt iframe gt   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  lt iframe gt  in any case  as the isolated sandboxed window is crucial to the functionality of this widget   Here s my test code    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN   http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  lang  en  gt     lt head gt       lt meta http-equiv  Content-Type  content  text html  charset utf-8   gt       lt title gt Document domain Test lt  title gt       lt script type  text javascript  gt        document domain    onespot com      set the page s document domain      lt  script gt     lt  head gt     lt body gt       lt p gt This is a paragraph above the  amp lt iframe amp gt   lt  p gt       lt div id  placeholder  gt  lt  div gt       lt p gt This is a paragraph below the  amp lt iframe amp gt   lt  p gt       lt script type  text javascript  gt        var iframe   document createElement  iframe    doc     create  lt iframe gt  element       document getElementById  placeholder   appendChild iframe      append  lt iframe gt  element to the placeholder element       setTimeout function        set a timeout to give browsers a chance to recognize the  lt iframe gt          doc   iframe contentWindow    iframe contentDocument     get a handle on the  lt iframe gt  document         alert doc           if  doc document       HEREIN LIES THE PROBLEM           doc   doc document                    doc body innerHTML     lt h1 gt Hello  lt  h1 gt       add an element          10        lt  script gt     lt  body gt   lt  html gt    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  lt iframe gt   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

User · Answer

I had a similar issue and my solution was this code snippet (tested in IE8/9, Chrome and Firefox)

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);

iframe.src = 'javascript:void((function(){var script = document.createElement(\'script\');' +
  'script.innerHTML = "(function() {' +
  'document.open();document.domain=\'' + document.domain +
  '\';document.close();})();";' +
  'document.write("<head>" + script.outerHTML + "</head><body></body>");})())';

iframe.contentWindow.document.write('<div>foo</div>');

I've tried several methods but this one appeared to be the best. You can find some explanations in my blog post here.

User · Answer

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   lt iframe name      iframeId      gt       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

User · Answer

Have you tried jQuery contents

User · Answer

I just use  lt iframe src  about blank      gt  lt  iframe gt  and it works fine

User · Answer

for IE  the port matters  In between domains  it should be same port

User · Answer

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   lt html gt  lt body gt  lt p gt Hello lt   p gt  lt script gt do things  lt   script gt       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   lt script gt window onload function   document write     lt script gt document domain       document domain        lt      script gt      document close      lt   script gt       At this point the hideousness level is too high for me  I m out  I d do the external HTML like David said

User · Answer

IE works with iframe like all the other browsers  at least for main functions   You just have to keep a set of rules    before you load any javascript in the iframe  that part of js which needs to know about the iframe parent   ensure that the parent has document domain changed  when all iframe resources are loaded  change document domain to be the same as the one defined in parent   You need to do this later because setting domain will cause the iframe resource s request to fail  now you can make a reference for parent window  var winn    window parent now you can make a reference to parent HTML  in order to manipulate it  var parentContent      html   winn document  at this point you should have access to IE parent window document and you can change it as you wont

User · Answer

Following the exceedingly simple method from Andralor here fixed the issue for me   https   github com fancyapps fancyBox issues 766  Essentially  call the iframe again onUpdate      a js-fancybox-iframe   fancybox       type   iframe       scrolling    visible       autoHeight  true      onUpdate  function            iframe fancybox-iframe

User · Answer

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

User · Answer

For me I found the better answer was to check the file permissons that access is being denied to   I just update to jQuery-1 8 0 js and was getting the Access Denied error in  IE9   From Windows Explorer   I right clicked on the file selected the Properties Selected the Security Tab Clicked the Advanced Button Selected the Owner Tab Clicked on Edit Button Selected Administrators MachineName Administrators  Clicked Apply Closed all the windows    Tested the site  No more issue   I had to do the same for the the jQuery-UI script I had just updated as well

User · Answer

well i actually have a very similar problem  but with a twist    say the top level site is a foo com - now i set document domain to a foo com  then in the iframe that i create   own i also set it too a foo com  note that i cant set them too foo com b c there is another iframe in the page pointed to b a foo com  which again uses a foo com but i cant change the script code there   youll note that im essentially setting document domain to what it already would be anyway   but i have to do that to access the other iframe i mentioned from b a foo com  inside my frame  after i set the domain  eventhough all iframes have the same setting  i still get an error when reaching up into the parent in IE 6 7  there are  other things that r really bizaree  in the outside   top level  if i wait for its onload event  and set a timer  eventually i can reach down into the frame i need to access    but i can never reach from bottom up    and i really need to be able to  also if i set everything to be foo com  which as i said i cannot do  IT WORKS  but for some reason  when using the same value as location host    it doesnt and its freaking killing me

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

Examples related to javascript

Examples related to internet-explorer

Examples related to dom

Examples related to iframe

Examples related to document