Cross-Domain iFrame

Cross-domain iframes are [[HTML]] elements used in web development to embed content from a different domain (or website) into a webpage.

They represent a particular use of the \ tag in HTML, where the source of the iframe (the content it displays) comes from a domain that is different from the domain of the parent page.</p> <p>Cross domain iframes provide a way to isolate embedded content from the parent page. This is particular useful for including third party content while maintaining a degree of separation from the main website's content.</p> <p>Web browsers enforce the [[Same Origin Policy]], which restricts how documents or scripts loaded from one origin can interact with resources from another origin. In the context of iframes, this policy means that a script in an iframe from a different domain typically cannot directly access or modify the contents of the parent page.</p> <p>While the isolation provided by cross-domain iframes can enhance security (by preventing third-party content from accessing sensitive data on the parent page), it also poses challenges. For instance, ensuring secure communication between the iframe and the parent page requires careful handling, often using postMessage [[APIs|API]] or other secure methods.</p> <p>Sometimes, it's necessary for the embedded content in an iframe to communicate with the parent page or access resources from the parent domain. [[Cross-Origin Resource Sharing (CORS)]] is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served, under certain conditions.</p> </article> </div> <script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var tab,labels=set.querySelector(".tabbed-labels");for(tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script> <script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script> </div> <button type="button" class="md-top md-icon" data-md-component="top" hidden> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg> Back to top </button> </main> <footer class="md-footer"> <nav class="md-footer__inner md-grid" aria-label="Footer" > <a href="../cookies/" class="md-footer__link md-footer__link--prev" aria-label="Previous: Cookies"> <div class="md-footer__button md-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg> </div> <div class="md-footer__title"> <span class="md-footer__direction"> Previous </span> <div class="md-ellipsis"> Cookies </div> </div> </a> <a href="../cors/" class="md-footer__link md-footer__link--next" aria-label="Next: Cross-Origin Resource Sharing (CORS)"> <div class="md-footer__title"> <span class="md-footer__direction"> Next </span> <div class="md-ellipsis"> Cross-Origin Resource Sharing (CORS) </div> </div> <div class="md-footer__button md-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4Z"/></svg> </div> </a> </nav> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class="md-copyright"> <div class="md-copyright__highlight"> Copyright © 2024 Jonathan Pake </div> </div> </div> </div> </footer> </div> <div class="md-dialog" data-md-component="dialog"> <div class="md-dialog__inner md-typeset"></div> </div> <script id="__config" type="application/json">{"base": "../..", "features": ["content.code.annotate", "content.code.copy", "content.tabs.link", "header.autohide", "announce.dismiss", "navigation.footer", "navigation.indexes", "navigation.sections", "navigation.tabs", "navigation.top", "navigation.tracking", "search.highlight", "search.share", "search.suggest"], "search": "../../assets/javascripts/workers/search.b8dbb3d2.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script> <script src="../../assets/javascripts/bundle.a7c05c9e.min.js"></script> </body> </html>