How to embed external content securely with sandbox attributes, responsive techniques, and modern best practices.
The <iframe> element is one of the most powerful and most misunderstood HTML tags. It allows you to embed external content — videos, maps, widgets, documents, entire web pages — directly into your site. But with that power comes significant security responsibility. A poorly configured iframe can expose your visitors to clickjacking, cross-site scripting, and data theft. In this guide, we will cover everything you need to know about embedding iframes safely, including the critical sandbox attribute, responsive embedding techniques, and the modern allow attribute. Use our free iframe embed code generator to create secure, responsive embed code with the right attributes automatically.
At its simplest, an iframe requires just a src attribute:
<iframe src="https://example.com"></iframe>
But this bare-bones approach leaves the iframe with unrestricted capabilities. Before we add security attributes, let us understand the full set of iframe attributes available.
| Attribute | Purpose | Example |
|---|---|---|
src | URL of the content to embed | src="https://youtube.com/..." |
width / height | Dimensions of the iframe | width="560" height="315" |
sandbox | Security restrictions | sandbox="allow-scripts" |
allow | Feature policy permissions | allow="fullscreen; clipboard-write" |
loading | Lazy loading | loading="lazy" |
referrerpolicy | Controls referrer information | referrerpolicy="no-referrer" |
title | Accessibility description | title="Embedded map" |
srcdoc | Inline HTML content | srcdoc="<p>Hello</p>" |
The sandbox attribute is the single most important security feature for iframes. When present, it applies a strict set of restrictions to the iframe content. Think of it as putting the embedded content in a sandboxed environment where it cannot interact with the rest of your page unless you explicitly allow it.
When you add sandbox="" (empty value), the following are all blocked:
You can selectively re-enable features by adding tokens to the sandbox attribute. Only enable what you actually need — every token you add weakens the sandbox.
| Token | What It Allows | When to Use |
|---|---|---|
allow-scripts | JavaScript execution | When the iframe needs interactivity (most embeds) |
allow-forms | Form submission | When the iframe contains forms (login, search) |
allow-same-origin | Treat content as same-origin | Only if you control the iframe content and need cookie/API access |
allow-popups | Opening new windows/tabs | For links that need to open in new tabs |
allow-modals | Opening modal dialogs | For alert(), confirm(), prompt() usage |
allow-top-navigation | Navigate the parent page | Rarely needed — generally unsafe |
allow-downloads | Download files | When the iframe serves downloadable content |
allow-presentation | Presentation API | For presentation mode in embedded content |
allow-scripts and allow-same-origin together unless you fully control the iframe content. Together, they allow the embedded script to remove its own sandbox restrictions and access the parent page as if no sandbox existed.
For a YouTube video embed:
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" sandbox="allow-scripts allow-same-origin allow-popups" loading="lazy" title="YouTube video embed" ></iframe>
For a map embed from a trusted provider:
<iframe src="https://maps.google.com/maps?q=location&output=embed" sandbox="allow-scripts allow-forms allow-same-origin allow-popups" loading="lazy" title="Google Maps embed" ></iframe>
For a static content embed (maximum security):
<iframe src="https://example.com/content" sandbox="" loading="lazy" title="Static content embed" ></iframe>
The allow attribute works alongside sandbox to grant specific browser feature permissions to the iframe. This is the Permissions Policy (formerly Feature Policy) mechanism.
<iframe src="https://example.com" allow="fullscreen; clipboard-write; camera; microphone" sandbox="allow-scripts allow-forms" ></iframe>
Common allow values include:
fullscreen — Allow the iframe to enter fullscreen modeclipboard-write — Allow programmatic clipboard access (copy)camera / microphone — Media device accessautoplay — Allow automatic media playbackencrypted-media — Encrypted media extensions (DRM)picture-in-picture — PiP video modeFixed-width iframes break on mobile devices. Here are the three best approaches for responsive embedding.
The cleanest approach using modern CSS:
iframe {
width: 100%;
aspect-ratio: 16 / 9;
border: none;
}
Supported in Chrome 88+, Firefox 89+, Safari 15+. For older browsers, you will need a fallback.
This technique works in virtually every browser:
.iframe-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 ratio (9/16 * 100) */
height: 0;
overflow: hidden;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
Common aspect ratios expressed as padding-bottom percentages:
Container queries let the iframe adapt based on its container size rather than the viewport:
.iframe-wrapper {
container-type: inline-size;
}
@container (max-width: 400px) {
.iframe-wrapper iframe {
aspect-ratio: 4 / 3;
}
}
@container (min-width: 401px) {
.iframe-wrapper iframe {
aspect-ratio: 16 / 9;
}
}
loading="lazy" to iframes below the fold. This defers loading until the iframe approaches the viewport, reducing initial page load time and saving bandwidth.
An attacker can overlay a transparent iframe over a legitimate-looking button or link. When the user clicks what they think is a harmless element, they are actually clicking something inside the invisible iframe. The sandbox attribute helps mitigate this by restricting what the iframe can do. Additionally, website owners can prevent their pages from being embedded using the X-Frame-Options HTTP header or Content-Security-Policy: frame-ancestors.
If an iframe contains malicious JavaScript, it could potentially interact with the parent page through the DOM — unless sandboxed. Always use sandbox with minimal permissions to prevent this.
Without sandbox, an iframe can access the parent page's cookies, localStorage, and URL. The referrerpolicy="no-referrer" attribute prevents the parent URL from being sent to the iframe source.
sandbox — Start with an empty sandbox and add only the tokens you need.title — Every iframe needs a descriptive title for screen readers.loading="lazy" — Defer offscreen iframes to improve page performance.referrerpolicy="no-referrer" — Prevent leaking your URL to the embedded source.aspect-ratio or the padding-top hack.border: none unless you explicitly want a border.Content-Security-Policy: frame-src on your server to control which domains can be embedded.Configure sandbox, responsive settings, and security attributes visually.
Try the Free Generator →The sandbox attribute applies extra restrictions to the content within an iframe, preventing it from running scripts, submitting forms, accessing cookies, navigating the parent page, and more. It is the single most important security attribute for iframes. Use sandbox="" for maximum restriction, or add specific tokens like allow-scripts and allow-forms to selectively enable features.
The most reliable method is the aspect-ratio technique: wrap the iframe in a container with position: relative, set padding-bottom to the desired aspect ratio percentage (e.g., 56.25% for 16:9), and position the iframe absolutely within it at 100% width and height. Modern CSS also supports the aspect-ratio property directly on the iframe element for a cleaner approach.
Yes, iframes can introduce security risks including clickjacking (overlaying invisible frames to trick users), cross-site scripting attacks, and data exfiltration. Mitigate these risks with the sandbox attribute, the allow attribute, referrerpolicy, and Content Security Policy headers. Always embed only trusted content and use the minimum permissions necessary.
No, you cannot directly style content inside a cross-origin iframe due to the same-origin policy. The parent page and iframe content are separate documents with separate style contexts. You can style the iframe element itself (border, dimensions, opacity), but not its internal content. If you control both the parent and iframe source, you can pass styles via URL parameters or postMessage.
The <iframe> tag is the modern standard for embedding external web content like pages, videos, and widgets. The <embed> tag is for embedding media like PDFs and plugins. The <object> tag is a legacy alternative to <embed>. For embedding web content, always use <iframe> — it has the best security features (sandbox, allow), browser support, and responsive capabilities.