Mermaid does not properly sanitize architecture diagram iconText leading to XSSGHSA-8gwm-58g9-j8pw
Fix: mermaid-js/mermaid@2aa8330GHSA-8gwm-58g9-j8pw is a Cross-site Scripting (XSS) vulnerability in mermaid. A fix is available for mermaid — see the affected versions and patch details below.
Exploitation Status
Proof-of-concept exploit code exists
- CISA’s SSVC triage found public proof-of-concept exploit code for this CVE, though no confirmed active exploitation.
Exploitation and automatability from CISA’s SSVC triage for GHSA-8gwm-58g9-j8pw.
EPSS Exploitation Probability
Probability of exploitation in the next 30 days, from FIRST.org EPSS.
Real-World Exposure
How broadly this vulnerability is actually deployed: weekly install volume shows current usage, and reverse-dependency count shows how many other packages break if it stays unpatched.
mermaidnpmDescription
Summary
In the default configuration of mermaid 11.9.0, user supplied input for architecture diagram icons is passed to the d3 html() method, creating a sink for cross site scripting.
Details
Architecture diagram service iconText values are passed to the d3 html() method, allowing malicious users to inject arbitrary HTML and cause XSS when mermaid-js is used in it's default configuration.
The vulnerability lies here:
export const drawServices = async function (
db: ArchitectureDB,
elem: D3Element,
services: ArchitectureService[]
): Promise<number> {
for (const service of services) {
/** ... **/
} else if (service.iconText) {
bkgElem.html(
`<g>${await getIconSVG('blank', { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}</g>`
);
const textElemContainer = bkgElem.append('g');
const fo = textElemContainer
.append('foreignObject')
.attr('width', iconSize)
.attr('height', iconSize);
const divElem = fo
.append('div')
.attr('class', 'node-icon-text')
.attr('style', `height: ${iconSize}px;`)
.append('div')
.html(service.iconText); // <- iconText passed into innerHTML
/** ... **/
};
};
This issue was introduced with 734bde38777c9190a5a72e96421c83424442d4e4, around 15 months ago, which was released in v11.1.0.
PoC
Render the following diagram and observe the modified DOM.
architecture-beta
group api(cloud)[API]
service db "<img src=x onerror=\"document.write(`xss on ${document.domain}`)\">" [Database] in api
Impact
XSS on all sites that use mermaid and render user supplied diagrams without further sanitization.
Remediation
Sanitize the value of iconText before passing it to html().
Affected Packages
| Ecosystem | Package | Vulnerable range | Fix |
|---|---|---|---|
| 📦npm | mermaid | ≥ 11.1.0&&< 11.10.0 | 11.10.0npm install mermaid@11.10.0 |
Affected Products
mermaidmermaid_projectDetection & mitigation playbook
Open-source dependencyDetect
Scan your dependency tree (package-lock.json, pnpm-lock.yaml, requirements.txt, go.sum, etc.) for mermaid, including transitive dependencies — a direct dependency you never call can still pull in a vulnerable version.
Fix
Update mermaid to 11.10.0 or later, then make sure no transitive (indirect) dependency still pins the vulnerable range — O3 confirms GHSA-8gwm-58g9-j8pw is resolved across your whole dependency graph.
Workarounds
Escape or sanitise the affected output on the server side rather than relying on client-side filtering, and add a Content-Security-Policy that blocks inline script execution so injected markup cannot run even if it reaches the page.
Frequently Asked Questions
Is GHSA-8gwm-58g9-j8pw in your dependencies?
Find it across npm, including transitive dependencies.