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 Bearly Secure and log in as Mabel. In another shell, start Bearly Evil:
```
go run ./cmd/attackerlab
```
At http://localhost:4040/, confirm the framing and clickjacking section displays Mabel's account page.
In the existing security middleware, add frame-ancestors 'self' to CSP and send X-Frame-Options: SAMEORIGIN.

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

You can stop Bearly Evil after submitting the lesson.