Mermaid allows CSS injection applying to sibling elements of the diagram

Summary

Mermaid does not fully restrict CSS to the rendered SVG subtree. Although selectors are prefixed with #mermaid-X, sibling (~ and +) combinators can still escape the Mermaid container and inject styles to DOM elements adjacent to the diagram <svg>.

Most users of mermaid would not be affected by this, as mermaid adds its <svg> as an only child of it's parent element. However, you may be affected if you manually insert the <svg> (or other elements) into the DOM yourself.

Details

Mermaid namespaces CSS through with a middleware intended to scope all rules to the diagram's SVG element. CSS nesting expands & ~ * { ... } to #svgId ~ *, which selects all sibling elements following the SVG in the DOM, outside the diagram boundary.

Impact

An attacker able to supply diagram source to a page (e.g., user-generated content rendered by Mermaid) could inject CSS rules affecting sibling elements to the diagram <svg> on the host page. This can be used for UI redressing, hiding content, conditional CSS-based probing, or phishing-style visual manipulation.

JavaScript execution is not possible via this vector.

Patches

This has been patched in https://github.com/mermaid-js/mermaid/commit/12d472c9ed43f94814b110da8d7a9ae6dd5266ed and released in Mermaid v11.16.1.

A backport has been made for the v10 branch in 7e83f1533318b307764d961906a73377266f4c5e and was released in Mermaid v10.9.8

Workarounds

If you are inserting the <svg> into the DOM yourself, you can wrap it in an element with no other children, e.g. <div><svg>...</svg></div> or element.innerHTML = svg. Alternatively, you can use mermaid.run() or mermaid.initialize() which will do this for you.

Setting "securityLevel": "sandbox" will also prevent this, or setting the secure config value in the mermaid config to avoid allowing diagrams to modify , , , and .