Discover the basics of working with the HTML `iframe` tag
iframe tag allows us to embed content coming from other origins (other sites) into our web page.
Many sites use iframes to perform various things. You might be familiar with Codepen, Glitch or other sites that allow you to code in one part of the page, and you see the result in a box. That’s an iframe.
You create one this way:
You can load an absolute URL, too:
You can set a set of width and height parameters (or set them using CSS) otherwise the iframe will use the defaults, a 300x150 pixels box:
<iframe src="page.html" width="800" height="400"></iframe>
srcdoc attribute lets you specify some inline HTML to show. It’s an alternative to
src, but recent and not supported in Edge 18 and lower, and in IE:
<iframe srcdoc="<p>My dog is a good dog</p>"></iframe>
sandbox attribute allows us to limit the operations allowed in the iframes.
If we omit it, everything is allowed:
If we set it to "", nothing is allowed:
<iframe src="page.html" sandbox=""></iframe>
We can select what to allow by adding options in the
sandbox attribute. You can allow multiple ones by adding a space in between. Here’s an incomplete list of the options you can use:
allow-forms: allow to submit forms
allow-modalsallow to open modals windows, including calling
allow-orientation-lockallow to lock the screen orientation
allow-popupsallow popups, using
allow-same-origintreat the resource being loaded as same origin
allow-scriptslets the loaded iframe run scripts (but not create popups).
allow-top-navigationgives access to the iframe to the top level browsing context
Currently experimental and only supported by Chromium-based browsers, this is the future of resource sharing between the parent window and the iframe.
It’s similar to the
sandbox attribute, but lets us allow specific features, including:
accelerometergives access to the Sensors API Accelerometer interface
ambient-light-sensorgives access to the Sensors API AmbientLightSensor interface
autoplayallows to autoplay video and audio files
cameraallows to access the camera from the getUserMedia API
display-captureallows to access the screen content using the getDisplayMedia API
fullscreenallows to access fullscreen mode
geolocationallows to access the Geolocation API
gyroscopegives access to the Sensors API Gyroscope interface
magnetometergives access to the Sensors API Magnetometer interface
microphonegives access to the device microphone using the getUserMedia API
midiallows access to the Web MIDI API
paymentgives access to the Payment Request API
speakerallows access to playing audio through the device speakers
usbgives access to the WebUSB API.
vibrategives access to the Vibration API
vrgives access to the WebVR API
When loading an iframe, the browser sends it important information about who is loading it in the
Referer header (notice the single
r, a typo we must live with).
The misspelling of referrer originated in the original proposal by computer scientist Phillip Hallam-Baker to incorporate the field into the HTTP specification. The misspelling was set in stone by the time of its incorporation into the Request for Comments standards document RFC 1945
referrerpolicy attribute lets us set the referrer to send to the iframe when loading it. The referrer is an HTTP header that lets the page know who is loading it. These are the allowed values:
no-referrer-when-downgradeit’s the default, and sends the referrer when the current page is loaded over HTTPS and the iframe loads on the HTTP protocol
no-referrerdoes not send the referrer header
originthe referrer is sent, and only contains the origin (port, protocol, domain), not the origin + path which is the default
origin-when-cross-originwhen loading from the same origin (port, protocol, domain) in the iframe, the referrer is sent in its complete form (origin + path). Otherwise only the origin is sent
same-originthe referrer is sent only when loading from the same origin (port, protocol, domain) in the iframe
strict-originsends the origin as the referrer if the current page is loaded over HTTPS and the iframe also loads on the HTTPS protocol. Sends nothing if the iframe is loaded over HTTP
strict-origin-when-cross-originsends the origin + path as the referrer when working on the same origin. Sends the origin as the referrer if the current page is loaded over HTTPS and the iframe also loads on the HTTPS protocol. Sends nothing if the iframe is loaded over HTTP
unsafe-url: sends the origin + path as the referrer even when loading resources from HTTP and the current page is loaded over HTTPS