Client-Side Sanitisation

Also Known As

TL;DR

Explanation

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.

Common Misconception

Why It Matters

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

Code Examples

// Raw innerHTML — stored XSS:
el.innerHTML = post.htmlContent; // attacker's script executes

// DOMPurify — safe HTML insertion:
import DOMPurify from 'dompurify';

const clean = DOMPurify.sanitize(post.htmlContent, {
    ALLOWED_TAGS: ['b','i','em','strong','a','p','ul','li'],
    ALLOWED_ATTR: ['href', 'target'],
});
el.innerHTML = clean;

// Native Sanitizer API (modern browsers):
const sanitizer = new Sanitizer();
el.setHTML(post.htmlContent, { sanitizer });

References

• ↗ https://github.com/cure53/DOMPurify

Tags

Related Terms