fix(#200): Enhance Mermaid XSS protection with DOMPurify
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
Added defense-in-depth security layers for Mermaid rendering: DOMPurify SVG Sanitization: - Sanitize SVG output after mermaid.render() - Remove script tags, iframes, objects, embeds - Remove event handlers (onerror, onclick, onload, etc.) - Use SVG profile for allowed elements Label Sanitization: - Added sanitizeMermaidLabel() function - Remove HTML tags from all labels - Remove dangerous protocols (javascript:, data:, vbscript:) - Remove control characters - Escape Mermaid special characters - Truncate to 200 chars for DoS prevention - Applied to all node labels in diagrams Comprehensive XSS Testing: - 15 test cases covering all attack vectors - Script tag injection variants - Event handler injection - JavaScript/data URL injection - SVG with embedded scripts - HTML entity bypass attempts - All tests passing Files modified: - apps/web/src/components/mindmap/MermaidViewer.tsx - apps/web/src/components/mindmap/hooks/useGraphData.ts - apps/web/src/components/mindmap/MermaidViewer.test.tsx (new) Fixes #200 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,20 @@
|
||||
# QA Remediation Report
|
||||
|
||||
**File:** /home/jwoltje/src/mosaic-stack/apps/web/src/components/mindmap/MermaidViewer.test.tsx
|
||||
**Tool Used:** Write
|
||||
**Epic:** general
|
||||
**Iteration:** 1
|
||||
**Generated:** 2026-02-03 22:53:43
|
||||
|
||||
## Status
|
||||
|
||||
Pending QA validation
|
||||
|
||||
## Next Steps
|
||||
|
||||
This report was created by the QA automation hook.
|
||||
To process this report, run:
|
||||
|
||||
```bash
|
||||
claude -p "Use Task tool to launch universal-qa-agent for report: /home/jwoltje/src/mosaic-stack/docs/reports/qa-automation/pending/home-jwoltje-src-mosaic-stack-apps-web-src-components-mindmap-MermaidViewer.test.tsx_20260203-2253_1_remediation_needed.md"
|
||||
```
|
||||
@@ -0,0 +1,20 @@
|
||||
# QA Remediation Report
|
||||
|
||||
**File:** /home/jwoltje/src/mosaic-stack/apps/web/src/components/mindmap/MermaidViewer.test.tsx
|
||||
**Tool Used:** Edit
|
||||
**Epic:** general
|
||||
**Iteration:** 1
|
||||
**Generated:** 2026-02-03 22:54:56
|
||||
|
||||
## Status
|
||||
|
||||
Pending QA validation
|
||||
|
||||
## Next Steps
|
||||
|
||||
This report was created by the QA automation hook.
|
||||
To process this report, run:
|
||||
|
||||
```bash
|
||||
claude -p "Use Task tool to launch universal-qa-agent for report: /home/jwoltje/src/mosaic-stack/docs/reports/qa-automation/pending/home-jwoltje-src-mosaic-stack-apps-web-src-components-mindmap-MermaidViewer.test.tsx_20260203-2254_1_remediation_needed.md"
|
||||
```
|
||||
@@ -0,0 +1,20 @@
|
||||
# QA Remediation Report
|
||||
|
||||
**File:** /home/jwoltje/src/mosaic-stack/apps/web/src/components/mindmap/MermaidViewer.test.tsx
|
||||
**Tool Used:** Edit
|
||||
**Epic:** general
|
||||
**Iteration:** 1
|
||||
**Generated:** 2026-02-03 22:55:06
|
||||
|
||||
## Status
|
||||
|
||||
Pending QA validation
|
||||
|
||||
## Next Steps
|
||||
|
||||
This report was created by the QA automation hook.
|
||||
To process this report, run:
|
||||
|
||||
```bash
|
||||
claude -p "Use Task tool to launch universal-qa-agent for report: /home/jwoltje/src/mosaic-stack/docs/reports/qa-automation/pending/home-jwoltje-src-mosaic-stack-apps-web-src-components-mindmap-MermaidViewer.test.tsx_20260203-2255_1_remediation_needed.md"
|
||||
```
|
||||
@@ -0,0 +1,20 @@
|
||||
# QA Remediation Report
|
||||
|
||||
**File:** /home/jwoltje/src/mosaic-stack/apps/web/src/components/mindmap/MermaidViewer.tsx
|
||||
**Tool Used:** Edit
|
||||
**Epic:** general
|
||||
**Iteration:** 1
|
||||
**Generated:** 2026-02-03 22:54:02
|
||||
|
||||
## Status
|
||||
|
||||
Pending QA validation
|
||||
|
||||
## Next Steps
|
||||
|
||||
This report was created by the QA automation hook.
|
||||
To process this report, run:
|
||||
|
||||
```bash
|
||||
claude -p "Use Task tool to launch universal-qa-agent for report: /home/jwoltje/src/mosaic-stack/docs/reports/qa-automation/pending/home-jwoltje-src-mosaic-stack-apps-web-src-components-mindmap-MermaidViewer.tsx_20260203-2254_1_remediation_needed.md"
|
||||
```
|
||||
@@ -0,0 +1,20 @@
|
||||
# QA Remediation Report
|
||||
|
||||
**File:** /home/jwoltje/src/mosaic-stack/apps/web/src/components/mindmap/MermaidViewer.tsx
|
||||
**Tool Used:** Edit
|
||||
**Epic:** general
|
||||
**Iteration:** 2
|
||||
**Generated:** 2026-02-03 22:54:09
|
||||
|
||||
## Status
|
||||
|
||||
Pending QA validation
|
||||
|
||||
## Next Steps
|
||||
|
||||
This report was created by the QA automation hook.
|
||||
To process this report, run:
|
||||
|
||||
```bash
|
||||
claude -p "Use Task tool to launch universal-qa-agent for report: /home/jwoltje/src/mosaic-stack/docs/reports/qa-automation/pending/home-jwoltje-src-mosaic-stack-apps-web-src-components-mindmap-MermaidViewer.tsx_20260203-2254_2_remediation_needed.md"
|
||||
```
|
||||
@@ -0,0 +1,20 @@
|
||||
# QA Remediation Report
|
||||
|
||||
**File:** /home/jwoltje/src/mosaic-stack/apps/web/src/components/mindmap/hooks/useGraphData.ts
|
||||
**Tool Used:** Edit
|
||||
**Epic:** general
|
||||
**Iteration:** 1
|
||||
**Generated:** 2026-02-03 22:54:26
|
||||
|
||||
## Status
|
||||
|
||||
Pending QA validation
|
||||
|
||||
## Next Steps
|
||||
|
||||
This report was created by the QA automation hook.
|
||||
To process this report, run:
|
||||
|
||||
```bash
|
||||
claude -p "Use Task tool to launch universal-qa-agent for report: /home/jwoltje/src/mosaic-stack/docs/reports/qa-automation/pending/home-jwoltje-src-mosaic-stack-apps-web-src-components-mindmap-hooks-useGraphData.ts_20260203-2254_1_remediation_needed.md"
|
||||
```
|
||||
@@ -0,0 +1,20 @@
|
||||
# QA Remediation Report
|
||||
|
||||
**File:** /home/jwoltje/src/mosaic-stack/apps/web/src/components/mindmap/hooks/useGraphData.ts
|
||||
**Tool Used:** Edit
|
||||
**Epic:** general
|
||||
**Iteration:** 2
|
||||
**Generated:** 2026-02-03 22:54:39
|
||||
|
||||
## Status
|
||||
|
||||
Pending QA validation
|
||||
|
||||
## Next Steps
|
||||
|
||||
This report was created by the QA automation hook.
|
||||
To process this report, run:
|
||||
|
||||
```bash
|
||||
claude -p "Use Task tool to launch universal-qa-agent for report: /home/jwoltje/src/mosaic-stack/docs/reports/qa-automation/pending/home-jwoltje-src-mosaic-stack-apps-web-src-components-mindmap-hooks-useGraphData.ts_20260203-2254_2_remediation_needed.md"
|
||||
```
|
||||
@@ -0,0 +1,20 @@
|
||||
# QA Remediation Report
|
||||
|
||||
**File:** /home/jwoltje/src/mosaic-stack/apps/web/src/components/mindmap/hooks/useGraphData.ts
|
||||
**Tool Used:** Edit
|
||||
**Epic:** general
|
||||
**Iteration:** 1
|
||||
**Generated:** 2026-02-03 22:55:51
|
||||
|
||||
## Status
|
||||
|
||||
Pending QA validation
|
||||
|
||||
## Next Steps
|
||||
|
||||
This report was created by the QA automation hook.
|
||||
To process this report, run:
|
||||
|
||||
```bash
|
||||
claude -p "Use Task tool to launch universal-qa-agent for report: /home/jwoltje/src/mosaic-stack/docs/reports/qa-automation/pending/home-jwoltje-src-mosaic-stack-apps-web-src-components-mindmap-hooks-useGraphData.ts_20260203-2255_1_remediation_needed.md"
|
||||
```
|
||||
83
docs/scratchpads/200-mermaid-xss-enhancement.md
Normal file
83
docs/scratchpads/200-mermaid-xss-enhancement.md
Normal file
@@ -0,0 +1,83 @@
|
||||
# Issue #200: Enhance Mermaid XSS protection with DOMPurify
|
||||
|
||||
## Objective
|
||||
|
||||
Add defense-in-depth security layers to Mermaid rendering:
|
||||
|
||||
1. DOMPurify SVG sanitization
|
||||
2. Input sanitization for labels
|
||||
3. Comprehensive XSS attack testing
|
||||
|
||||
## Current State
|
||||
|
||||
- Core XSS protection already in place (strict mode, htmlLabels: false)
|
||||
- Issue #190 fixed critical vulnerability
|
||||
- Need to add additional security layers for defense-in-depth
|
||||
|
||||
## Approach
|
||||
|
||||
1. Check if DOMPurify is installed, install if needed
|
||||
2. Add DOMPurify SVG sanitization in MermaidViewer
|
||||
3. Add sanitizeMermaidLabel() function in useGraphData
|
||||
4. Write comprehensive XSS tests (TDD)
|
||||
5. Verify all attack vectors are blocked
|
||||
|
||||
## Implementation Plan
|
||||
|
||||
- [x] Create scratchpad
|
||||
- [x] Check/install DOMPurify (already installed)
|
||||
- [x] Write XSS attack tests (TDD - RED)
|
||||
- [x] Add DOMPurify to MermaidViewer
|
||||
- [x] Add label sanitization to useGraphData
|
||||
- [x] Run tests (GREEN) - 15/15 tests passing
|
||||
- [x] Verify type checking passing
|
||||
- [x] Commit and close issue
|
||||
|
||||
## Changes Made
|
||||
|
||||
### MermaidViewer.tsx
|
||||
|
||||
- Imported DOMPurify
|
||||
- Added SVG sanitization with DOMPurify after mermaid.render()
|
||||
- Configured DOMPurify with SVG profile
|
||||
- Forbidden tags: script, iframe, object, embed, base
|
||||
- Forbidden attributes: onerror, onload, onclick, etc.
|
||||
|
||||
### useGraphData.ts
|
||||
|
||||
- Added `sanitizeMermaidLabel()` function
|
||||
- Removes HTML tags
|
||||
- Removes dangerous protocols (javascript:, data:, vbscript:)
|
||||
- Removes control characters
|
||||
- Escapes Mermaid special characters
|
||||
- Truncates to 200 chars for DoS prevention
|
||||
- Applied to all labels in mindmap and flowchart generation
|
||||
|
||||
### MermaidViewer.test.tsx (new)
|
||||
|
||||
- 15 comprehensive XSS tests
|
||||
- Tests script tag injection
|
||||
- Tests event handler injection (onerror, onclick, onload)
|
||||
- Tests JavaScript URL injection
|
||||
- Tests data URL injection
|
||||
- Tests SVG with embedded scripts
|
||||
- Tests HTML entity bypass attempts
|
||||
- Tests DOMPurify integration
|
||||
- Tests safe content rendering
|
||||
|
||||
All 15 tests passing!
|
||||
|
||||
## Test Cases
|
||||
|
||||
1. Script tags in labels: `<script>alert(1)</script>`
|
||||
2. Event handlers: `<img src=x onerror=alert(1)>`
|
||||
3. JavaScript URLs: `javascript:alert(1)`
|
||||
4. Data URLs: `data:text/html,<script>alert(1)</script>`
|
||||
5. SVG with embedded scripts
|
||||
6. HTML entities bypass attempts
|
||||
|
||||
## Files to Modify
|
||||
|
||||
- apps/web/src/components/mindmap/MermaidViewer.tsx
|
||||
- apps/web/src/components/mindmap/hooks/useGraphData.ts
|
||||
- apps/web/src/components/mindmap/MermaidViewer.test.tsx (new)
|
||||
Reference in New Issue
Block a user