← Back to HTML Course | Chapter 10: Reference & Interview Prep | Lesson 9 of 20

HTML Iframe Security

Iframes let you embed external content inside your page — maps, videos, widgets. But they also open security risks. A malicious iframe can run scripts, access your cookies, or redirect your users. The sandbox attribute is your main defence.

In this page:

  1. The sandbox Attribute
  2. The allow Attribute
  3. The referrerpolicy Attribute
  4. Content Security Policy and frame-src
  5. Avoiding Clickjacking with X-Frame-Options
Syntax
markup 
<iframe src="url" sandbox="allow-scripts allow-same-origin"></iframe>

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.
  • Accepted values:
  • sandbox (empty) — apply all restrictions
  • allow-scripts — permit JavaScript
  • allow-same-origin — keep the origin
  • allow-forms — permit form submission
  • allow-popups — permit popups
  • allow-top-navigation — permit navigating the top page
  • allow-modals — permit alert, confirm, prompt
Warning: Never add allow-same-origin and allow-scripts together — this completely defeats the sandbox protection.

Example: The sandbox Attribute

markup 
<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.
  • Accepted values:
  • allow — semicolon-separated Permissions Policy features
  • camera; microphone; geolocation; fullscreen; autoplay; payment; clipboard-write
  • Each feature may take an origin list, e.g. geolocation self
Warning: Granting camera or microphone access to an untrusted iframe is a serious privacy risk.

Example: The allow Attribute

markup 
<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.

Note:
  • Accepted values:
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin
  • strict-origin-when-cross-origin
  • unsafe-url

Example: The referrerpolicy Attribute

markup 
<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

markup 
<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

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

HTML Security · HTML Input Validation · HTML Responsive Images · HTML ARIA Roles

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Embedding third party iframes without any sandbox attribute.
  2. Combining allow-same-origin and allow-scripts in sandbox — this breaks the entire sandbox.
  3. Granting camera or microphone access to untrusted sources.
Chapter Summary
  • The sandbox attribute disables all iframe permissions by default.
  • Add sandbox permissions selectively using space-separated values.
  • Never combine allow-same-origin and allow-scripts.
  • The allow attribute controls hardware feature access like camera and fullscreen.
Browser Support

The sandbox attribute is supported in all modern browsers. The allow attribute is supported in Chrome, Firefox, Safari, and Edge.

🔒

Chapter Quiz — Complete all 20 topics to unlock

0/20 topics done

Complete these topics first:

← Previous Lesson HTML Input Validation Next Lesson → HTML Responsive Images

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.