HTML — Lesson 19
HTML Iframes
Embedding external content and understanding security implications.
HTML Iframes
The <iframe> element embeds another HTML document within the current page. It is commonly used for maps, videos, and third-party widgets.
Basic Usage
<iframe
src="https://example.com"
width="800"
height="600"
title="Description for accessibility">
</iframe>
The sandbox Attribute
Restricts what the embedded content can do. This is a critical security feature.
<!-- Allow scripts but nothing else -->
<iframe src="page.html" sandbox="allow-scripts"></iframe>
<!-- Allow forms and scripts -->
<iframe src="page.html" sandbox="allow-forms allow-scripts"></iframe>
<!-- Most permissive (still restricted) -->
<iframe src="page.html" sandbox="allow-same-origin allow-scripts allow-forms"></iframe>
srcdoc for Inline Content
Write HTML directly inside the iframe instead of loading an external file.
<iframe
srcdoc="<h1>Hello from iframe!</h1><p>This content is inline.</p>"
width="400"
height="200">
</iframe>
Making Iframes Responsive
<div class="responsive-iframe">
<iframe src="https://maps.example.com" width="100%" height="450" style="border:0;" allowfullscreen></iframe>
</div>
/* CSS for responsive iframe */
.responsive-iframe {
position: relative;
padding-bottom: 56.25%; /* 16:9 ratio */
height: 0;
overflow: hidden;
}
.responsive-iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Security Concerns
- Never embed untrusted content without
sandbox - Use
allow-scriptsonly when absolutely necessary - Be aware of clickjacking attacks - attackers can overlay invisible iframes
- Use the
X-Frame-Optionsheader on your own site to prevent others from framing it
Tip: Always include the
title attribute on iframes for accessibility. Screen readers use it to describe the embedded content to users.
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →