What is an iframe? The Complete Guide to HTML Inline Frames

Have you ever visited a webpage and noticed a video, advertisement, Google Map, or even another webpage embedded within it? Chances are, you were looking at content displayed inside an inline frame, or "iframe" for short.

Iframes have been a part of the web since the early days of HTML, allowing developers to embed external content into their webpages. While their use has evolved and in some cases declined over the years, iframes remain a powerful tool that every web developer should understand.

In this comprehensive guide, we‘ll explain exactly what iframes are, how they work, common use cases and examples, and important considerations like security, accessibility, and responsive design techniques. Let‘s dive in!

What is an iframe?

An iframe, short for "inline frame", is an HTML element that allows you to embed another HTML document within the current document. You can think of it like a window to another webpage placed inside the parent page.

The iframe is defined using the <iframe> tag. You specify the URL of the page to embed using the src attribute, like this:

<iframe src="https://www.example.com/"></iframe>

This would display the page located at https://www.example.com/ inside an iframe on the current page. You can embed any page you like in an iframe, whether it‘s from your own site or an external site.

Some key characteristics of iframes:

• Iframes create a new nested browsing context, meaning the embedded page is isolated from the parent page
• The embedded page appears inside a fixed-size viewport defined by the iframe‘s width and height attributes
• Users can interact with the embedded page without leaving the parent page
• Iframes can be styled with CSS to control their appearance and positioning

Common iframe use cases

Over the years, iframes have been used for a variety of purposes by web developers. Some of the most common applications include:

1. Embedding videos

Platforms like YouTube and Vimeo provide iframe embed codes that allow you to easily embed their videos on your own site. For example:

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>

This code would embed a YouTube video player with the specified video on your page. This is a very common use case that you‘ve likely encountered many times as you browse the web.

2. Embedding advertisements

Many ad networks serve their ads via iframes. They provide an iframe snippet that publishers can place on their page to display the ads. The ad content is loaded from the ad server into the iframe when the page loads.

3. Embedding other webpages

Iframes can be used to embed other pages from your site or external sites into a parent page. This technique was once more common, but has fallen out of favor in recent years for reasons we‘ll discuss later.

4. Embedding maps

Services like Google Maps provide iframe embed codes to display an interactive map on your page:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d26430.393553120906!2d-118.24906416005827!3d34.05376103441117!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2c75ddc27da13%3A0xe22fdf6f254608f4!2sLos+Angeles%2C+CA!5e0!3m2!1sen!2sus!4v1498231328772" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

This would display an embedded Google Map centered on Los Angeles.

5. Sandboxing untrusted content

The sandbox attribute of iframes allows you to apply extra restrictions on the content in the iframe. This is useful when embedding content from untrusted sources. We‘ll talk more about iframe security later on.

HTML iframe attributes

The <iframe> element supports several attributes to control its appearance and behavior:

• src: The URL of the page to embed in the iframe.
• width & height: The width and height of the iframe in CSS pixels. You can also set these properties with CSS.
• name: A name for the iframe. This is used for targeting the iframe in JavaScript or with the target attribute of links.
• sandbox: Applies extra restrictions to the content in the iframe for security purposes. We‘ll discuss this more later.
• allow: Specifies a feature policy for the iframe. This is used in conjunction with the sandbox attribute.
• referrerpolicy: Sets the referrer policy for the iframe, controlling what referrer information is sent when the user follows a link inside the iframe.

There are a few other attributes like frameborder, longdesc, and marginheight/marginwidth, but they are less commonly used.

Iframe security considerations

While iframes are undoubtedly useful, they do come with some security risks that developers need to be aware of. Because iframes can embed content from external sites, they can potentially be used as an attack vector if not implemented properly.

One major concern is clickjacking. This is when an attacker embeds a legitimate page inside an invisible iframe on a malicious page, and tricks the user into interacting with it without their knowledge. This could allow the attacker to perform unwanted actions on the user‘s behalf.

To help mitigate these risks, you can use the sandbox attribute to apply extra restrictions to iframes:

<iframe src="https://www.example.com/" sandbox></iframe>

When the sandbox attribute is present, it applies a set of default restrictions:

• The embedded page cannot run scripts, submit forms, or open new windows.
• The embedded page cannot access cookies or local storage from the parent page.
• Links inside the iframe are opened in a new window instead of the iframe itself.

You can selectively allow specific capabilities using the allow-* keywords:

<iframe src="https://www.example.com/" sandbox="allow-scripts allow-forms"></iframe>

This would allow the embedded page to run scripts and submit forms, while still restricting other capabilities.

Another security header you can use is X-Frame-Options. This is an HTTP response header that indicates whether a page is allowed to be embedded in an iframe. It has three possible values:

• DENY: The page cannot be embedded in an iframe.
• SAMEORIGIN: The page can only be embedded in iframes on the same origin.
• ALLOW-FROM uri: The page can only be embedded in iframes on the specified origin.

Using these iframe security features where appropriate can help protect your users from potential attacks. As a general rule, only embed content from trusted sources, and apply the principle of least privilege using sandbox and X-Frame-Options.

Iframe accessibility

When using iframes, it‘s important to ensure that your embedded content is accessible to users with disabilities. Here are a few tips:

• Provide a title for the iframe using the title attribute. This helps screen reader users understand the purpose of the iframe.

  <iframe src="https://www.example.com/" title="Description of embedded content"></iframe>

• Ensure that the embedded page itself is accessible, with proper heading structure, ARIA roles, alt text for images, etc.

• If the iframe contains an interactive element like a form or video player, ensure that it is keyboard-accessible.

• Avoid using iframes for primary content. Iframes are best used for supplementary content that enhances but is not crucial to the main content of the page.

Responsive iframe techniques

Iframes can be a bit tricky to work with in responsive designs because they have a fixed width and height. If the iframe is too large for the available space, it will cause unwanted horizontal scrolling or overflow.

One way to make iframes responsive is to wrap them in a container div and use CSS to make the iframe fluid:

<div class="iframe-container">
  <iframe src="https://www.example.com/"></iframe>
</div>

.iframe-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

This technique uses a percentage-based padding trick to create an intrinsic aspect ratio for the iframe container. The iframe itself is then absolutely positioned within the container, allowing it to scale with the container‘s width.

You can adjust the padding percentage to achieve different aspect ratios. A 16:9 ratio is common for video embeds, but you may need a different ratio for other types of content.

Another option is to use the CSS transform property to scale the iframe:

iframe {
  width: 100%;
  height: 400px;
  transform: scale(0.8);
  transform-origin: 0 0;
}

This would scale the iframe to 80% of its original size. You can adjust the scale factor as needed based on the available space.

Keep in mind that scaling an iframe may make the content inside it appear small and difficult to interact with on mobile devices. Use this technique judiciously.

Iframe alternatives

While iframes are still useful in certain situations, modern web development has trended away from them in favor of other techniques:

• For embedding videos, the <video> element allows you to embed video files directly without the need for an iframe. Many video platforms also provide JavaScript APIs for more advanced video embedding and control.

• For embedding external content, techniques like server-side includes (SSI) or client-side AJAX can be used to pull in and display content from other pages without iframes.

• For embedding interactive content, HTML5 features like <canvas> and Web Components allow for rich, interactive experiences without iframes.

That said, iframes are still the go-to solution for certain use cases like ads and third-party embeds. It‘s a good tool to have in your toolkit, even if it‘s not always the right choice.

Iframe browser support

Iframes have been around since the early days of HTML and are supported in all major browsers. However, older browsers may not support some of the newer iframe features and attributes.

For example, the sandbox attribute was introduced in HTML5 and is not supported in Internet Explorer 9 and below. The allowfullscreen attribute for allowing iframes to be put into fullscreen mode is also an HTML5 addition.

When using iframes, it‘s a good idea to test your implementation in a variety of browsers to ensure a consistent experience for your users. Use feature detection to progressively enhance and provide fallbacks for older browsers where necessary.

Conclusion

Iframes may not be as prevalent as they once were, but they are still a powerful tool in the web developer‘s arsenal. Understanding how they work, their benefits and drawbacks, and how to use them effectively is important for any well-rounded web developer.

Remember to always consider security, accessibility, and responsive design when implementing iframes. With careful thought and proper techniques, iframes can enhance your webpages and provide valuable functionality for your users.

Further reading

To learn more about iframes and related topics, check out these resources:

• MDN Web Docs: <iframe> – HTML: Hypertext Markup Language
• W3Schools: HTML Iframe Tag
• HTML Standard: The iframe element
• OWASP HTML5 Security Cheat Sheet
• web.dev: Responsive web design basics