Mermaid CSS Injection Vulnerability in Class Definitions

A CSS injection vulnerability has been identified in Mermaid, a JavaScript tool for creating diagrams and charts. This issue affects versions 10.9.5 and prior, as well as 11.0.0-alpha.1 through 11.14.0. The vulnerability arises from improper sanitization of user-controlled style strings in 'classDef' values, which are processed by the 'createCssStyles' parser. An unrestricted regular expression allows the injection of unbalanced CSS rules, enabling page defacement, user tracking through 'url()' callbacks, and exfiltration of DOM attributes via CSS ':has()' selectors. The vulnerability can be exploited by crafting a 'classDef' value that includes a closing brace, disrupting the CSS rule structure and injecting malicious styles or behaviors.

Impact

Exploitation of this vulnerability allows for arbitrary CSS injection, which can be used to manipulate the appearance of the page, track users through injected 'url()' callbacks, and extract DOM attributes using CSS selectors.

Reproduction

To reproduce this vulnerability, create a Mermaid state diagram and include a 'classDef' value that contains a closing brace. This unbalanced brace will terminate the CSS selector and inject additional rules into the page's stylesheet. After rendering the diagram, the injected styles can be verified by checking for the presence of the manipulated elements or styles, such as red-colored numbers or background images from specified URLs.

Remediation

Users can upgrade to Mermaid versions 10.9.6 or 11.15.0, both of which include the necessary fix. For those unable to upgrade immediately, the vulnerability can be mitigated by setting 'securityLevel' to 'sandbox', which renders the diagram in a protected iframe.