Skip to main content

IFrame

What is an IFrame?​

"An iframe (inline frame) embeds another HTML document within the current page, creating a nested browsing context."

Basic Usage​

<iframe
  src="https://example.com"
  width="800"
  height="600"
  title="Embedded Content"
  sandbox="allow-scripts"
>
</iframe>

Key attributes:

  • src - URL of document to embed
  • width, height - Dimensions
  • title - Required for accessibility
  • sandbox - Security restrictions

Security: Sandbox (CRITICAL)​

<iframe src="untrusted.html" sandbox="allow-scripts"> </iframe>

Sandbox restrictions (by default):

  • ❌ No scripts (unless allow-scripts)
  • ❌ No forms (unless allow-forms)
  • ❌ No popups (unless allow-popups)
  • ❌ No same-origin access (unless allow-same-origin)
Security Warning

Always use sandbox for untrusted content. Without it, iframes can execute scripts, submit forms, and access the parent window, creating serious security vulnerabilities.

Sandbox Best Practice

Start with an empty sandbox attribute (most restrictive), then add only the permissions you absolutely need. This follows the principle of least privilege.

Same-Origin Policy​

  • Same-origin: Full access to parent window
  • Cross-origin: Limited access (CORS applies)
  • Cannot access parent DOM/JavaScript from cross-origin iframe
Cross-Origin Communication

Use postMessage API for secure communication between cross-origin iframes and parent windows. Direct DOM/JavaScript access is blocked by same-origin policy.

Common Use Cases​

  • Videos: YouTube, Vimeo embeds
  • Maps: Google Maps
  • Third-party widgets: Social media, ads
  • Document embedding: PDFs
When to Avoid IFrames

For same-origin content, prefer server-side includes or AJAX. For videos, use official embed APIs (YouTube, Vimeo) which are optimized and more secure.

Responsive IFrames​

.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%;
}
Responsive Design

Use aspect ratio padding (56.25% = 9/16 for 16:9) to maintain iframe proportions across screen sizes.

Accessibility​

<iframe src="content.html" title="Embedded video player"> </iframe>
Accessibility Requirement

The title attribute is required for iframes. Screen readers need it to understand what content is embedded.

Major Side Effects​

Performance Impact​

Performance Warning

IFrames create additional HTTP requests and browsing contexts, which can:

  • Slow down page load
  • Increase memory usage
  • Block rendering until iframe content loads

SEO Issues​

SEO Impact

Content inside iframes is not indexed by search engines as part of the parent page. If SEO matters, consider alternatives.

Security Risks​

Security Risks

IFrames can introduce:

  • Clickjacking: Invisible overlays to trick users
  • XSS attacks: Compromised iframe content affects parent
  • Third-party tracking: Embedded content tracks users

Always use sandbox and validate sources.

Best Practices​

✅ Use sandbox for untrusted content ✅ Provide title attribute ✅ Make responsive ✅ Consider performance impact ❌ Don't use for same-origin content (use includes) ❌ Don't embed untrusted content without sandbox

Security Checklist

Before embedding: Is source trusted? Is sandbox set? Is title provided? Performance considered?

"IFrames embed another HTML document. Always use sandbox for security, provide title for accessibility, and consider performance/SEO implications."

🧠 Ultra-Short Cheat Sheet​

Embed another document
src attribute
Sandbox (security - critical!)
Same-origin policy
Title for accessibility
Performance & SEO impact