{
    "slug": "js_sanitisation",
    "term": "Client-Side Sanitisation",
    "category": "javascript",
    "difficulty": "intermediate",
    "short": "DOMPurify and the Sanitizer API remove dangerous HTML before insertion — complementing PHP's server-side htmlspecialchars for rich-text scenarios.",
    "long": "When rich HTML must be rendered (user-formatted posts, markdown output), textContent is too restrictive. DOMPurify.sanitize(html) strips script tags, event handlers, and dangerous attributes while keeping safe formatting. The native Sanitizer API (Chrome 105+) provides built-in sanitisation. Trusted Types (Chrome) enforce that only sanitised values reach innerHTML. Server-side sanitisation (PHP's HTMLPurifier) is the primary defence — client-side sanitisation is defence-in-depth.",
    "aliases": [
        "DOMPurify",
        "Sanitizer API",
        "Trusted Types",
        "XSS prevention JS"
    ],
    "tags": [
        "javascript",
        "security",
        "xss"
    ],
    "misconception": "Client-side DOMPurify is sufficient XSS protection — DOMPurify can be bypassed if the attacker controls the execution environment; server-side sanitisation (HTMLPurifier, strip_tags with allowlist) must be the primary defence.",
    "why_it_matters": "Rich text editors and markdown renderers must insert HTML — without sanitisation any stored user content becomes a stored XSS attack vector.",
    "common_mistakes": [
        "Relying on DOMPurify as the only XSS defence (no server-side sanitisation)",
        "Not configuring DOMPurify allowlist for your specific allowed tags",
        "Sanitising after insertion — sanitise before innerHTML, not after"
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "xss",
        "dom_xss",
        "content_security_policy",
        "js_dom_manipulation"
    ],
    "prerequisites": [
        "xss",
        "js_dom_manipulation"
    ],
    "refs": [
        "https://github.com/cure53/DOMPurify"
    ],
    "bad_code": "// Raw innerHTML — stored XSS:\nel.innerHTML = post.htmlContent; // attacker's script executes",
    "good_code": "// DOMPurify — safe HTML insertion:\nimport DOMPurify from 'dompurify';\n\nconst clean = DOMPurify.sanitize(post.htmlContent, {\n    ALLOWED_TAGS: ['b','i','em','strong','a','p','ul','li'],\n    ALLOWED_ATTR: ['href', 'target'],\n});\nel.innerHTML = clean;\n\n// Native Sanitizer API (modern browsers):\nconst sanitizer = new Sanitizer();\nel.setHTML(post.htmlContent, { sanitizer });",
    "quick_fix": "Use DOMPurify.sanitize(html) before any innerHTML assignment of user-generated content — and also sanitise server-side with HTMLPurifier",
    "severity": "critical",
    "effort": "low",
    "created": "2026-03-17",
    "updated": "2026-03-22",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/js_sanitisation",
        "html_url": "https://codeclaritylab.com/glossary/js_sanitisation",
        "json_url": "https://codeclaritylab.com/glossary/js_sanitisation.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[Client-Side Sanitisation](https://codeclaritylab.com/glossary/js_sanitisation) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/js_sanitisation"
            }
        }
    }
}