CVE-2026-41149: Mermaid HTML Injection Vulnerability

CVE-2026-41149 Overview

CVE-2026-41149 is an HTML injection vulnerability in Mermaid, a JavaScript library that renders Markdown-inspired text into diagrams and charts. The classDef directive in Mermaid state diagrams permits DOM injection that escapes the SVG rendering context under the default configuration. Mermaid strips <script> tags during processing, which prevents direct cross-site scripting (XSS), but attackers can still inject arbitrary HTML into the host page. The flaw affects versions 10.9.5 and earlier, and the 11.0.0-alpha.1 through 11.14.0 release line. Maintainers fixed the issue in versions 10.9.6 and 11.15.0.

Critical Impact
Attacker-controlled Mermaid diagram input can inject HTML into the DOM of any application that renders untrusted diagrams using default settings, enabling content spoofing, phishing overlays, and UI redress attacks.

Affected Products

Mermaid versions 10.9.5 and earlier
Mermaid versions 11.0.0-alpha.1 through 11.14.0
Applications embedding Mermaid with the default securityLevel configuration

Discovery Timeline

2026-05-22 - CVE-2026-41149 published to NVD
2026-05-26 - Last updated in NVD database

Technical Details for CVE-2026-41149

Vulnerability Analysis

Mermaid renders user-supplied diagram source into SVG markup inserted into the host DOM. The classDef directive in state diagrams allows authors to define CSS class styles applied to diagram elements. The renderer concatenates the styles and textStyles strings into inline <style> content without correctly isolating them from the surrounding HTML context. As a result, payloads inside classDef directives break out of the SVG context and land in the parent DOM. While Mermaid sanitization strips <script> tags, attackers retain the ability to inject arbitrary tags, event handlers on non-script elements, and styled overlays. This classifies as code injection [CWE-94] expressed through markup rather than executable script.

Root Cause

The root cause is unsafe string concatenation of class definition styles into the rendered output. The pre-patch implementation built CSS as text and inserted it through innerHTML-style operations, which parsed attacker-controlled punctuation as HTML. The fix moves style construction to the CSS Object Model (CSSOM) via a new cssStyleSheetToString helper in packages/mermaid/src/mermaidAPI.ts, ensuring style declarations are produced by browser CSS parsing rather than raw concatenation.

Attack Vector

An attacker submits a crafted Mermaid state diagram containing a malicious classDef directive to any application that renders untrusted Mermaid input. Once a victim views the rendered diagram, the injected HTML executes inside the application's origin. Exploitation requires user interaction in the form of viewing the rendered page (UI:P).

typescript

// Security patch in packages/mermaid/src/mermaidAPI.ts
// fix: create CSS styles using the CSSOM
import errorRenderer from './diagrams/error/errorRenderer.js';
import { attachFunctions } from './interactionDb.js';
import { log, setLogLevel } from './logger.js';
-import getStyles from './styles.js';
+import getStyles, { cssStyleSheetToString } from './styles.js';
import theme from './themes/index.js';
import DOMPurify from 'dompurify';
import type { MermaidConfig } from './config.type.js';

// Source: https://github.com/mermaid-js/mermaid/commit/4e2d512bf5bf6f9de1a8f0a48da78dc4d09ac4f3

typescript

// Type contract clarifying how style strings are interpreted
// packages/mermaid/src/diagram-api/types.ts
export interface DiagramStyleClassDef {
  id: string;
+ /**
+  * The styles to apply to the class for HTML rendering.
+  * These are expected to be CSS property declarations without a trailing semicolon, e.g. `color: red`.
+  */
  styles?: string[];
+ /**
+  * The styles to apply to `<tspan>` elements with the given class.
+  */
  textStyles?: string[];
}

// Source: https://github.com/mermaid-js/mermaid/commit/37ff937f1da2e19f882fd1db01235db4d01f4056

Detection Methods for CVE-2026-41149

Indicators of Compromise

Mermaid diagram sources containing classDef directives with embedded angle brackets, quotes, or HTML tag names in the style list
Rendered pages where Mermaid output contains DOM nodes outside the expected <svg> subtree
Web application logs showing diagram input payloads with strings like }</style>, onerror=, or <img inside classDef lines

Detection Strategies

Inventory all applications and documentation platforms that embed Mermaid and identify the version in use via package-lock.json, yarn.lock, or bundled asset hashes.
Inspect server-side stored content (wikis, issue trackers, notebooks) for Mermaid blocks containing classDef directives with suspicious characters.
Add Content Security Policy (CSP) violation reporting to surface unexpected inline HTML or style sources originating from Mermaid renders.

Monitoring Recommendations

Monitor outbound network requests triggered by rendered Mermaid diagrams, particularly image and link loads to untrusted hosts.
Track Mermaid library versions across repositories using software composition analysis (SCA) tooling.
Alert on user reports of unexpected UI elements, login prompts, or overlays appearing on pages containing diagrams.

How to Mitigate CVE-2026-41149

Immediate Actions Required

Upgrade Mermaid to version 10.9.6 for the 10.x branch or 11.15.0 for the 11.x branch.
For applications that cannot upgrade immediately, set the Mermaid configuration option "securityLevel": "sandbox" to render diagrams inside a sandboxed <iframe>.
Treat all user-submitted Mermaid source as untrusted and apply server-side input review where feasible.

Patch Information

The fix is implemented across two commits in the mermaid-js/mermaid repository: commit 37ff937 and commit 4e2d512. Both rework style construction to use the CSSOM, preventing raw style strings from being interpreted as HTML. Full details are available in the GitHub Security Advisory GHSA-ghcm-xqfw-q4vr.

Workarounds

Set securityLevel: 'sandbox' in the Mermaid initialization configuration to isolate rendering inside an iframe.
Enforce a strict Content Security Policy that blocks inline event handlers and restricts image, frame, and style sources.
Restrict Mermaid rendering to authenticated, trusted authors until upgrade is complete.

bash

# Configuration example: enable sandbox rendering as a workaround
mermaid.initialize({
  startOnLoad: true,
  securityLevel: 'sandbox'
});

# npm upgrade commands
npm install mermaid@11.15.0
# or for the 10.x branch
npm install mermaid@10.9.6