【My Study Note】iFrame sandbox cheat sheet
iFrame sandbox cheat sheet
Allow
// the fullscreen mode can be activated
allow="fullscreen”
// lets you access the user’s location
allow=“geolocation”
// To specify more than one feature, a semicolon-separator should be used between features
<iframe src="https://example.com/…" allow="camera; microphone"> </iframe> It specifies what features or permissions are available to the frame, for instance, access to the microphone, camera, other APIs and so on.
Name
<iframe name = "My Frame" width="400" height="300"></iframe>Height
It specifies the height of the frame. The default value is 150px.
Width
Specifies the width of the frame, in terms of CSS pixels. The default value is 300px.
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.
Common Values
- 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 <iframe>. To lift particular restrictions, an attribute value (permission token) is used.
Common Permission Token
- allow-downloads: Allows the user to download an item
- allow-forms: Allows the user to submit forms
- allow-modals: The resource can open modal windows
- allow-orientation-lock: Lets the resource lock the screen orientation
- allow-popups: Allows popups to open
- allow-presentation: Allows a presentation session to start
- allow-scripts: Lets the resource run scripts without creating popup windows
// When the value of this attribute is empty, all restrictions are applied. To apply more than one permission as follows:
<iframe src="my_iframe_sandbox.html" sandbox="allow-forms allow-scripts"></iframe>Src
The URL of the page to embed in the <iframe>.
Srcdoc
// The following code will display "My inline html" in the frame, instead of loading my_iframe_src.html.
<iframe src="my_iframe_src.html" srcdoc="<p>My inline html</p>"></iframe> Let's you specify the inline HTML to embed in the <iframe>. When defined, this attribute would override the src attribute.
Loading
<iframe src="my_iframe_src.html" loading="lazy" ></iframe> This attribute let 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.
Title
<iframe src="history.html" title="An embedded document about the history of my family" ></iframe> This attribute let you add a description to the iframe for accessibility purposes. The value of this attribute should accurately describe the iframe’s content.