⚠ FOR SECURITY TESTING PURPOSES ONLY — DO NOT DEPLOY IN PRODUCTION
Clickjacking
UI Redress / Clickjacking
The target page sets no X-Frame-Options or CSP frame-ancestors header, so it can be embedded in an attacker-controlled iframe. A transparent overlay tricks users into clicking buttons they cannot see.
> Show hints
- [1] Check response headers: X-Frame-Options and Content-Security-Policy frame-ancestors should be present
- [2] Playwright: navigate to attacker page, assert iframe loads target, click overlay button
- [3] Adjust opacity slider to 0 — the victim sees only the decoy, not the real button underneath
- [4] The target page at /labs/clickjack-target has a sensitive Transfer Funds action
[1] Header Check
Verify the target page is missing framing protections. Playwright can assert these headers programmatically.
[2] Live Attack Demo
The target page is embedded in an iframe below. A decoy button is overlaid on top. Drag the opacity slider to reveal the hidden iframe underneath.
iframe opacity:0.50
[Attacker-controlled page — victim sees this]
Slide opacity to 0 to see what the victim sees. Slide to 1 to see the real target underneath.
[3] Playwright Detection Strategy
// 1. Check headers — missing X-Frame-Options is the signal
const res = await page.goto('/labs/clickjack-target');
const xfo = res.headers()['x-frame-options'];
// xfo === undefined -> VULNERABLE
// 2. Verify the page actually loads inside an iframe
await page.goto('/labs/clickjacking');
const frame = page.frameLocator('[data-testid="clickjack-iframe"]');
await expect(frame.locator('text=Transfer Funds')).toBeVisible();
// If this passes -> page is frameable -> clickjacking confirmed