Cross-Site Scripting (XSS) - Contextual Encoding, Strict CSP Nonces & Trusted Types

# XSS: the right encoding depends on WHERE the value lands (the context).
import html, json
from urllib.parse import urlparse

def body(v):  # HTML text node: entity-encode
    return f"<p>Hello {html.escape(v)}</p>"

def attr(v):  # quoted attribute: escape quotes too (html.escape does by default)
    return f'<input value="{html.escape(v, quote=True)}">'

def js_data(v):  # data for a script: JSON-encode, and neutralize '</' and '<!--'
    safe = json.dumps(v).replace("<", "\\u003c")
    return f"<script>const user = {safe};</script>"

def href(v):  # URL attribute: encoding is NOT enough, the scheme must be allowed
    scheme = urlparse(v.strip()).scheme.lower()
    if scheme not in ("http", "https", "mailto", ""):
        v = "about:blank"
    return f'<a href="{html.escape(v)}">profile</a>'

print(body('<img src=x onerror=alert(1)>'))
print(attr('" autofocus onfocus="alert(1)'))
print(js_data('</script><script>alert(1)</script>'))
print(href("javascript:alert(document.cookie)"))
print(href("  JaVaScRiPt:alert(1)"))
print(href("https://example.com/u/42"))

<p>Hello &lt;img src=x onerror=alert(1)&gt;</p>
<input value="&quot; autofocus onfocus=&quot;alert(1)">
<script>const user = "\u003c/script>\u003cscript>alert(1)\u003c/script>";</script>
<a href="about:blank">profile</a>
<a href="about:blank">profile</a>
<a href="https://example.com/u/42">profile</a>

// CSP with a per-response nonce: only <script> tags carrying today's nonce run,
// so an injected <script> or inline onerror= handler is blocked by the browser.
// (Node's crypto via require because the sandbox has no @types/node.)
declare function require(m: string): any;
const { randomBytes } = require("crypto");

function buildCsp(nonce: string): string {
  return [
    "default-src 'self'",
    `script-src 'nonce-${nonce}' 'strict-dynamic'`, // trust propagates to scripts it loads
    "object-src 'none'",
    "base-uri 'none'", // stop <base href> hijacking relative script URLs
    "frame-ancestors 'none'",
    "require-trusted-types-for 'script'", // DOM sinks need TrustedHTML
  ].join("; ");
}

// Tiny model of the browser's decision for inline script elements.
function allowedToRun(tag: { nonce?: string; inlineHandler?: boolean }, nonce: string): boolean {
  if (tag.inlineHandler) return false; // no 'unsafe-inline'/'unsafe-hashes' => handlers blocked
  return tag.nonce === nonce;
}

const nonce: string = randomBytes(16).toString("base64");
console.log("CSP:", buildCsp("<nonce>"));
const cases = [
  { name: "app bundle <script nonce=...>", tag: { nonce } },
  { name: "injected <script>alert(1)</script>", tag: {} },
  { name: "injected <img onerror=...>", tag: { inlineHandler: true } },
  { name: "attacker guesses old nonce", tag: { nonce: "c3RhbGUtbm9uY2U=" } },
];
for (const c of cases) console.log(`${c.name.padEnd(38)} -> ${allowedToRun(c.tag, nonce) ? "runs" : "BLOCKED"}`);

CSP: default-src 'self'; script-src 'nonce-<nonce>' 'strict-dynamic'; object-src 'none'; base-uri 'none'; frame-ancestors 'none'; require-trusted-types-for 'script'
app bundle <script nonce=...>          -> runs
injected <script>alert(1)</script>     -> BLOCKED
injected <img onerror=...>             -> BLOCKED
attacker guesses old nonce             -> BLOCKED