# CVE-2022-31108: Arbitrary `CSS` injection into the generated graph affecting the container HTML in mermaid.js

> Attackers can inject CSS to exfiltrate data or manipulate UI, affecting users of the mermaid.js diagramming library.

- **Severity:** Medium 4.1 (`CVSS:3.1/AV:N/AC:L/PR:L/UI:R/S:C/C:L/I:N/A:N`)
- **Exploited in the wild:** Not known
- **Login needed:** Any signed-in user
- **Attackable:** Over the internet
- **Victim action needed:** A user has to click or open something
- **Fix available:** Yes
- **Published:** 28 Jun 2022
- **Updated:** 22 Apr 2025
- **Also known as:** DEBIAN-CVE-2022-31108, GHSA-x3vm-38hw-55wf, UBUNTU-CVE-2022-31108

## What is CVE-2022-31108?

CVE-2022-31108 is a medium-severity cross-site scripting vulnerability in mermaid-js mermaid, published on 28 Jun 2022. Any signed-in user can exploit it over the network, and only if a user opens a file or follows a link.

### Official description

Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. 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. 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. This issue has been resolved in version 9.1.3. Users are advised to upgrade. Users unable to upgrade should ensure that user input is adequately escaped before embedding it in CSS blocks.

Weakness: CWE-79 (Improper Neutralization of Input During Web Page Generation), CWE-74 (Improper Neutralization of Special Elements in Output Used by a Downstream Component)

## Which versions are affected by CVE-2022-31108?

2 open source packages ship an affected version, including mermaid. It affects 1 product.


| Package | Ecosystem | Affected | Fixed in |
| --- | --- | --- | --- |
| `mermaid` | npm | From 8.0.0 | 9.1.2 |
| `mermaid` | npm | From 8.0.0 | 9.1.2 |

Products: Mermaid Project Mermaid.

## How do I fix CVE-2022-31108?

Upgrade mermaid to 9.1.2 or later.

## Is CVE-2022-31108 being exploited?

It is not confirmed as exploited in the wild, but public exploit code for CVE-2022-31108 exists.

## Other vulnerabilities in mermaid-js mermaid

- [CVE-2021-43861](https://insights.sbomify.com/CVE-2021-43861/): Incorrect sanitisation function leads to `XSS` (high 7.2)
- [CVE-2021-35513](https://insights.sbomify.com/CVE-2021-35513/): Cross-site Scripting in Mermaid (medium 6.1)
- [CVE-2026-41150](https://insights.sbomify.com/CVE-2026-41150/): Mermaid Gantt Charts are vulnerable to an Infinite Loop DoS (medium 5.3)
- [CVE-2026-41159](https://insights.sbomify.com/CVE-2026-41159/): Mermaid: Improper sanitization of configuration leads to CSS injection (medium 5.3)
- [CVE-2025-54880](https://insights.sbomify.com/CVE-2025-54880/): Mermaid does not properly sanitize architecture diagram iconText leading to XSS (medium 5.1)

## Fix prompt for AI coding agents

```text
Check this codebase for CVE-2022-31108 and fix it if it is affected.

What it is: CVE-2022-31108 is a medium-severity cross-site scripting vulnerability in mermaid-js mermaid, published on 28 Jun 2022. Any signed-in user can exploit it over the network, and only if a user opens a file or follows a link.
Exploitation: It is not confirmed as exploited in the wild, but public exploit code for CVE-2022-31108 exists.

Affected packages and fixed versions:
- mermaid (npm): affected from 8.0.0; fixed in 9.1.2
- mermaid (npm): affected from 8.0.0; fixed in 9.1.2

Task:
1. Search the dependency manifests and lockfiles (for example package.json, package-lock.json, requirements.txt, poetry.lock, uv.lock, pom.xml, build.gradle, go.mod, Cargo.lock, Gemfile.lock) and any Dockerfiles for the affected packages, including transitive dependencies.
2. If an affected version is in use, upgrade it to the fixed version for its release line with the project's package manager, so the lockfile is regenerated. Prefer the smallest upgrade that fixes it.
3. If there is no fix, or the upgrade would break the build, do not guess: explain the risk and the safest workaround instead.
4. Run the tests and summarise what changed and why.
5. If nothing in the project is affected, say so and change nothing.

Reference: https://insights.sbomify.com/CVE-2022-31108/ (Markdown: https://insights.sbomify.com/CVE-2022-31108/index.md)
```

## Sources

- CVE record: https://www.cve.org/CVERecord?id=CVE-2022-31108
- NVD: https://nvd.nist.gov/vuln/detail/CVE-2022-31108
- OSV: https://osv.dev/vulnerability/CVE-2022-31108

---
From sbomify Insights: https://insights.sbomify.com/CVE-2022-31108/
Summaries are generated and may contain mistakes; the official description above is the record.
