Mermaid HTML Injection Vulnerability via Class Definitions in State Diagrams

A vulnerability allowing HTML injection has been identified in Mermaid versions 10.9.5 and earlier, as well as 11.0.0-alpha.1 through 11.14.0. The issue arises in state diagrams where the classDef directive permits DOM injection that escapes the SVG context. Although <script> tags are removed to prevent cross-site scripting, this flaw can still be exploited. The vulnerability has been addressed in Mermaid versions 10.9.6 and 11.15.0. For those unable to upgrade, a temporary workaround is available by setting 'securityLevel' to 'sandbox', which renders the diagram in a protected <iframe>.

Impact

Exploitation of this vulnerability allows for HTML injection that escapes the SVG context, potentially leading to unauthorized DOM manipulation. While <script> tags are stripped away, preventing cross-site scripting, the injected HTML can still cause disruption or misrepresentation of the content.

Reproduction

To reproduce this vulnerability, create a Mermaid state diagram and use the classDef directive to inject HTML. The injected HTML can include styles and elements, such as a div, which can be styled to overlay the entire screen, effectively demonstrating the injection by, for example, displaying a 'HACKED' message.

Remediation

Users can upgrade to Mermaid versions 10.9.6 or 11.15.0 to address this vulnerability. If an immediate upgrade is not possible, the 'securityLevel' can be set to 'sandbox' to prevent the issue by rendering the Mermaid diagram in a sandboxed <iframe>.