← Lessons

quiz vs the machine

Gold1320

Frontend

Clickjacking And Frame Ancestors

How invisible framing tricks users into clicking and how frame ancestors blocks unwanted embedding.

5 min read · core · beat Gold to climb

What it is

Clickjacking overlays your real page inside a transparent frame on an attacker controlled page. The user thinks they click a harmless button but actually click your sensitive control underneath.

How the trick works

  • The attacker loads your page in an iframe and makes it nearly invisible.
  • A decoy element is positioned over a real action like a transfer button.
  • The victim clicks the decoy but the click lands on your framed control.

Defenses

  • The CSP frame ancestors directive lists which origins may embed your page. Set it to self or none to block framing.
  • The legacy X Frame Options header offers deny or sameorigin as a fallback for old browsers.
  • Sensitive actions can require a confirmation step that is hard to spoof.

Why frame ancestors wins

Unlike the old header, frame ancestors supports multiple allowed origins and is part of the unified CSP, so it is the modern choice.

Key idea

Clickjacking hides your page in a frame to steal clicks; frame ancestors restricts who may embed you and stops it.

Check yourself

Answer to earn rating on the learn ladder.

1. Which CSP directive prevents clickjacking?

2. What is the legacy fallback header for framing control?