dom-security-hardening

DOM Security Hardening

Purpose

XSS attacks kill applications. This skill hardens the DOM attack surface by enforcing a strict Content Security Policy, eliminating unsafe DOM APIs, and stripping execution vectors like inline scripts and styles. Following this skill is MANDATORY for any user-facing web application handling user input.

When to use

• Setting up the initial index.html or document root of a web application
• Refactoring legacy code that relies on direct DOM manipulation
• Auditing a frontend codebase for XSS vulnerabilities
• Processing rich text or markdown input from untrusted users
• Creating forms or chat systems that accept user input

When NOT to use

• CSS framework design (separate concern)
• React component prop validation (use React Component Design)
• Backend input validation (different layer, still required)

Inputs required

• HTML document structure
• JavaScript files with DOM manipulation
• Understanding of Content Security Policy basics
• Sanitizer library decision (DOMPurify, sanitize-html, etc.)

Workflow

1. Enforce CSP: Add strict <meta http-equiv="Content-Security-Policy"> tag in HTML <head> (or HTTP headers)
2. Externalize Assets: Extract ALL inline <script> and <style> blocks into separate .js and .css files
3. Remove Inline Events: Replace inline onclick="...", onchange="..." with standard addEventListener bindings
4. Replace Unsafe DOM: Replace innerHTML, outerHTML, dangerouslySetInnerHTML with textContent or innerText
5. Implement Sanitizer: If HTML rendering is REQUIRED, use DOMPurify or equivalent BEFORE insertion
6. Test CSP: Verify policy blocks all unauthorized execution attempts
7. Verify No Bypasses: Use security scanner (OWASP ZAP, Burp) to confirm XSS vectors are closed

Rules

• MUST implement strict CSP: default-src 'self'; script-src 'self'; style-src 'self'; object-src 'none'
• MUST NEVER use inline <script> blocks in HTML
• MUST NEVER use inline style="..." attributes
• MUST NEVER use eval(), setTimeout(string), new Function(string)
• MUST NEVER use innerHTML, outerHTML, or dangerouslySetInnerHTML with user input
• MUST use textContent or innerText for all dynamic text insertions
• MUST sanitize user HTML with DOMPurify before any insertion
• MUST NOT use 'unsafe-inline' or 'unsafe-eval' in CSP