Cannot access the DOM from tag</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="2021-03-12T11:43:00.953" class="fromnow">Mar 12 '21 at 11:43</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2021-03-12T11:52:33.890" datetime="2021-03-12T11:52:33.890">Mar 12 '21 at 11:52</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 815 times"> <span class="fc-light mr2">Viewed</span> 815 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="66599275" data-ownerid="11043809" data-score="-1"> <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="66599275"> <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> <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>I am trying to load HTML markup from a separate file placed in the same directory. To achieve that, I am following this article: <a class="external-link" href="https://www.filamentgroup.com/lab/html-includes/" rel="nofollow noreferrer">HTML Includes That Work Today</a>.</p> <p>I have two files with the following contents:<br/> <code>page2.html</code>:</p> <pre class="lang-html prettyprint-override"><code><html> <style> div { display: inline-block; background-color: #0902; border: 2px solid green; border-radius: 10px; padding: 20px; font-size: 1.2em; } </style> <body> <div id="x">Contents</div> </body> </html> </code></pre> <p><code>test.html</code>:</p> <pre class="lang-html prettyprint-override"><code><html> <body> <iframe src="page2.html" style="display: none;" onload="alert('onload event called'); this.before(this.contentDocument.body.children[0]); this.remove();"></iframe> </body> </html> </code></pre> <p>I want the contents of <code>page2.html</code> to get appended to the current document. But, I am getting:</p> <pre><code>Uncaught TypeError: Cannot read property 'body' of null at HTMLIFrameElement.onload (test.html:10) </code></pre> <p>What mistake have I made?</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/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</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 owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Mar 12 '21 at 11:43">asked Mar 12 '21 at 11:43</time> <a href="../../users/11043809/puspam" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/11043809.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Puspam" /> </a> <div class="s-user-card--info"> <a href="../../users/11043809/puspam" class="s-user-card--link">Puspam</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">2,137</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="12 silver badges">12</li> <li class="s-award-bling s-award-blingbronze" title="35 bronze badges">35</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </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">1 Answers<span style="display:none;" itemprop="answerCount">1</span></h2> </div> </div> </div> <a name="66599382"></a> <div id="answer-66599382" class="answer accepted-answer" data-answerid="66599382" data-ownerid="19068" data-score="2" itemprop="acceptedAnswer" 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="66599382"> <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="2">2</div> <div class="js-accepted-answer-indicator grid--cell fc-green-500 py6 mtn8"><div class="ta-center"><svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8v-8z"></path></svg></div></div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>This is a cross-origin issue.</p> <p>A frame will not allow you access to the DOM of a page on a different origin.</p> <p>Chrome reports the error you see when you open the HTML document from a local file.</p> <p>Local files are always treated as different origins (imagine if someone emailed you an HTML document, you double clicked it, your email client saved it to a local file and opened in your browser and then started reading files from your hard disk and sending them to the sender of the email).</p> <p>You need to access these documents over HTTP.</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 Mar 12 '21 at 11:50">answered Mar 12 '21 at 11:50</time> <a href="../../users/19068/quentin" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/19068.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Quentin" /> </a> <div class="s-user-card--info"> <a href="../../users/19068/quentin" class="s-user-card--link">Quentin</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">914,110</li> <li class="s-award-bling s-award-blinggold" title="126 gold badges">126</li> <li class="s-award-bling s-award-blingsilver" title="1,211 silver badges">1,211</li> <li class="s-award-bling s-award-bling__bronze" title="1,335 bronze badges">1,335</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-66599382" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="66599382" 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-117732091" class="comment js-comment " data-comment-id="117732091" data-comment-owner-id="3702797" 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="comment117732091_66599382"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">"Local files are always treated as different origins" not always no, this is a per browser rule that has changed over time, and even depends on which API is making the call... For instance in Firefox OP would have been able to access that document since it's in the same directory. However if they did try to fetch it through AJAX it would have failed there too. And regarding your example this would imply that the "bad script" knows which file name to request... Not that big of a deal.</span> – <a href="../../users/3702797/kaiido" title="123,334 reputation" class="comment-user ">Kaiido</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/66599275/cannot-access-the-dom-from-iframe-tag#comment117732091_66599382"><span title="2021-03-12T12:15:41.510 License: CC BY-SA 4.0" class="relativetime-clean">Mar 12 '21 at 12:15</span></a></span> </div> </div> </li> <li id="comment-117734436" class="comment js-comment " data-comment-id="117734436" data-comment-owner-id="19068" 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="comment117734436_66599382"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@Kaiido — Firefox [fixed that security hole in version 68](https://www.mozilla.org/en-US/security/advisories/mfsa2019-21/#CVE-2019-11730), and you don't need to known the filename, you just need to guess it (and there are plenty of files which common software stores in standard locations that could be guessed).</span> – <a href="../../users/19068/quentin" title="914,110 reputation" class="comment-user ">Quentin</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/66599275/cannot-access-the-dom-from-iframe-tag#comment117734436_66599382"><span title="2021-03-12T13:47:07.650 License: CC BY-SA 4.0" class="relativetime-clean">Mar 12 '21 at 13:47</span></a></span> </div> </div> </li> <li id="comment-117734736" class="comment js-comment " data-comment-id="117734736" data-comment-owner-id="3702797" 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="comment117734736_66599382"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">The link you pasted is about `fetch`(i.e "AJAX"). In Firefox 88 iframes can still access resource in the same directory, you can still load an image or video in a same-origin way and thus read their content etc.</span> – <a href="../../users/3702797/kaiido" title="123,334 reputation" class="comment-user ">Kaiido</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/66599275/cannot-access-the-dom-from-iframe-tag#comment117734736_66599382"><span title="2021-03-12T13:56:15.107 License: CC BY-SA 4.0" class="relativetime-clean">Mar 12 '21 at 13:56</span></a></span> </div> </div> </li> <li id="comment-117735092" class="comment js-comment " data-comment-id="117735092" data-comment-owner-id="19068" 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="comment117735092_66599382"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@Kaiido — I just tested it. Firefox was unable to read the contents of the file in the iframe with JavaScript. (And displaying images and video across origin has never been forbidden, just reading the data into JavaScript).</span> – <a href="../../users/19068/quentin" title="914,110 reputation" class="comment-user ">Quentin</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/66599275/cannot-access-the-dom-from-iframe-tag#comment117735092_66599382"><span title="2021-03-12T14:08:25.067 License: CC BY-SA 4.0" class="relativetime-clean">Mar 12 '21 at 14:08</span></a></span> </div> </div> </li> <li id="comment-117735849" class="comment js-comment " data-comment-id="117735849" data-comment-owner-id="3702797" 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="comment117735849_66599382"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">You probably did it wrong. It works just fine opening an html file from the same directory through an iframe and then accessing the loaded document from the main page in Firefox. And I explicitly said "you can still load an image or video in a same-origin way and thus read their content" That's the whole point: In Firefox you can read the data from medias loaded from the file system in same directory. E.g you can read the pixels of images or videos through a canvas, you can read the data of an audio through the Web Audio API etc.</span> – <a href="../../users/3702797/kaiido" title="123,334 reputation" class="comment-user ">Kaiido</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/66599275/cannot-access-the-dom-from-iframe-tag#comment117735849_66599382"><span title="2021-03-12T14:33:41.403 License: CC BY-SA 4.0" class="relativetime-clean">Mar 12 '21 at 14:33</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>