Mermaid: Improper sanitization of `classDef` in state diagrams leads to HTML injection

Mermaid is a JavaScript tool that uses Markdown-inspired text to create and modify diagrams and charts. Versions 10.9.5 and earlier, as well as 11.0.0-alpha.1 through 11.14.0, are vulnerable to HTML injection under the default configuration. Specifically, the classDef directive in Mermaid state diagrams permits DOM injection that escapes the SVG context. However, <script> tags are stripped, which prevents cross-site scripting (XSS). This issue has been fixed in versions 10.9.6 and 11.15.0. If developers are unable to immediately upgrade, they can work around this issue by setting "securityLevel": "sandbox", which prevents the issue by rendering the mermaid diagram in a sandboxed <iframe>.

Mermaid is a JavaScript tool that uses Markdown-inspired text to create and modify diagrams and charts. Versions 10.9.5 and earlier, as well as 11.0.0-alpha.1 through 11.14.0, are vulnerable to HTML injection under the default configuration. Specifically, the classDef directive in Mermaid state diagrams permits DOM injection that escapes the SVG context. However, <script> tags are stripped, which prevents cross-site scripting (XSS). This issue has been fixed in versions 10.9.6 and 11.15.0. If developers are unable to immediately upgrade, they can work around this issue by setting "securityLevel": "sandbox", which prevents the issue by rendering the mermaid diagram in a sandboxed <iframe>.

Mermaid is a JavaScript tool that uses Markdown-inspired text to create and modify diagrams and charts. Versions 10.9.5 and earlier, as well as 11.0.0-alpha.1 through 11.14.0, are vulnerable to HTML injection under the default configuration. Specifically, the classDef directive in Mermaid state diagrams permits DOM injection that escapes the SVG context. However, <script> tags are stripped, which prevents cross-site scripting (XSS). This issue has been fixed in versions 10.9.6 and 11.15.0. If developers are unable to immediately upgrade, they can work around this issue by setting "securityLevel": "sandbox", which prevents the issue by rendering the mermaid diagram in a sandboxed <iframe>.

### Impact Under the default configuration, Mermaid state diagram's `classDef` allow DOM injection that escapes the SVG, although `<script>` tags are removed, preventing XSS. #### Proof-of-concept ``` stateDiagram-v2 classDef xss fill:red</style></svg><style>*{x:x;y:y;overflow:visible!important;contain:none!important;transform:none!important;filter:none!important;clip-path:none!important}</style><div style="x:x;y:y;color:red;font:5em/1 monospace;display:grid;place-items:center;z-index:2147483647;width:100vw;height:100vh;position:fixed;top:0;left:0;background:black">HACKED</div><svg><style>a:b [*] --> A:::xss ``` ### Patches - [v11.15.0](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.15.0) (see [37ff937f1da2e19f882fd1db01235db4d01f4056](https://github.com/mermaid-js/mermaid/commit/37ff937f1da2e19f882fd1db01235db4d01f4056)) - [v10.9.6](https://github.com/mermaid-js/mermaid/releases/tag/v10.9.6) (see [4e2d512bf5bf6f9de1a8f0a48da78dc4d09ac4f3](https://github.com/mermaid-js/mermaid/commit/4e2d512bf5bf6f9de1a8f0a48da78dc4d09ac4f3)) ### Workarounds If you can not update to a patched version, setting [`"securityLevel": "sandbox"`](https://mermaid.js.org/config/schema-docs/config.html#securitylevel) will prevent this, by rendering the mermaid diagram in a sandboxed `<iframe>`. ### Credits Thanks to @zsxsoft from @KeenSecurityLab for reporting this vulnerability.