The Security Fix That Would Have Silently Broken My Feature
I recently shipped Mermaid diagram support to Forem , the open source platform that powers DEV. Fenced mermaid code blocks now render as actual diagrams instead of plain highlighted source. Which means this renders, right here, on this post: flowchart TD A[CodeQL flags innerHTML] --> B[Add DOMPurify] B --> C{Measure the output} C -->|assumed| D[Ship it] C -->|actually| E[Labels are gone] E -->…
Mermaid diagram support was recently added to Forem, the platform behind DEV. Fenced mermaid code blocks now render as actual diagrams. However, a security alert revealed an issue: applying a simple fix would have silently broken the labels on four of the five common diagram types. Forem renders Markdown through Rouge highlighter, so intercepting block_code is enough to render Mermaid diagrams.
The issue arose from the sanitizer stripping the class attribute, rendering the markup ineffective. Additionally, the emoji parser mistakenly converted diagram source, which contains emojis and profile links, into actual HTML. The root cause was that Mermaid ran with securityLevel: strict, sanitizing its own output with DOMPurify, but relying on this third-party library for untrusted input proved problematic.
The fix was to sanitize explicitly, but this change led to the loss of the diagram labels, highlighting the conflict between sanitizing and supporting labels.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
