CVE-2022-31108: CSS Injection in mermaid.js
Summary
CVE-2022-31108: Possible inject arbitrary CSS into the generated graph affecting the container HTML. Affects mermaid versions >= 8.0.0, < 9.1.2. Fixed in 9.1.2. How to fix ↓
Also tracked for
- node-mermaid · Debian:11
The same CVE-2022-31108 is tracked separately for each ecosystem and vendor. Its fix information is the same; the package and affected versions differ.
Check if this vulnerability affects your application
Upload a manifest or SBOM and we'll show whether you're affected, plus every other risky package in the same scan.
No signup required · Results in about 60 seconds
Background
mermaid.js is an open-source library that allows users to generate diagrams and flowcharts using simple text-based syntax. It is widely used in web applications to visualize complex data and processes. However, a vulnerability has been discovered in mermaid.js that allows an attacker to inject arbitrary CSS into the generated graph, potentially leading to information disclosure and unintended actions by users.
Vulnerability Detail
The vulnerability in mermaid.js arises from the lack of proper sanitization of user-supplied input in the textColor theme variable. By crafting a malicious value for this variable, an attacker can inject arbitrary CSS rules into the document. This allows them to change the styling of elements outside of the generated graph and potentially exfiltrate sensitive information using specially crafted CSS selectors. For example, an attacker can use CSS selectors to bruteforce the value of an input field one character at a time, triggering HTTP requests that reveal the value of each character. This vulnerability affects mermaid.js versions 8.0.0 to 9.1.1.
How To Fix
Latest published version: 12.2.0 as of 22 Oct 2026
npm install mermaid@12.2.0Upgrading to it may include breaking changes; the version below is the minimum fixed release for this vulnerability.
If you need the minimum change
9.1.2
This is the first release that contains the fix.
npm install mermaid@9.1.2Tip — Not sure which version your app runs? Vulert can match this fix to it. Scan free →
Workaround
If upgrading to the latest version of mermaid.js is not immediately feasible, users can mitigate the risk of this vulnerability by manually sanitizing the textColor theme variable before passing it to mermaid.js. This can be done by ensuring that the variable only contains valid color values and does not include any CSS code or special characters. Here is an example of how to sanitize the textColor variable in JavaScript:
const sanitizedTextColor = userInputTextColor.replace(/[{}]/g, '');
By removing curly braces from the user input, the risk of CSS injection can be significantly reduced.
Conclusion
The vulnerability in mermaid.js allows an attacker to inject arbitrary CSS into the generated graph, potentially leading to information disclosure and unintended actions by users. It is crucial for users of mermaid.js to upgrade to version 9.1.2 or later to fix this vulnerability. Alternatively, users can manually sanitize the textColor theme variable to mitigate the risk. For further support and assistance in vulnerability remediation, please contact DevNack.com.
See every vulnerability recorded for mermaid →
FAQ
mermaid.js is an open-source library for generating diagrams and flowcharts using simple text-based syntax. It is commonly used in web applications to visualize complex data and processes.
This vulnerability allows an attacker to inject arbitrary CSS into the generated graph, potentially leading to information disclosure and unintended actions by users. It can also be used to exfiltrate sensitive information by using specially crafted CSS selectors.
mermaid.js versions 8.0.0 to 9.1.1 are affected by this vulnerability.
To fix this vulnerability, upgrade to mermaid.js version 9.1.2 or later. Alternatively, you can manually sanitize the textColor theme variable to mitigate the risk.
If upgrading to the latest version is not immediately feasible, you can manually sanitize the textColor theme variable to reduce the risk of CSS injection. See the 'workaround' section for more details.
References
Related vulnerabilities
Recent vulnerabilities recorded for mermaid.
