<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 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
<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:
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
To adjust the width and height of the iFrame element, simply add the attributes
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
<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
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, you can specify the source location of the external document.
When you use the
widthattribute, you can set the width of the iFrame element measured in pixels.
height attribute allows you to set the height of the iFrame element measured in pixels.
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
Here’s a short list of other values you can use:
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:
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:
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
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.