How a One-Line Security Fix Nearly Silently Broke Mermaid Diagram Labels on Forem
A developer shipping Mermaid diagram support to Forem, the open-source platform behind DEV Community, discovered that a seemingly straightforward security fix flagged by GitHub's CodeQL analysis would have quietly broken labels on most common diagram types without triggering any errors or test failures. The issue arose because applying DOMPurify sanitization with an SVG profile strips attributes like aria-label and title that Mermaid uses to render diagram labels. Forem's existing HTML scrubber also posed challenges, as the standard class attribute used by Mermaid is not on its allow list, requiring the developer to use data-lang instead. Additional complications included Forem's post-processors converting emoji shortcodes and @mentions inside diagram source, which was resolved by wrapping source text in a code node that post-processors skip. The developer ultimately implemented explicit DOMPurify sanitization with a carefully configured profile rather than relying solely on Mermaid's internal sanitization, avoiding a silent but damaging regression.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.
Discussion (0)
Log in to join the discussion and vote.
Log in