iFrame sandbox cheat sheet

The is the inline frame element that embeds an HTML page into another page. </p> <p>Apart from the global attributes, which can be a part of the iframe, major element-specific attributes are listed below. </p> <p>allow It specifies what features or permissions are available to the frame, for instance, access to the microphone, camera, other APIs and so on. For example: </p> <p>allow="fullscreen” the fullscreen mode can be activated </p> <p>allow=“geolocation” lets you access the user’s location </p> <p>To specify more than one feature, a semicolon-separator should be used between features. For example, the following would allow using the camera and the microphone: </p> <iframe src="https://example.com/…" allow="camera; microphone">

name The name for the . For example: </p> <iframe name = "My Frame" width="400" height="300">

height It specifies the height of the frame. The default value is 150, in terms of CSS pixels. width

width Specifies the width of the frame, in terms of CSS pixels. The default value is 300 pixels.

referrerpolicy A referrer is the HTTP header that lets the page know who is loading it. This attribute indicates which referrer information to send when loading the frame resource. The common values are:

no-referrer The referrer header will not be sent.

origin The referrer will be limited to the origin of the referring page

strict-origin The origin of the document is sent as the referrer only when using the same protocol security level (HTTPS to HTTPS)

sandbox To enforce greater security, a sandbox applies extra restrictions to the content in the . To lift particular restrictions, an attribute value (permission token) is used. The common permission tokens are listed below: </p> <p>allow-downloads Allows the user to download an item </p> <p>allow-forms Allows the user to submit forms </p> <p>allow-modals The resource can open modal windows </p> <p>allow-orientation-lock Lets the resource lock the screen orientation </p> <p>allow-popups Allows popups to open </p> <p>allow-presentation Allows a presentation session to start </p> <p>allow-scripts Lets the resource run scripts without creating popup windows </p> <p>Note that when the value of this attribute is empty, all restrictions are applied. To apply more than one permission, use a space-separated list. For example, the following would allow form submission and scripts while keeping other restrictions active: </p> <pre><code><iframe src="my_iframe_sandbox.html" sandbox="allow-forms allow-scripts"> </iframe> </code></pre> <p>src The URL of the page to embed in the <iframe>. Using the value about:blank would embed an empty page. </p> <p>srcdoc Let's you specify the inline HTML to embed in the <iframe>. When defined, this attribute would override the src attribute. </p> <pre><code><iframe src="my_iframe_src.html" srcdoc="<p>My inline html</p>" > </iframe> </code></pre> <p>loading This attribute let's you specify if the iframe should be loaded immediately when the web page loads (eager) or loaded when iframe is displayed in the browser (lazy). This allows you to defer loading iframe content if it is further down your web page and outside of the display area when the page is initially loaded.</p> <pre><code><iframe src="my_iframe_src.html" loading="lazy" > </iframe> </code></pre> <p>title This attribute let's you add a description to the iframe for accessibility purposes. The value of this attribute should accurately describe the iframe's content.</p> <pre><code><iframe src="history.html" title="An embedded document about the history of my family" > </iframe> </code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/chaesthetics"><img src="https://avatars.githubusercontent.com/u/61530799?v=4" />chaesthetics</a> commented <strong> 10 months ago</strong> </div> <div class="markdown-body"> <p><img src="https://github.com/chaesthetics/FrontEnd-Dev/assets/61530799/b0503565-0383-4a6f-9b48-1180d19670a9" alt="image" /></p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

chaesthetics / FrontEnd-Dev

iFrame sandbox cheat sheet #45