프로그래밍 방식으로 생성 된 문서 개체에 액세스하려고 할 때 "액세스가 거부되었습니다"JavaScript 오류

Nice programing

프로그래밍 방식으로 생성 된 문서 개체에 액세스하려고 할 때 "액세스가 거부되었습니다"JavaScript 오류

nicepro 2020. 10. 10. 11:01

프로그래밍 방식으로 생성 된 문서 개체에 액세스하려고 할 때 "액세스가 거부되었습니다"JavaScript 오류 (IE-only)</h2> <hr contenteditable='false' data-ke-type='horizontalRule' data-ke-style='style5'/> <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> <hr contenteditable='false' data-ke-type='horizontalRule' data-ke-style='style5'/> <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> <hr contenteditable='false' data-ke-type='horizontalRule' data-ke-style='style5'/> <p>Well yes, the access exception is due to the fact that <code>document.domain</code> must match in your parent and your iframe, and before they do, you won't be able to programmatically set the <code>document.domain</code> property of your iframe.</p> <p>I think your best option here is to point the page to a template of your own:</p> <pre><code>iframe.src = '/myiframe.htm#' + document.domain; </code></pre> <p>And in myiframe.htm:</p> <pre><code>document.domain = location.hash.substring(1); </code></pre> <hr contenteditable='false' data-ke-type='horizontalRule' data-ke-style='style5'/> <p>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</p> <p>then in the iframe that i create / own,i also set it too a.foo.com</p> <p>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)</p> <p>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</p> <p>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</p> <p>there are other things that r really bizaree</p> <p>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</p> <p>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.....</p> <hr contenteditable='false' data-ke-type='horizontalRule' data-ke-style='style5'/> <p>I just use <code><iframe src="about:blank" ...></iframe></code> and it works fine.</p> <hr contenteditable='false' data-ke-type='horizontalRule' data-ke-style='style5'/> <p>for IE, the port matters. In between domains, it should be same port.</p> <hr contenteditable='false' data-ke-type='horizontalRule' data-ke-style='style5'/> <p>Have you tried <a href="http://docs.jquery.com/Traversing/contents" rel="nofollow noreferrer">jQuery.contents()</a> ? </p> <hr contenteditable='false' data-ke-type='horizontalRule' data-ke-style='style5'/> <p>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).</p> <p>I've gotten this to work in IE6/7/8</p> <pre><code>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('<iframe name="' + iframeId + '">'); } 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); } </code></pre> <hr contenteditable='false' data-ke-type='horizontalRule' data-ke-style='style5'/> <p>I had a similar issue and my solution was this code snippet (tested in IE8/9, Chrome and Firefox)</p> <pre><code>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>'); </code></pre> <p>I've tried several methods but this one appeared to be the best. You can find some explanations in my blog post <a href="http://bit.ly/1BtevlS" rel="nofollow">here</a>.</p> <hr contenteditable='false' data-ke-type='horizontalRule' data-ke-style='style5'/> <p>Following the exceedingly simple method from Andralor here fixed the issue for me: <a href="https://github.com/fancyapps/fancyBox/issues/766" rel="nofollow">https://github.com/fancyapps/fancyBox/issues/766</a></p> <p>Essentially, call the iframe again onUpdate:</p> <pre><code>$('a.js-fancybox-iframe').fancybox({ type: 'iframe', scrolling : 'visible', autoHeight: true, onUpdate: function(){ $("iframe.fancybox-iframe"); } }); </code></pre> <hr contenteditable='false' data-ke-type='horizontalRule' data-ke-style='style5'/> <p>IE works with iframe like all the other browsers (at least for main functions). You just have to keep a set of rules:</p> <ul> <li>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.</li> <li><p>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)</p></li> <li><p>now you can make a reference for parent window: var winn = window.parent</p></li> <li>now you can make a reference to parent HTML, in order to manipulate it: var parentContent = $('html', winn.document)</li> <li>at this point you should have access to IE parent window/document and you can change it as you wont</li> </ul> <hr contenteditable='false' data-ke-type='horizontalRule' data-ke-style='style5'/> <p>For me I found the better answer was to check the file permissons that access is being denied to.</p> <p>I just update to jQuery-1.8.0.js and was getting the Access Denied error in IE9.</p> <p>From Windows Explorer</p> <ul> <li>I right clicked on the file selected the Properties</li> <li>Selected the Security Tab</li> <li>Clicked the Advanced Button</li> <li>Selected the Owner Tab</li> <li>Clicked on Edit Button</li> <li>Selected Administrators(MachineName\Administrators)</li> <li>Clicked Apply</li> <li>Closed all the windows.</li> </ul> <p>Tested the site. No more issue.</p> <p>I had to do the same for the the jQuery-UI script I had just updated as well</p> <p>참고URL : <a href='https://stackoverflow.com/questions/1886547/access-is-denied-javascript-error-when-trying-to-access-the-document-object-of' target='_blank' rel='noopener'>https://stackoverflow.com/questions/1886547/access-is-denied-javascript-error-when-trying-to-access-the-document-object-of</a></p>

'Nice programing' 카테고리의 다른 글

"Hello World"WebSocket 예제 만들기 (0)	2020.10.10
C #에서 대리자 사용 (0)	2020.10.10
인증과 리소스 서버 간의 OAuth v2 통신 (0)	2020.10.10
Spring Boot Configuration Annotation Processor를 다시 실행하여 생성 된 메타 데이터를 업데이트합니다. (0)	2020.10.10
업로드 된 파일의 MIME 유형은 브라우저에서 어떻게 결정됩니까? (0)	2020.10.10

현재글프로그래밍 방식으로 생성 된 문서 개체에 액세스하려고 할 때 "액세스가 거부되었습니다"JavaScript 오류

nicepro

프로그래밍 방식으로 생성 된 문서 개체에 액세스하려고 할 때 "액세스가 거부되었습니다"JavaScript 오류

'Nice programing' 카테고리의 다른 글

'Nice programing'의 다른글

티스토리툴바

프로그래밍 방식으로 생성 된 문서 개체에 액세스하려고 할 때 "액세스가 거부되었습니다"JavaScript 오류

'Nice programing' 카테고리의 다른 글

'Nice programing'의 다른글

관련글

티스토리툴바