tree 15122689ee81490ea8d3497b6baade986c6bad2c
parent 16098932295e067fb0a6b3ca2082b0d4b06027b4
author Philip Zeyliger <philip@bold.dev> 1749059373 +0000
committer Autoformatter <bot@sketch.dev> 1749060657 +0000

webui: implement DOMPurify sanitization for markdown security

Implement comprehensive HTML sanitization using DOMPurify library to
prevent XSS vulnerabilities in markdown rendering while preserving
full markdown functionality.

Problem Analysis:
Chat timeline and tool card components used markdown rendering with
unsafeHTML directive and no HTML sanitization, creating security risks:
- Raw HTML from user input could execute arbitrary JavaScript
- Script tags, event handlers, and dangerous elements passed through
- marked.js default configuration allows HTML passthrough
- No protection against malicious content in conversation history

Security Solution - DOMPurify Implementation:
Following marked.js documentation recommendations, implemented industry-standard
DOMPurify library for comprehensive HTML sanitization using whitelist approach.

DOMPurify Security Advantages:
- Industry-standard library with regular security updates
- Comprehensive whitelist-based sanitization approach
- Automatically handles new XSS attack vectors as they emerge
- Completely removes dangerous elements rather than escaping
- Configurable allowlists for specific use case requirements
- Battle-tested across millions of applications

Implementation Changes:

1. Package Dependencies:
   - Added dompurify package dependency to webui/package.json
   - DOMPurify includes built-in TypeScript definitions
   - Leveraged existing transitive dependency through mermaid

2. Enhanced sketch-timeline-message.ts Security:
   - Integrated DOMPurify.sanitize() for HTML sanitization
   - Configured allowlist for safe HTML elements (p, strong, code, etc.)
   - Added support for mermaid diagram elements (svg, path, etc.)
   - Included code block functionality attributes (data-*, class, id)
   - Maintained existing mermaid diagram and code block functionality

3. Enhanced sketch-tool-card.ts Security:
   - Implemented DOMPurify sanitization in shared renderMarkdown utility
   - Configured appropriate allowlist for tool card content display
   - Simplified implementation using default marked.js settings
   - Maintained backward compatibility with existing tool components

4. DOMPurify Configuration:
   - ALLOWED_TAGS: Comprehensive list of safe HTML elements
   - ALLOWED_ATTR: Specific attributes for links, styling, functionality
   - ALLOW_DATA_ATTR: true for code copy buttons and interactions
   - KEEP_CONTENT: true to preserve text content and formatting

Security Verification:
- All dangerous HTML completely removed (script, iframe, object, etc.)
- Event handlers stripped from elements (onload, onerror, onclick)
- JavaScript URLs neutralized (javascript: protocol blocked)
- XSS attack vectors comprehensively mitigated through allowlist approach
- Edge cases handled automatically by library security updates

Functional Verification:
- Markdown formatting fully preserved (bold, italic, code, links)
- Code blocks render correctly with syntax highlighting classes
- Mermaid diagrams continue working with required SVG elements
- Copy-to-clipboard functionality maintained with data attributes
- All existing chat timeline and tool card features functional

Technical Benefits:
- Reduced maintenance burden - no custom escaping logic to maintain
- Automatic protection against new attack vectors via library updates
- Industry-standard approach following marked.js documentation recommendations
- Comprehensive allowlist prevents unknown dangerous elements
- Better performance through optimized library implementation

Testing:
- Verified all XSS attack vectors safely handled through comprehensive tests
- Confirmed markdown functionality preserved across all components
- Build process succeeds without TypeScript errors
- Comprehensive security test suite validates sanitization effectiveness

This implementation follows security best practices recommended by marked.js
documentation and provides robust protection against HTML injection attacks
while maintaining full markdown functionality and user experience quality.

Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s233c12c6daac5bb0k