Mermaid CSS Injection Vulnerability Allowing DOM Manipulation and Attribute Exfiltration

A vulnerability in Mermaid, a JavaScript tool for creating diagrams and charts, allows for CSS injection that affects elements outside of the Mermaid diagrams. This issue is present in versions prior to 10.9.6 and 11.15.0. The vulnerability arises from improper sanitization of configuration options related to font styling, which can be exploited to escape automatic scoping and apply styles globally. Additionally, certain at-rules can be injected, leading to potential page defacement and unauthorized access to DOM attributes using specific CSS selectors.

Impact

Exploitation of this vulnerability could result in unauthorized CSS injection, allowing attackers to manipulate the appearance of the webpage and exfiltrate DOM attributes.

Reproduction

The vulnerability can be reproduced by creating a Mermaid diagram and injecting malicious CSS through the 'fontFamily', 'themeCSS', or 'altFontFamily' configuration options. The injected CSS can exploit the Stylis library's handling of scope references, bypassing Mermaid's automatic scoping and applying styles to all page elements. This injection can also include global at-rules, which are hoisted to the top level by Stylis, potentially leading to further exploitation.

Remediation

Users can upgrade to Mermaid versions 10.9.6 or 11.15.0, both of which address this vulnerability. If an upgrade is not possible, the 'secure' configuration option can be set to prevent diagrams from modifying certain font-related settings. Alternatively, setting the 'securityLevel' to 'sandbox' will also mitigate this issue.