HTML Iframe Security

The sandbox Attribute

The sandbox attribute disables all permissions for an iframe by default. You then selectively re-enable only what you need. This is much safer than trusting the embedded content completely.

Note: Start with sandbox and add permissions one by one until the embedded content works.

Warning: Never add allow-same-origin and allow-scripts together — this completely defeats the sandbox protection.

Example: The sandbox Attribute

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

The allow Attribute

The allow attribute controls which browser features an iframe can access — camera, microphone, geolocation, fullscreen. Only grant what the embedded content actually needs.

Note: YouTube embeds need allow=fullscreen — without it the fullscreen button does nothing.

Warning: Granting camera or microphone access to an untrusted iframe is a serious privacy risk.

Example: The allow Attribute

<iframe src="https://youtube.com/embed/xyz" allow="fullscreen"></iframe>

The referrerpolicy Attribute

referrerpolicy controls how much information about your page is sent to the embedded iframe's destination through the Referer header, and stricter values like no-referrer prevent leaking your site's URL structure to third-party embeds.

Example: The referrerpolicy Attribute

<iframe src="https://example.com" referrerpolicy="no-referrer"></iframe>

Content Security Policy and frame-src

The frame-src directive in a page's Content-Security-Policy header restricts which domains are allowed to be embedded via iframe at all, blocking malicious or unexpected iframe sources even if an attacker manages to inject an iframe tag into the page.

Example: Content Security Policy and frame-src

<meta http-equiv="Content-Security-Policy" content="frame-src https://trusted.com">

Avoiding Clickjacking with X-Frame-Options

The X-Frame-Options response header prevents other sites from embedding your page inside their own iframe, which stops a clickjacking attack where an attacker overlays invisible buttons on top of your real page to trick users into clicking something they didn't intend to.

Example: Avoiding Clickjacking with X-Frame-Options

<!-- Server response header: X-Frame-Options: DENY -->
<iframe src="https://example.com"></iframe>