frame protections

Overview

Frame protections stop other sites from embedding your pages in frames, defeating clickjacking attacks. This lesson covers the headers that control framing.

Learning objectives

• Explain clickjacking and how framing enables it.
• Describe frame-protection controls (frame-ancestors, X-Frame-Options).
• Apply framing restrictions correctly.

Core concept

Clickjacking tricks a user into interacting with your site while it is invisibly framed inside an attacker's page — the user thinks they are clicking the attacker's content but are actually clicking your (authenticated) site. Frame protections prevent this by controlling who may frame your pages:

• CSP frame-ancestors — the modern control; specifies which origins (if any) may embed the page in a frame (e.g. frame-ancestors 'none' or 'self').
• X-Frame-Options — the older header (DENY or SAMEORIGIN), still widely supported.

How it works

In a clickjacking attack, the attacker loads your site in a transparent/overlaid frame and positions decoy content so the victim's clicks land on sensitive controls of your framed site (e.g. a "confirm" button) while they believe they are clicking something else. By setting frame-ancestors 'none' (or 'self'), the browser refuses to render your page in a frame on other origins, so the attack cannot set up the hidden overlay. X-Frame-Options: DENY/SAMEORIGIN provides the same effect for older browsers. Applying these ensures your pages cannot be framed by untrusted sites.

Practical example

A banking app sets Content-Security-Policy: frame-ancestors 'none' (and, for compatibility, X-Frame-Options: DENY). An attacker who tries to embed the bank's transfer page in a hidden frame on their own site finds the browser refuses to display it framed — so they cannot overlay decoy content to hijack clicks. Without these headers, the page could be framed and a victim's clicks redirected onto the bank's controls. The framing restriction neutralizes clickjacking.

Cybersecurity relevance

Clickjacking can trick authenticated users into performing unintended sensitive actions, and frame protections are the standard, recommended defense. Missing framing protections are a common finding, especially on state-changing pages. frame-ancestors (CSP) is the modern mechanism, with X-Frame-Options for legacy support; sites typically deny framing entirely or restrict it to same-origin. Defenders apply these to pages (especially sensitive ones); testers check whether pages can be framed by arbitrary origins.

Common mistakes

• Not setting any framing protection, leaving pages embeddable and clickjackable.
• Allowing framing from arbitrary origins when it is not needed.
• Relying only on the legacy X-Frame-Options without the modern frame-ancestors, or vice versa where both aid coverage.

Key takeaways

• Clickjacking uses an invisible frame of your site to hijack a victim's clicks onto sensitive controls.
• Frame protections prevent it: CSP frame-ancestors (modern) and X-Frame-Options (legacy) control which origins may frame your pages (commonly none or same-origin).
• Missing framing protection is a common finding on sensitive pages; deny or restrict framing to defeat clickjacking.

Check your understanding

• How does an invisible frame enable a clickjacking attack?
• Which header is the modern control for restricting who may frame a page, and what value blocks all framing?