← Lessons

quiz vs the machine

Gold1380

Frontend

The Clickjacking Frame Protection

Stop attackers from framing your page and tricking users into clicking invisible controls.

4 min read · core · beat Gold to climb

What clickjacking is

Clickjacking tricks a user into clicking something different from what they perceive. An attacker loads your real page in a transparent frame over their own decoy, so a click meant for a harmless button actually activates a sensitive action on your site. The defense is to control who may frame your page.

  • The attacker overlays your page invisibly.
  • The user clicks the visible decoy below.
  • The hidden real control receives the click.

Two ways to block framing

You declare framing rules with the content security policy frame ancestors directive, which lists who may embed you, or with the older X Frame Options header. Frame ancestors is the modern, more flexible choice and can allow specific trusted origins.

  • Set frame ancestors to none to forbid all framing.
  • Set frame ancestors self to allow only your own origin.
  • The X Frame Options header is a legacy fallback.

Because the click lands on your real page, only refusing to be framed reliably stops the attack.

Key idea

Clickjacking overlays your page in a hidden frame, so set frame ancestors or X Frame Options to control who may embed you.

Check yourself

Answer to earn rating on the learn ladder.

1. How does clickjacking deceive a user?

2. Which directive controls who may frame your page?