mosaic/stack
1
0
Fork 0
Code Issues 10 Pull Requests 1 Actions Packages Projects Releases 2 Wiki Activity

fix(#200): Enhance Mermaid XSS protection with DOMPurify
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
Details

Browse Source 
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:
Jason Woltje
2026-02-03 22:55:57 -06:00
parent 6ff6957db4
commit f87a28ac55
12 changed files with 537 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
apps/web/src/components/mindmap/MermaidViewer.test.tsx Normal file
View File

@@ -0,0 +1,237 @@
/**
* MermaidViewer XSS Protection Tests
* Tests defense-in-depth security layers for Mermaid diagram rendering
*/
import { describe, it, expect, vi, beforeEach } from "vitest";
import { render, waitFor } from "@testing-library/react";
import { MermaidViewer } from "./MermaidViewer";
// Mock mermaid
vi.mock("mermaid", () => ({
default: {
initialize: vi.fn(),
render: vi.fn(),
},
}));
describe("MermaidViewer XSS Protection", () => {
beforeEach(() => {
vi.clearAllMocks();
});
describe("Script tag injection", () => {
it("should block script tags in labels", async () => {
const maliciousDiagram = `graph TD
A["<script>alert('XSS')</script>"]`;
const { container } = render(<MermaidViewer diagram={maliciousDiagram} />);
await waitFor(() => {
const content = container.innerHTML;
// Should not contain script tags
expect(content).not.toContain("<script>");
expect(content).not.toContain("alert");
});
});
it("should block script tags with various casings", async () => {
const maliciousDiagram = `graph TD
A["<ScRiPt>alert('XSS')</sCrIpT>"]`;
const { container } = render(<MermaidViewer diagram={maliciousDiagram} />);
await waitFor(() => {
const content = container.innerHTML.toLowerCase();
expect(content).not.toContain("<script>");
});
});
});
describe("Event handler injection", () => {
it("should block onerror event handlers", async () => {
const maliciousDiagram = `graph TD
A["<img src=x onerror=alert(1)>"]`;
const { container } = render(<MermaidViewer diagram={maliciousDiagram} />);
await waitFor(() => {
const content = container.innerHTML;
expect(content).not.toContain("onerror");
expect(content).not.toContain("alert(1)");
});
});
it("should block onclick event handlers", async () => {
const maliciousDiagram = `graph TD
A["<div onclick=alert(1)>Click</div>"]`;
const { container } = render(<MermaidViewer diagram={maliciousDiagram} />);
await waitFor(() => {
const content = container.innerHTML;
expect(content).not.toContain("onclick");
});
});
it("should block onload event handlers", async () => {
const maliciousDiagram = `graph TD
A["<body onload=alert(1)>"]`;
const { container } = render(<MermaidViewer diagram={maliciousDiagram} />);
await waitFor(() => {
const content = container.innerHTML;
expect(content).not.toContain("onload");
});
});
});
describe("JavaScript URL injection", () => {
it("should block javascript: URLs in href", async () => {
const maliciousDiagram = `graph TD
A["<a href='javascript:alert(1)'>Click</a>"]`;
const { container } = render(<MermaidViewer diagram={maliciousDiagram} />);
await waitFor(() => {
const content = container.innerHTML;
expect(content).not.toContain("javascript:");
});
});
it("should block javascript: URLs in src", async () => {
const maliciousDiagram = `graph TD
A["<img src='javascript:alert(1)'>"]`;
const { container } = render(<MermaidViewer diagram={maliciousDiagram} />);
await waitFor(() => {
const content = container.innerHTML;
expect(content).not.toContain("javascript:");
});
});
});
describe("Data URL injection", () => {
it("should block data URLs with scripts", async () => {
const maliciousDiagram = `graph TD
A["<img src='data:text/html,<script>alert(1)</script>'>"]`;
const { container } = render(<MermaidViewer diagram={maliciousDiagram} />);
await waitFor(() => {
const content = container.innerHTML;
expect(content).not.toContain("data:text/html");
expect(content).not.toContain("<script>");
});
});
it("should block data URLs with base64 encoded scripts", async () => {
const maliciousDiagram = `graph TD
A["<object data='data:text/html;base64,PHNjcmlwdD5hbGVydCgxKTwvc2NyaXB0Pg=='>"]`;
const { container } = render(<MermaidViewer diagram={maliciousDiagram} />);
await waitFor(() => {
const content = container.innerHTML;
expect(content).not.toContain("data:text/html");
});
});
});
describe("SVG injection", () => {
it("should block SVG with embedded scripts", async () => {
const maliciousDiagram = `graph TD
A["<svg><script>alert(1)</script></svg>"]`;
const { container } = render(<MermaidViewer diagram={maliciousDiagram} />);
await waitFor(() => {
const content = container.innerHTML;
// SVG should be sanitized to remove scripts
expect(content).not.toContain("<script>");
});
});
it("should block SVG with xlink:href", async () => {
const maliciousDiagram = `graph TD
A["<svg><use xlink:href='javascript:alert(1)'/></svg>"]`;
const { container } = render(<MermaidViewer diagram={maliciousDiagram} />);
await waitFor(() => {
const content = container.innerHTML;
expect(content).not.toContain("javascript:");
});
});
});
describe("HTML entity bypass", () => {
it("should block HTML entity encoded scripts", async () => {
const maliciousDiagram = `graph TD
A["&lt;script&gt;alert(1)&lt;/script&gt;"]`;
const { container } = render(<MermaidViewer diagram={maliciousDiagram} />);
await waitFor(() => {
const content = container.innerHTML;
// Should not execute the decoded script
expect(content).not.toContain("alert(1)");
});
});
});
describe("Safe content", () => {
it("should allow safe plain text labels", async () => {
const safeDiagram = `graph TD
A["Safe Label"]
B["Another Safe Label"]
A --> B`;
const { container } = render(<MermaidViewer diagram={safeDiagram} />);
await waitFor(() => {
// Should render without errors
expect(container.querySelector(".mermaid-container")).toBeTruthy();
});
});
it("should allow safe special characters", async () => {
const safeDiagram = `graph TD
A["Label with & and # and @"]`;
const { container } = render(<MermaidViewer diagram={safeDiagram} />);
await waitFor(() => {
expect(container.querySelector(".mermaid-container")).toBeTruthy();
});
});
});
describe("DOMPurify integration", () => {
it("should sanitize rendered SVG output", async () => {
const diagram = `graph TD
A["Test Node"]`;
// Mock mermaid to return SVG with potential XSS
const mermaid = await import("mermaid");
vi.mocked(mermaid.default.render).mockResolvedValue({
svg: "<svg><script>alert(1)</script><text>Test</text></svg>",
bindFunctions: vi.fn(),
diagramType: "flowchart",
});
const { container } = render(<MermaidViewer diagram={diagram} />);
await waitFor(() => {
const content = container.innerHTML;
// DOMPurify should remove the script tag
expect(content).not.toContain("<script>");
expect(content).not.toContain("alert(1)");
// But keep the safe SVG elements
expect(content).toContain("<svg");
});
});
});
});