Javascript – “Access is denied” JavaScript error when trying to access the document object of a programmatically-created (IE-only)</h1> </header> <p style='font-size:1.2em'><span class="mr-2 badge badge-success">document</span><span class="mr-2 badge badge-info">dom</span><span class="mr-2 badge badge-warning">iframe</span><span class="mr-2 badge badge-primary">internet explorer</span><span class="mr-2 badge badge-danger">javascript</span></p> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8728145350222960" data-ad-slot="5017103864" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="entry-content"> <p>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.</p> <p>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>.</p> <p>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).</p> <p>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.</p> <p>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.</p> <p>Here's my test code:</p> <pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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> </code></pre> <p>I've hosted it at:</p> <p><a href="http://troy.onespot.com/static/access_denied.html" rel="noreferrer">http://troy.onespot.com/static/access_denied.html</a></p> <p>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.</p> <p>Thanks very much for any help or suggestions! I'll be indebted to whomever can help me find a solution to this.</p> </div> <div id="comments" class="comments-area"> <div class="row"> <div class="col-12"> <div class="mt-3 border-bottom border-success"> <h4 class="text-success"><i class='fa fa-check-circle text-success mr-3'></i><span>Best Answer</span></h4> </div> <div class='bg-transparent mb-3'> <blockquote> <p>if the document.domain property is set in the parent page, Internet Explorer gives me an "Access is denied"</p> </blockquote> <p>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 <code>document.domain</code> from the parent document's <code>location.host</code> instead of its <code>document.domain</code>. At that point you've pretty much lost as you can't change it.</p> <p>A horrendous workaround is to set <code>src</code> to a javascript: URL (urgh!):</p> <pre><code> iframe.src= "javascript:'<html><body><p>Hello<\/p><script>do things;<\/script>'"; </code></pre> <p>But for some reason, such a document is unable to set its own <code>document.domain</code> from script in IE (good old “unspecified error”), so you can't use that to regain a bridge between the parent(). You <em>could</em> use it to write the whole document HTML, assuming the widget doesn't need to talk to its parent document once it's instantiated.</p> <p>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.</p> <p>: For some other reason, you <em>can</em>, in IE, set <code>document.domain</code> from a second document, document.written by the first document. So this works:</p> <pre><code>if (isIE) iframe.src= "javascript:'<script>window.onload=function(){document.write(\\'<script>document.domain=\\\""+document.domain+"\\\";<\\\\/script>\\');document.close();};<\/script>'"; </code></pre> <p>At this point the hideousness level is too high for me, I'm out. I'd do the external HTML like David said.</p> </div> </div> <div class="col-4"></div> </div> </div> <div id="related-embeded" class="related-embeded-area"><div class="row"><div class="col-12"><div class="mt-3 border-bottom border-success"><h4 class="text-info"><i class='fa fa-check-circle text-info mr-3'></i><span>Related Solutions</span></h4></div><div class="mt-3 mb-3 border-bottom"><h5><a href='https://itecnotes.com/tecnote/javascript-the-most-efficient-way-to-deep-clone-an-object-in-javascript/'>Javascript – the most efficient way to deep clone an object in JavaScript</a></h5></div><div class='bg-transparent mb-3'> <h1>Native deep cloning</h1> <p>It's called "structured cloning", works experimentally in Node 11 and later, and hopefully will land in browsers. See <a href="https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript/10916838#10916838" rel="nofollow ugc">this answer</a> for more details.</p> <h1>Fast cloning with data loss - JSON.parse/stringify</h1> <p>If you do not use <code>Date</code>s, functions, <code>undefined</code>, <code>Infinity</code>, RegExps, Maps, Sets, Blobs, FileLists, ImageDatas, sparse Arrays, Typed Arrays or other complex types within your object, a very simple one liner to deep clone an object is:</p> <p><code>JSON.parse(JSON.stringify(object))</code></p> <p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>const a = { string: 'string', number: 123, bool: false, nul: null, date: new Date(), // stringified undef: undefined, // lost inf: Infinity, // forced to 'null' re: /.*/, // lost } console.log(a); console.log(typeof a.date); // Date object const clone = JSON.parse(JSON.stringify(a)); console.log(clone); console.log(typeof clone.date); // result of .toISOString()</code></pre> </div> </div> <p></p> <p>See <a href="https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript/5344074#5344074" rel="nofollow ugc">Corban's answer</a> for benchmarks.</p> <h1>Reliable cloning using a library</h1> <p>Since cloning objects is not trivial (complex types, circular references, function etc.), most major libraries provide function to clone objects. <strong>Don't reinvent the wheel</strong> - if you're already using a library, check if it has an object cloning function. For example,</p> <ul> <li>lodash - <a href="https://lodash.com/docs#cloneDeep" rel="noreferrer nofollow ugc"><code>cloneDeep</code></a>; can be imported separately via the <a href="https://www.npmjs.com/package/lodash.clonedeep" rel="noreferrer nofollow ugc">lodash.clonedeep</a> module and is probably your best choice if you're not already using a library that provides a deep cloning function</li> <li>AngularJS - <a href="https://docs.angularjs.org/api/ng/function/angular.copy" rel="noreferrer nofollow ugc"><code>angular.copy</code></a></li> <li>jQuery - <a href="https://api.jquery.com/jquery.extend/#jQuery-extend-deep-target-object1-objectN" rel="noreferrer nofollow ugc"><code>jQuery.extend(true, { }, oldObject)</code></a>; <code>.clone()</code> only clones DOM elements</li> <li>just library - <a href="https://www.npmjs.com/package/just-clone" rel="noreferrer nofollow ugc"><code>just-clone</code></a>; Part of a library of zero-dependency npm modules that do just do one thing. Guilt-free utilities for every occasion.</li> </ul> <h1>ES6 (<em>shallow</em> copy)</h1> <p>For completeness, note that ES6 offers two shallow copy mechanisms: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign" rel="noreferrer nofollow ugc"><code>Object.assign()</code></a> and the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax" rel="noreferrer nofollow ugc">spread syntax</a>. which copies values of all enumerable own properties from one object to another. For example:</p> <pre><code>var A1 = {a: "2"}; var A2 = Object.assign({}, A1); var A3 = {...A1}; // Spread Syntax </code></pre> </div><div class="mt-3 mb-3 border-bottom"><h5><a href='https://itecnotes.com/tecnote/javascript-how-to-efficiently-count-the-number-of-keys-properties-of-an-object-in-javascript/'>Javascript – How to efficiently count the number of keys/properties of an object in JavaScript</a></h5></div><div class='bg-transparent mb-3'> <p>To do this in any <em><a href="https://en.wikipedia.org/wiki/ECMAScript#5th_Edition" rel="noreferrer nofollow ugc">ES5</a>-compatible environment</em>, such as <a href="http://nodejs.org" rel="noreferrer nofollow ugc">Node.js</a>, Chrome, <a href="https://en.wikipedia.org/wiki/Internet_Explorer_9" rel="noreferrer nofollow ugc">Internet Explorer 9+</a>, Firefox 4+, or Safari 5+:</p> <pre class="lang-js prettyprint-override"><code>Object.keys(obj).length </code></pre> <ul> <li><a href="http://kangax.github.com/es5-compat-table/" rel="noreferrer nofollow ugc">Browser compatibility</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys" rel="noreferrer nofollow ugc">Object.keys documentation</a> (includes a method you can add to non-ES5 browsers)</li> </ul> </div></div></div></div> </div> <div class="col-12 col-md-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8728145350222960" data-ad-slot="2985450245" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class='mt-3 ml-4 border-bottom border-success'><h6><span>Related Topic</span></h6></div><ul class='list-group list-group-flush'><li class="list-group-item"><a href='https://itecnotes.com/tecnote/javascript-the-best-way-to-add-options-to-a-select-from-a-javascript-object-with-jquery/'>Javascript – the best way to add options to a select from a JavaScript object with jQuery</a></li><li class="list-group-item"><a href='https://itecnotes.com/tecnote/javascript-invoking-javascript-code-in-an-iframe-from-the-parent-page/'>Javascript – Invoking JavaScript code in an iframe from the parent page</a></li><li class="list-group-item"><a href='https://itecnotes.com/tecnote/javascript-how-to-access-the-matched-groups-in-a-javascript-regular-expression/'>Javascript – How to access the matched groups in a JavaScript regular expression</a></li><li class="list-group-item"><a href='https://itecnotes.com/tecnote/javascript-how-to-find-event-listeners-on-a-dom-node-in-javascript-or-in-debugging/'>Javascript – How to find event listeners on a DOM node in JavaScript or in debugging</a></li><li class="list-group-item"><a href='https://itecnotes.com/tecnote/javascript-how-to-loop-through-a-plain-javascript-object-with-the-objects-as-members/'>Javascript – How to loop through a plain JavaScript object with the objects as members</a></li><li class="list-group-item"><a href='https://itecnotes.com/tecnote/javascript-html5-canvas-vs-svg-vs-div/'>Javascript – HTML5 Canvas vs. SVG vs. div</a></li><li class="list-group-item"><a href='https://itecnotes.com/tecnote/javascript-why-does-the-javascript-code-receive-a-no-access-control-allow-origin-header-is-present-on-the-requested-resource-error-while-postman-does-not/'>Javascript – Why does the JavaScript code receive a “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error, while Postman does not</a></li></ul> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8728145350222960" data-ad-slot="8970621700" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <footer class="entry-footer"> </footer> </article> </div> </div> </div> </main> </div> </div> <footer id="colophon" class="site-footer"> <div class="site-info"> </div> </footer> </div> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=1.12.4' id='jquery-js'></script> <script type='text/javascript' id='jquery-js-after'> jQuery(document).ready(function ($) { const elements = document.getElementsByClassName("js-post-notice"); while(elements.length > 0){ elements[0].parentNode.removeChild(elements[0]); } }) </script> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js?ver=4.3.1' id='bootstrap4-js'></script> <script type='text/javascript' src='https://itecnotes.com/wp-includes/js/comment-reply.min.js?ver=5.9.10' id='comment-reply-js'></script> </body> </html>