GHSA-xcj9-5m2h-648r Mermaid: Improper sanitization of `classDefs` in diagrams leads to CSS injection

• npm mermaid: >= 11.0.0-alpha.1, < 11.15.0 → fixed in 11.15.0 • npm mermaid: < 10.9.6 → fixed in 10.9.6

Details The state diagram and any other diagram type that routes user-controlled style strings through createCssStyles parser for Mermaid v11.14.0 and earlier captures `classDef` values with an unrestricted regex: ```jison // packages/mermaid/src/diagrams/state/parser/stateDiagram.jison:83 [^\n]* { this.popState(); return 'CLASSDEF_STYLEOPTS' } ``` The value passes unsanitized through `addStyleClass()` -> `createCssStyles()` -> `style.innerHTML` (mermaidAPI.ts:418). A `}` in the value closes the generated CSS selector, and everything after becomes a new CSS rule on the page. PoC ``` stateDiagram-v2 classDef x }*{ background-image: url("http://media.giphy.com/media/SggILpMXO7Xt6/giphy.gif")} ``` Live demo: Patches This has been patched in: • v11.15.0 (see e9b0f34d8d82a6260077764ee45e1d7d90957a0f) • v10.9.6 (see 8fead23c59166b7bab6a39eac81acebee2859102) Workarounds Setting `"securityLevel": "sandbox"` will prevent this, by rendering the mermaid diagram in a sandboxed ``. Impact Enables page defacement, user tracking via `url()` callbacks, and DOM attribute exfiltration via CSS `:has()` selectors.