mosaic/stack
1
0
Fork 0
Code Issues 10 Pull Requests 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");
});
});
});
});

21
apps/web/src/components/mindmap/MermaidViewer.tsx
View File

@@ -3,6 +3,7 @@
import { useCallback, useEffect, useRef, useState } from "react";
import mermaid from "mermaid";
import DOMPurify from "dompurify";
interface MermaidViewerProps {
diagram: string;
@@ -48,9 +49,27 @@ export function MermaidViewer({
// Render the diagram
const { svg } = await mermaid.render(id, diagram);
// Sanitize SVG output with DOMPurify for defense-in-depth
// Configure DOMPurify to allow SVG elements but remove scripts and dangerous attributes
const sanitizedSvg = DOMPurify.sanitize(svg, {
USE_PROFILES: { svg: true, svgFilters: true },
ADD_TAGS: ["use"], // Allow SVG use elements
FORBID_TAGS: ["script", "iframe", "object", "embed", "base"],
FORBID_ATTR: [
"onerror",
"onload",
"onclick",
"onmouseover",
"onfocus",
"onblur",
"onchange",
"oninput",
],
});
const container = containerRef.current;
if (container) {
container.innerHTML = svg;
container.innerHTML = sanitizedSvg;
// Add click handlers to nodes if callback provided
if (onNodeClick) {

45
apps/web/src/components/mindmap/hooks/useGraphData.ts
View File

@@ -121,6 +121,35 @@ interface UseGraphDataResult {
const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000";
/**
* Sanitize labels for Mermaid diagrams to prevent XSS
* Removes HTML tags, dangerous protocols, and special characters
*/
function sanitizeMermaidLabel(label: string): string {
if (!label) return "";
// Remove HTML tags
let sanitized = label.replace(/<[^>]*>/g, "");
// Remove dangerous protocols
sanitized = sanitized.replace(/javascript:/gi, "");
sanitized = sanitized.replace(/data:/gi, "");
sanitized = sanitized.replace(/vbscript:/gi, "");
// Remove control characters
// eslint-disable-next-line no-control-regex
sanitized = sanitized.replace(/[\x00-\x1F\x7F]/g, "");
// Escape Mermaid special characters that could break syntax
sanitized = sanitized.replace(/["\n\r]/g, " ");
sanitized = sanitized.replace(/[[\](){}]/g, "");
// Truncate to prevent DoS
sanitized = sanitized.slice(0, 200);
return sanitized.trim();
}
async function apiFetch<T>(
endpoint: string,
accessToken: string | null,
@@ -311,35 +340,35 @@ export function useGraphData(options: UseGraphDataOptions = {}): UseGraphDataRes
nodesByType[nodeType].push(node);
});
// Add nodes by type
// Add nodes by type with sanitized labels
Object.entries(nodesByType).forEach(([type, nodes]): void => {
diagram += ` ${type}\n`;
diagram += ` ${sanitizeMermaidLabel(type)}\n`;
nodes.forEach((node): void => {
diagram += ` ${node.title}\n`;
diagram += ` ${sanitizeMermaidLabel(node.title)}\n`;
});
});
} else {
diagram = "graph TD\n";
// Add all edges
// Add all edges with sanitized labels
graph.edges.forEach((edge): void => {
const source = graph.nodes.find((n): boolean => n.id === edge.source_id);
const target = graph.nodes.find((n): boolean => n.id === edge.target_id);
if (source && target) {
const sourceLabel = source.title.replace(/["\n]/g, " ");
const targetLabel = target.title.replace(/["\n]/g, " ");
const sourceLabel = sanitizeMermaidLabel(source.title);
const targetLabel = sanitizeMermaidLabel(target.title);
diagram += ` ${edge.source_id}["${sourceLabel}"] --> ${edge.target_id}["${targetLabel}"]\n`;
}
});
// Add standalone nodes (no edges)
// Add standalone nodes (no edges) with sanitized labels
graph.nodes.forEach((node): void => {
const hasEdge = graph.edges.some(
(e): boolean => e.source_id === node.id || e.target_id === node.id
);
if (!hasEdge) {
const label = node.title.replace(/["\n]/g, " ");
const label = sanitizeMermaidLabel(node.title);
diagram += ` ${node.id}["${label}"]\n`;
}
});