LearnHTML.net

Explore

LearnHTML.net

Quick find

Search lessons, patterns, and prompts

Open full search
SearchPrompt Builder

Reference · Advanced

The iframe element

Embed a separate browsing context only when necessary, with a useful title, bounded permissions, sandbox policy, loading plan, and fallback.

Published
Last checked

Definition

iframe embeds another browsing context. That document has its own URL, security origin, navigation, focus order, scripts, cookies, and accessibility tree. Embedding creates a larger trust, privacy, performance, and failure surface than an image or ordinary link.

Minimal syntax

<iframe
  src="https://example.org/map"
  title="Map of workshop entrances"
  loading="lazy"
  sandbox=""
></iframe>

An empty sandbox applies strong restrictions; add capabilities only after reviewing the embedded task. Real services often require a carefully bounded set of tokens.

Naming and fallback

title identifies the frame to assistive technology and should distinguish multiple embeds. Provide nearby text or a direct link when the embedded service is optional or can fail. Do not place essential instructions only inside a third-party context you do not control.

Security and privacy

Review sandbox, Permissions Policy through allow, referrer behavior, origin, postMessage validation, and the provider's data handling. Avoid combining same-origin and script permissions in ways that defeat intended isolation. A third-party embed may receive IP, browser, referrer, and cookie information.

Accessibility and layout

Keyboard focus enters the frame and then follows its internal controls. The embedded document must itself be accessible. Give the frame responsive dimensions without hiding internal content, and test zoom and mobile behavior where cross-origin content may not adapt.

Common failures

  • The frame has no useful title.
  • Permissions are copied broadly from vendor examples.
  • Essential content disappears when the provider is blocked.
  • Focus becomes confusing between host and embedded controls.
  • Fixed dimensions overflow or clip the embedded task.

Verification checklist

Inspect the final src, origin, sandbox, allow, referrer policy, and network requests. Block the provider and test the fallback link. Traverse into and out of the frame by keyboard and screen reader, then test 200% zoom and 320-pixel reflow. Validate postMessage origins and payloads when messaging is used, and review the provider's production privacy behavior.

Maintenance note

Re-review permissions and provider behavior whenever the embedded origin, vendor contract, or feature set changes. A copied allowlist can silently outlive the reason each capability was granted.