Document.domain and s breaks the "Back" button in Internet Explorer</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2009-12-22T22:57:09.897" class="fromnow">Dec 22 '09 at 22:57</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2009-12-23T14:29:57.237" datetime="2009-12-23T14:29:57.237">Dec 23 '09 at 14:29</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 3,715 times"> <span class="fc-light mr2">Viewed</span> 3,715 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="1949749" data-ownerid="167911" data-score="4"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="1949749"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="4">4</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>This is a very urgent problem and I'd be forever indebted to anyone who can lend some insight.</p> <p>I'm going to be deploying a widget (called the "ISM") to a third-party site. That site uses the document.domain JavaScript property to relax cross-domain restrictions (e.g., setting document.domain in "a.example.com" and "b.example.com" to both "example.com" so they can access each other's DOMs).</p> <p>This causes problems with my script in Internet Explorer due to the way that I construct an <iframe> that is used to display my widget's HTML content. In Internet Explorer, using document.domain on a page, and then creating an <iframe> with JavaScript, will cause you to be immediately "locked out" of the <iframe> - i.e., you can create it, but it's not created in the correct document.domain, so you're not able to access its DOM due to security restrictions. This isn't a problem in any other browser.</p> <p>To see what I'm talking about, load this page in IE:</p> <p><a class="external-link" href="http://troy.onespot.com/static/3263/stage1.html" rel="nofollow noreferrer">http://troy.onespot.com/static/3263/stage1.html</a></p> <p>You should see a JavaScript error: "Access is denied."</p> <p>To get around this, I'm setting the dynamically created <iframe>'s "src" attribute to load a static HTML file that's hosted in the same domain (different subdomain), and setting its document.domain property to the appropriate value:</p> <p><a class="external-link" href="http://troy.onespot.com/static/3263/stage2.html" rel="nofollow noreferrer">http://troy.onespot.com/static/3263/stage2.html</a></p> <p>That gets around the security issue, and lets me write the document I originally wanted to write to the <iframe>:</p> <p><a class="external-link" href="http://troy.onespot.com/static/3263/stage3.html" rel="nofollow noreferrer">http://troy.onespot.com/static/3263/stage3.html</a></p> <p>With that document in place, my widget does some polling to our server to get some HTML content that I want to insert into another <iframe>, which will be visible to visitors of the parent page. I've roughly simulated that here (using static content, not actually contacting our server):</p> <p><a class="external-link" href="http://troy.onespot.com/static/3263/stage4.html" rel="nofollow noreferrer">http://troy.onespot.com/static/3263/stage4.html</a></p> <p>Here comes the problem. When I get that HTML content and insert it into the second <iframe>, I now face an unusual issue with a broken "Back" button. This happens in Firefox 3.0 and all version of IE (possibly other browsers), though it does not happen in some browsers I've tested (Firefox 3.5, Safari, Chrome). See this page:</p> <p><a class="external-link" href="http://troy.onespot.com/static/3263/stage5.html" rel="nofollow noreferrer">http://troy.onespot.com/static/3263/stage5.html</a></p> <p>If you click the "Google" link, all seems fine. But, when navigating back to the previous page (that has the latter test script), another JavaScript error is introduced: "Permission denied." This does not terminate the script, and does not appear to have any ill effects, other than the fact that I assume it's connected to the broken "Back" button functionality, which is a very big problem - the one I'm desperately trying to solve. I'm at a loss to debug this error since its call stack starts and stops in the jQuery script.</p> <p>You can also encounter this error - with more serious symptoms - by going to the last link above (stage5.html - clear your browser cache first). Click the "Stage 5 (Again)" link, then, after that page has loaded, click the "Back" button.</p> <p>The "Back" button is completely broken! You can't go anywhere except to another URL.</p> <p>This is the problem that I need to solve as soon as possible. Any insights or help would be <em>extremely</em> appreciated!</p> <p>I can't deviate from this method too much, so outside-the-box suggestions are definitely welcome, but I may not be able to use them due to the constraints of the widget's specifications. I would prefer to understand why the "Back" button is breaking and how to fix it, along with the "Permission denied" error related to jQuery.</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/jquery" class="post-tag js-gps-track" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/internet-explorer" class="post-tag js-gps-track" title="show questions tagged 'internet-explorer'" rel="tag">internet-explorer</a> <a href="../../questions/tagged/iframe" class="post-tag js-gps-track" title="show questions tagged 'iframe'" rel="tag">iframe</a> <a href="../../questions/tagged/history" class="post-tag js-gps-track" title="show questions tagged 'history'" rel="tag">history</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2009-12-22T23:22:26.297" class="relativetime">Dec 22 '09 at 23:22</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Bungle</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Dec 22 '09 at 22:57">asked Dec 22 '09 at 22:57</time> <a href="../../users/167911/bungle" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/167911.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Bungle" /> </a> <div class="s-user-card--info"> <a href="../../users/167911/bungle" class="s-user-card--link">Bungle</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">19,392</li> <li class="s-award-bling s-award-blinggold" title="24 gold badges">24</li> <li class="s-award-bling s-award-blingsilver" title="79 silver badges">79</li> <li class="s-award-bling s-award-blingbronze" title="106 bronze badges">106</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-1949749" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="1949749" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-1861634" class="comment js-comment " data-comment-id="1861634" data-comment-owner-id="138071" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment1861634_1949749"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">http://stackoverflow.com/questions/1796619/how-to-access-the-content-of-an-iframe-with-jquery/1796672#1796672</span> – <a href="../../users/138071/andres-descalzo" title="14,887 reputation" class="comment-user ">andres descalzo</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1949749/document-domain-and-iframe-s-breaks-the-back-button-in-internet-explorer#comment1861634_1949749"><span title="2009-12-23T01:38:54.727 License: CC BY-SA 2.5" class="relativetime-clean">Dec 23 '09 at 01:38</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">2 Answers<span style="display:none;" itemprop="answerCount">2</span></h2> </div> </div> </div> <a name="1951125"></a> <div id="answer-1951125" class="answer " data-answerid="1951125" data-ownerid="231675" data-score="3" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="1951125"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="3">3</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>It's really hard to try out fixes for this because of the multiple domains. One thing I've heard is that IE treats a blank src or "about:blank" as a different domain, but it treats 'javascript:""' as the same domain. Have you experimented with changing stage one to set the iframe src to things like:</p> <pre><code>iframe.src = 'javascript:""' </code></pre> <p>Or:</p> <pre><code>iframe.src = 'javascript:parent.getFrameHTML()' </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Dec 23 '09 at 07:01">answered Dec 23 '09 at 07:01</time> <a href="../../users/231675/annie" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/231675.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Annie" /> </a> <div class="s-user-card--info"> <a href="../../users/231675/annie" class="s-user-card--link">Annie</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">6,621</li> <li class="s-award-bling s-award-blingsilver" title="22 silver badges">22</li> <li class="s-award-bling s-award-blingbronze" title="27 bronze badges">27</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-1951125" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="1951125" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-1896564" class="comment js-comment " data-comment-id="1896564" data-comment-owner-id="126229" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment1896564_1951125"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Beyond other likely problems, if you try to use this solution on a HTTPS-page, you'll get a Mixed Content error.</span> – <a href="../../users/126229/ericlaw" title="56,563 reputation" class="comment-user ">EricLaw</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1949749/document-domain-and-iframe-s-breaks-the-back-button-in-internet-explorer#comment1896564_1951125"><span title="2009-12-30T16:28:02.223 License: CC BY-SA 2.5" class="relativetime-clean">Dec 30 '09 at 16:28</span></a></span> </div> </div> </li> <li id="comment-1897267" class="comment js-comment " data-comment-id="1897267" data-comment-owner-id="231675" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment1897267_1951125"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">That's interesting, because people often set the frame src to "javascript:void(0)" to avoid mixed content warnings: http://ajaxian.com/archives/ie-frame-bug</span> – <a href="../../users/231675/annie" title="6,621 reputation" class="comment-user ">Annie</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1949749/document-domain-and-iframe-s-breaks-the-back-button-in-internet-explorer#comment1897267_1951125"><span title="2009-12-30T18:17:48.447 License: CC BY-SA 2.5" class="relativetime-clean">Dec 30 '09 at 18:17</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="1953109"></a> <div id="answer-1953109" class="answer " data-answerid="1953109" data-ownerid="53472" data-score="1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="1953109"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Part of the problem seems to be that IE (at least IE 7) adds two entries to the history named "Domain" when I click on the "Stage 5 Again" link. When you use the little drop-down arrow next to the Back button you'll see the history of pages allowing you to step back more than one step. I see the previous two entries are listed as "Domain" and clicking either of those brings me to the same page. The fourth spot (after Current Page, Domain, Domain) is the correct "ISM Back Button" link to the original stage5.html page.</p> <p>So the problem isn't exactly that the back button doesn't work, but just that the entries in the history are added and so the back button takes you to the wrong place. I don't have an answer as to why those "Domain" entries are being added to the history, but hopefully this helps point you in a useful direction.</p> <p>Good luck!</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Dec 23 '09 at 14:29">answered Dec 23 '09 at 14:29</time> <a href="../../users/53472/peter-jacoby" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/53472.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Peter Jacoby" /> </a> <div class="s-user-card--info"> <a href="../../users/53472/peter-jacoby" class="s-user-card--link">Peter Jacoby</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">2,406</li> <li class="s-award-bling s-award-blingsilver" title="25 silver badges">25</li> <li class="s-award-bling s-award-blingbronze" title="26 bronze badges">26</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>