iframe Security Clickjacking and X-Frame-Options
Prevent clickjacking attacks with X-Frame-Options and CSP.
iframe Security Clickjacking and X-Frame-Options is a free HTML Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What is Clickjacking?
Clickjacking (UI redressing) embeds a target site in a transparent iframe over a decoy page. The user thinks they're clicking the decoy but actually clicks the hidden, authenticated page below — executing actions on the target site without knowledge.
Clickjacking Attack Mechanics
The attacker loads victim.com in a transparent iframe positioned over a "Click to win!" button. When the user clicks, they actually click victim.com's "Delete Account" button — authenticated as themselves in victim.com's session cookie. No phishing required.
X-Frame-Options Header
X-Frame-Options: DENY prevents the page from being loaded in any iframe. X-Frame-Options: SAMEORIGIN allows iframing only by pages on the same origin. Set this header server-side on all authenticated pages to prevent clickjacking.
Content-Security-Policy frame-ancestors
Content-Security-Policy: frame-ancestors 'none' is the modern, more flexible replacement for X-Frame-Options: DENY. frame-ancestors 'self' replaces SAMEORIGIN. frame-ancestors can also allow specific trusted origins: frame-ancestors https://trusted.example.com.
JavaScript Frame Busting
Legacy frame-busting used JavaScript to break out of frames. These are easily defeated by the sandbox attribute (which blocks the frame-buster script). Always use server-side headers (X-Frame-Options or CSP frame-ancestors) — JavaScript frame-busting is not reliable.
When to Allow Framing
Legitimate use cases for framing: embedding your own content on your own origin (SAMEORIGIN), allowing a specific partner to embed your widget (frame-ancestors with specific origin). Design the policy to permit these cases while denying all others.
Combination Approach
Set both X-Frame-Options (for older browsers) and CSP frame-ancestors (for modern browsers) for maximum coverage. When both are present, frame-ancestors takes precedence in browsers that support CSP. Sending both ensures clickjacking protection across all user agents.
Same-Origin iframe Risks
Even same-origin iframes can pose risks: a stored XSS in an embedded page could access the parent via parent.document if same-origin. Use sandbox without allow-same-origin for same-origin iframes that don't need parent access to limit damage from embedded content vulnerabilities.
Testing Your Protection
Verify clickjacking protection: use the browser's network tab to check response headers for X-Frame-Options or CSP frame-ancestors. Tools like securityheaders.com analyze headers. Create a test HTML page with an iframe pointing to your site and verify it fails to load.
Third-Party Embeds
When embedding third-party content (YouTube, Google Maps), you are the framing site — ensure the embedded service allows framing in its own X-Frame-Options policy. You cannot embed a site that prevents framing — this is by design and protects the embedded service's users.
CSP frame-ancestors in Meta Tags
Unlike most CSP directives, frame-ancestors cannot be set via an HTTP-equiv meta tag — it must be delivered as an HTTP response header. This ensures attackers cannot remove the protection by manipulating the embedded HTML before the browser reads meta tags.
Knowledge Check
Why is JavaScript frame-busting code an unreliable clickjacking defense?
Summary
Clickjacking embeds authenticated pages in transparent iframes to hijack clicks. Defense: server-side X-Frame-Options: DENY or CSP frame-ancestors: none headers. Set both for cross-browser coverage. JavaScript frame-busting is unreliable — always use HTTP headers. frame-ancestors offers granular trusted-origin allowlisting X-Frame-Options cannot.
Frequently asked questions
Is the “iframe Security Clickjacking and X-Frame-Options” lesson free?
Yes — the full text of “iframe Security Clickjacking and X-Frame-Options” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “iframe Security Clickjacking and X-Frame-Options”?
Prevent clickjacking attacks with X-Frame-Options and CSP. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “iframe Security Clickjacking and X-Frame-Options” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- The iframe Element src and sandbox
- iframe Security Clickjacking and X-Frame-Options
- The embed and object Elements
- Lazy Loading iframes