Cross-Site Scripting (XSS) Prevention in Modern Single Page Applications: DOMPurify and Trusted Types

Why Framework Escaping Is Not Enough

Modern frontend frameworks (React, Vue, Angular) automatically escape variables rendered in standard templates. However, vulnerabilities inevitably occur when developers use escape hatches such as dangerouslySetInnerHTML or v-html to render rich text from CMSs or WYSIWYG editors.

Sanitization with DOMPurify

import DOMPurify from 'dompurify';

const rawUserContent = getBlogComment();
const cleanHTML = DOMPurify.sanitize(rawUserContent, {
    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'code'],
    ALLOWED_ATTR: ['href', 'target', 'rel']
});

Enforce strict Content Security Policy (CSP) headers with require-trusted-types-for 'script' to block unvalidated DOM injections at the browser engine level.