This lesson's interactive features are locked, please to keep using them

Clickjacking

Clickjacking tricks a user into clicking on a real application that has been disguised (or hidden) inside an attacker's page.

The attacker might place a sensitive page underneath a fake button:

<button>Claim free gems</button>

<iframe
  src="https://bank.example.com/confirm-transfer"
  style="opacity: 0; position: absolute; top: 0; left: 0;"
></iframe>

If the victim is signed in to bank.example.com, the framed page loads with their bank session. The attacker doesn't need to read the page, they just need to bait the victim into clicking on the fake button and triggering the real page's action.

Control Framing

The frame-ancestors CSP directive controls which parent origins can embed a response:

Content-Security-Policy: frame-ancestors 'self'

'self' allows same-origin parents while blocking an attacker's origin.

The older X-Frame-Options header can provide a fallback for older browsers:

X-Frame-Options: SAMEORIGIN

If your app never needs to be framed, just use frame-ancestors 'none' and X-Frame-Options: DENY. If it intentionally supports same-origin framing, use 'self' and SAMEORIGIN instead.

Assignment

Bearly Evil can frame Bearly Secure's account page. Block cross-origin framing without breaking Acorn Express.

Start the app and log in as Mabel.
In a separate shell session, start Bearly Evil:
```
npm run attacker-lab
```
Go to http://localhost:4000/, then check the "Framing and clickjacking" section. You should see Mabel's account page.
In src/app.ts, add frame-ancestors 'self' to Bearly Secure's existing CSP.
Set the X-Frame-Options: SAMEORIGIN response header as a fallback.

With Bearly Secure and Bearly Evil still running, run and submit the CLI tests from the project root.

You can stop Bearly Evil after successfully submitting this lesson.