Can the source HTML/CSS/JS of a remote site shown in an be accessed?</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="2023-07-08T16:25:44.217" class="fromnow">Jul 08 '23 at 16:25</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2023-07-14T21:43:12.823" datetime="2023-07-14T21:43:12.823">Jul 14 '23 at 21:43</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 26 times"> <span class="fc-light mr2">Viewed</span> 26 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="76643916" data-ownerid="2184308" 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="76643916"> <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>It is obvious that much thought has gone into the design of Web infrastructure to provide good security for server-side Web programming. Yet no attention seems to be put on the issue of providing client-side security for material displayed by browsers, other than by the use of commercial security mechanisms for streaming commercial video content through our browsers.</p> <p>I looked in the excellent MDN Web Docs (<a class="external-link" href="https://developer.mozilla.org/en-US/docs" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs</a>), but could not find any assurance that <code><iframe></code> provides or does not provide client-side security. Does it?</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/security" class="post-tag js-gps-track" title="show questions tagged 'security'" rel="tag">security</a> <a href="../../questions/tagged/client" class="post-tag js-gps-track" title="show questions tagged 'client'" rel="tag">client</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="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Jul 14 '23 at 21:43">edited Jul 14 '23 at 21:43</time> <a href="../../users/11107541/starball" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/11107541.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="starball" /> </a> <div class="s-user-card--info"> <a href="../../users/11107541/starball" class="s-user-card--link">starball</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">20,030</li> <li class="s-award-bling s-award-blinggold" title="7 gold badges">7</li> <li class="s-award-bling s-award-blingsilver" title="43 silver badges">43</li> <li class="s-award-bling s-award-blingbronze" title="238 bronze badges">238</li> </ul> </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 Jul 08 '23 at 16:25">asked Jul 08 '23 at 16:25</time> <a href="../../users/2184308/david-spector" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2184308.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="David Spector" /> </a> <div class="s-user-card--info"> <a href="../../users/2184308/david-spector" class="s-user-card--link">David Spector</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1,520</li> <li class="s-award-bling s-award-blingsilver" title="15 silver badges">15</li> <li class="s-award-bling s-award-bling__bronze" title="21 bronze badges">21</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-76643916" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="76643916" 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-135152702" class="comment js-comment " data-comment-id="135152702" data-comment-owner-id="11107541" 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="comment135152702_76643916"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">1) accessed by _what_? 2) https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy</span> – <a href="../../users/11107541/starball" title="20,030 reputation" class="comment-user ">starball</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/76643916/can-the-source-html-css-js-of-a-remote-site-shown-in-an-iframe-be-accessed#comment135152702_76643916"><span title="2023-07-10T22:51:55.013 License: CC BY-SA 4.0" class="relativetime-clean">Jul 10 '23 at 22:51</span></a></span> </div> </div> </li> <li id="comment-135177471" class="comment js-comment " data-comment-id="135177471" data-comment-owner-id="2184308" 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="comment135177471_76643916"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Your quoted page states that JavaScript cannot read DOM data across different domains. Yet I can access an iframe on a remote site from my local computer. Isn't this different domains? The hostnames are different, at least.</span> – <a href="../../users/2184308/david-spector" title="1,520 reputation" class="comment-user owner">David Spector</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/76643916/can-the-source-html-css-js-of-a-remote-site-shown-in-an-iframe-be-accessed#comment135177471_76643916"><span title="2023-07-12T15:53:11.343 License: CC BY-SA 4.0" class="relativetime-clean">Jul 12 '23 at 15:53</span></a></span> </div> </div> </li> <li id="comment-135178248" class="comment js-comment " data-comment-id="135178248" data-comment-owner-id="11107541" 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="comment135178248_76643916"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">_you_ can, as the user operating the user agent and using its user-facing tools. _scripts_ from different domains cannot "touch" each other. Your question is unclear with respect to that distinction. Or do you want me to write up an answer to that effect? the "domains" here are the domains of the different _scripts_- not of the script and user's machine.</span> – <a href="../../users/11107541/starball" title="20,030 reputation" class="comment-user ">starball</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/76643916/can-the-source-html-css-js-of-a-remote-site-shown-in-an-iframe-be-accessed#comment135178248_76643916"><span title="2023-07-12T16:58:42.453 License: CC BY-SA 4.0" class="relativetime-clean">Jul 12 '23 at 16:58</span></a></span> </div> </div> </li> <li id="comment-135193217" class="comment js-comment " data-comment-id="135193217" data-comment-owner-id="2184308" 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="comment135193217_76643916"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I would be grateful for such an answer. However, it is already clear from my experiments that iframes are pretty much useless without some other mechanism for client-side security. Until at least part of our browsers are implemented in Ring 0, we have not much chance of extending server-side security into client side. Same is true for other areas of client-side insecurity, such as email or the need to have authentication via email or telephone, or the elimination of all logins, and all spam and malware. None of that can be done without client-side security and/or effective enforcement of laws.</span> – <a href="../../users/2184308/david-spector" title="1,520 reputation" class="comment-user owner">David Spector</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/76643916/can-the-source-html-css-js-of-a-remote-site-shown-in-an-iframe-be-accessed#comment135193217_76643916"><span title="2023-07-13T17:29:00.100 License: CC BY-SA 4.0" class="relativetime-clean">Jul 13 '23 at 17:29</span></a></span> </div> </div> </li> <li id="comment-135195318" class="comment js-comment " data-comment-id="135195318" data-comment-owner-id="11107541" 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="comment135195318_76643916"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">what do you mean by "client-side security"? You mean not letting the user view the source (HTML/CSS/JS/etc.) of the pages they're viewing? And not letting users use devtools? iframes being inspectable in devtools is not something specific to iframes. Whatever contains the iframes can also be inspected in devtools. I'm confused about why you're particular about iframes. Can you explain?</span> – <a href="../../users/11107541/starball" title="20,030 reputation" class="comment-user ">starball</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/76643916/can-the-source-html-css-js-of-a-remote-site-shown-in-an-iframe-be-accessed#comment135195318_76643916"><span title="2023-07-13T20:33:38.667 License: CC BY-SA 4.0" class="relativetime-clean">Jul 13 '23 at 20:33</span></a></span> </div> </div> </li> <li id="comment-135209207" class="comment js-comment " data-comment-id="135209207" data-comment-owner-id="2184308" 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="comment135209207_76643916"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Sure. One might think that iframes are a security mechanism. They completely encapsulate a separate document and window from the document and window pair in which they are declared. Since I could not find any information on the Web, I did some research and published my result as a question and answer. I suspect that there is NO way to encapsulate remote HTML, CSS, or JS such that it cannot be seen client-side. This is an important basic piece of knowledge that I wanted to find out myself. So long as security is important to an app, it must be at least partially implemented on the webserver.</span> – <a href="../../users/2184308/david-spector" title="1,520 reputation" class="comment-user owner">David Spector</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/76643916/can-the-source-html-css-js-of-a-remote-site-shown-in-an-iframe-be-accessed#comment135209207_76643916"><span title="2023-07-14T21:07:42.420 License: CC BY-SA 4.0" class="relativetime-clean">Jul 14 '23 at 21:07</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">1 Answers<span style="display:none;" itemprop="answerCount">1</span></h2> </div> </div> </div> <a name="76691269"></a> <div id="answer-76691269" class="answer " data-answerid="76691269" data-ownerid="11107541" 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="76691269"> <button class="js-vote-up-btn grid--cell s-btn s-btn__unset 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>If you're concerned about security, note that sites can respond to requests and specify that they should not be embedded by requesting user agents in iframes. See the <a class="external-link" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options" rel="nofollow noreferrer"><code>X-Frame-Options</code> HTTP header</a> and <a class="external-link" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors" rel="nofollow noreferrer"><code>frame-ancestors</code> Content Security Policy</a>.</p> <p>If you're instead interested in protecting the <em>embedder</em> (rather than the <em>embeddee</em>), see the <a class="external-link" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attributes" rel="nofollow noreferrer"><code>allow</code> attribute of <code><iframe></code>s</a>.</p> <p>The main security mechanism you care about is the Same-Origin Policy, which basically is that resources from different origins should not have access to one another. If you want to read more about it, you may be interested in <a class="external-link" href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy" rel="nofollow noreferrer">the MDN page</a> and <a class="external-link" href="https://en.wikipedia.org/wiki/Same-origin_policy" rel="nofollow noreferrer">the Wikipedia page</a> on the subject.</p> <p>There are ways for resources from different origins to cooperate (basically both giving each other consent to communicate), such as <a class="external-link" href="https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage" rel="nofollow noreferrer"><code>window.postMessage</code></a>. If the iframe page is from the same origin as the parent frame, then yes, the parent frame can "reach in" to the DOM of the child frame. Ex. <a href="../../questions/1088544/get-element-from-within-an-iframe">Get element from within an iFrame</a>.</p> <p>A user operating a user agent (such as a browser) can still use tools provided by the user agent to inspect the resources of the sites, but that's not as much of a security concern- barring the user shooting themselves in the foot by very intentionally being a side-channel for information from one origin's resource to get to another's. Ex. copy and pasting things from browser devtools.</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 Jul 14 '23 at 21:43">answered Jul 14 '23 at 21:43</time> <a href="../../users/11107541/starball" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/11107541.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="starball" /> </a> <div class="s-user-card--info"> <a href="../../users/11107541/starball" class="s-user-card--link">starball</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">20,030</li> <li class="s-award-bling s-award-blinggold" title="7 gold badges">7</li> <li class="s-award-bling s-award-blingsilver" title="43 silver badges">43</li> <li class="s-award-bling s-award-blingbronze" title="238 bronze badges">238</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> <div id="sidebar" class="show-votes" role="complementary" aria-label="sidebar"> <div class="module sidebar-linked"> <h4 id="h-linked">Linked</h4> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">176</div></a> <a href="../../questions/7289139/why-are-iframes-considered-dangerous-and-a-security-risk" class="question-hyperlink">Why are iframes considered dangerous and a security risk?</a> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>