The HTML <iframe> element (also known as an inline frame) can embed HTML documents within other HTML documents while allowing the user to interact with the content. Web services often use iFrames to give their users an easy way to embed content, such as videos or maps, without writing code.
The document rendered by the iFrame element is encapsulated within its own browsing context that separates the CSS styling, JavaScript and HTML content from the original HTML document.
The HTML document embedded by the iFrame element can be both an internal and external resource. In this context, an internal resource is a file located on the same server as the page showing the iFrame element and an external resource is on another server. An iFrame can, therefore, be used to display content from the same website or other websites.
An iFrame is not the only HTML element we can use to embed HTML documents. We can also use the <object> and <embed> elements like the iFrame element to display a separate document.
Are iFrames a Security Risk?
No, iFrames are safe and help reduce security risks. The iFrame element provides a set of attributes we can use to control different aspects of security; this includes restricting specific features and information available to the iFrame source to prevent the user from loading malicious content.
How to Use an iFrame
In order to display another HTML document using the iFrame element, specify a source URL. We specify the URL source using the attribute src followed by an equal sign and a string containing the URL. See the following example:
<iframe src=“https://www.example.com/”></iframe>If you use a tool (like Chrome developer tools) to inspect the iFrame element, you’ll see the content of the iFrame contains a complete HTML skeleton with its own <html>, <head> and <body> elements.
To adjust the width and height of the iFrame element, simply add the attributes width and height. You can also use CSS to adjust the width and height of the iFrame element if you don’t want to add the specification as attributes.
<iframe src=“https://www.example.com/” width=”200” height=”200”></iframe>What if you want to restrict the iFrame to disallow features such as scripting, forms and popups, but also want to maintain the user’s access to downloads? You set the attribute sandbox equal to allow-downloads.
<iframe src=“https://www.example.com/” width=”200” height=”200” sandbox=“allow-downloads”></iframe>
Attributes of an iFrame
The iFrame element provides many different attributes you can use to modify its behavior. For example, you can use the width and height attributes to set the width and height of the iFrame element in pixels or use the sandbox attribute to apply an extra layer of security to prevent malicious content.
Here’s a list of the attributes you can use to modify the iFrame element below.
SRC
With src, you can specify the source location of the external document.
Width
When you use the widthattribute, you can set the width of the iFrame element measured in pixels.
Height
The height attribute allows you to set the height of the iFrame element measured in pixels.
Allow
With the allow attribute, you can specify the permission policy for the features the external document is allowed to use. For example, in a scenario where the iFrame should have access to the microphone, the attribute should be set to microphone.
Here’s a short list of other values you can use:
webcamgeolocationfullscreencamera
Sandbox
Sandbox is yet another attribute we can use to restrict specific functionality of the iFrame element to apply an extra layer of security.
For example, when we specify the attribute without any values, all restrictions are applied by default. In practice, this includes functionality such as popups, forms and downloads among others. If you don’t want to restrict everything but also want to ensure the user can still interact with forms, for example, you simply insert allow-forms as a value.
There are many other values you can use instead of allow-forms, including:
allow-downloadsallow-scriptsallow-top-navigationallow-popups
Referral Policy
We can use referralpolicyto control the referrer-policy when loading the iFrame source. You can set the attribute to no-referrer to prevent the browser from sending the referrer header when loading the resource.
The attribute has many possible values including:
same-originstrict-originoriginunsafe-url
SRCDOC
With srcdoc, we can set the content of the iFrame to an inline string of HTML. For example, the content of the iFrame will be <p>Hello world!</p> if srcdoc is equal to <p>Hello world!</p>.
You might also want to use a few of the global HTML attributes to modify the iFrame to either refer to the object within a CSS stylesheet or within a JavaScript file. See the list below.
class: Set the classes of the HTML element.id: Set the ID of the HTML element.style: Specify inline CSS styling.title: Create text describing the content of the HTML element.
You can also find a set of experimental attributes that might change in the future and have less browser support. For instance, the loading attribute is experimental. You can use loading to specify whether or not the content should load immediately or when the user’s viewpoint is within a certain distance.
Examples of iFrames
The HTML iFrame element has been part of HTML for over twenty years and if you have embedded content from other pages on a website before, chances are you’ve been using this HTML element.
Embed YouTube Videos
YouTube has allowed users to embed videos on other pages for many years. Under each YouTube video, you can find an iFrame element with a unique URL named “https://www.youtube.com/embed/,” which points to a site containing a video player with the specific video. Every video has its own unique ID you should insert instead of <unique-id>. You can see an example of how an iFrame element embeds a YouTube video below.
<iframe width=“560” height=“315” src=”https://www.youtube.com/embed/<unique-id>” title=“YouTube video player” frameborder=“0” allow=“accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share” allowfullscreen></iframe>
Embed Google Maps
With the iFrame element, you can also embed Google Maps. Google allows users to add interactive maps on their website by simply inserting an iFrame element without the requirement for additional code implementation. However, this process requires obtaining an API key from Google and replacing the <API_KEY> part of the iFrame’s source.
<iframe width=“600” height=”450” style=“border:0” loading=“lazy” allowfullscreen referrerpolicy=“no-referrer-when-downgrade” src=“https://www.google.com/maps/embed/v1/place?key=<API_KEY>&q=Space+Needle,Seattle+WA”></iframe>
Embedding video and map are just two of many use cases of the iFrame element.
Accessibility Concerns of iFrames
A common accessibility concern related to the iFrame element is that if users make use of a screen reader to scan a website, the user might not get meaningful information about the iFrame’s content. We can solve this problem by applying the title attribute and setting it to a sentence clearly describing the iFrame’s content.
<iframe title=“Example website” src=“https://www.example.com/”></iframe>The example above sets the iFrame’s title to “example website” to inform the user about the source’s content. For instance, the title could be the one provided by YouTube’s iFrame when you embed the video (e.g. “Wild Baby Elephants Spray Water on Each Other”). If you inspect the element, you’ll see the title, which informs the user with blind or low vision about what they can expect from the iFrame element.
