Executive brief
Mermaid.js is a JavaScript library used to create diagrams and flowcharts in web applications. An attacker can inject arbitrary CSS into generated diagrams to manipulate the styling of elements outside the diagram or exfiltrate sensitive information from the page (such as form field values) using specially crafted CSS selectors. This could allow unauthorized access to confidential data or manipulation of user interactions on affected web pages.
Technical details
The vulnerability is a CSS injection flaw in Mermaid.js versions 8.0.0 through 9.1.1 affecting the theme configuration handling. The root cause is insufficient sanitization of user-supplied theme variables (such as textColor, fontFamily, and fontSize) before embedding them directly into CSS blocks generated by the getStyles() function and mermaidAPI.js. An attacker with the ability to control diagram initialization parameters (via theme variables in graph definitions) can break out of the intended CSS scope and inject arbitrary selectors and rules. The attack vector is network-based with no authentication required, but user interaction (viewing a page containing the malicious diagram) is necessary. Exploitation enables information disclosure via CSS attribute selectors paired with URL-based side channels, DOM manipulation, and clickjacking attacks. The vulnerability was fixed in version 9.1.2 by properly escaping user input before CSS insertion.
Affected products
- Mermaid.js Mermaid 8.0.0 through 9.1.1
Timeline
- 2022-06-28: disclosed
- 2022-07-05: advisory
- 2022-07-05: patched: Version 9.1.2 released