From 6415a0a8b7352e76c2672a92ae64f342d17ef081 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 12 Jun 2026 14:51:41 +0000
Subject: [PATCH] Fix DOMPurify bypass in Mermaid foreignObject attributes

Co-authored-by: ImChong <74563097+ImChong@users.noreply.github.com>
---
 .jules/sentinel.md          | 5 +++++
 assets/js/mermaid-config.js | 9 +++++----
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/.jules/sentinel.md b/.jules/sentinel.md
index 625afec..6aaa744 100644
--- a/.jules/sentinel.md
+++ b/.jules/sentinel.md
@@ -42,3 +42,8 @@
 **Vulnerability:** Found a DOM Clobbering vulnerability in `_layouts/default.html` where `attachRoadmapNodeLinks()` relied on `document.getElementById('roadmap-node-links')` to retrieve a trusted JSON `<script>` block. Also found a Stored XSS vector in `index.html` where `site.data.roadmap_links` was passed to `jsonify` but not escaped.
 **Learning:** If a user injects `<div id="roadmap-node-links">{"malicious": "payload"}</div>` into the markdown, `getElementById` fetches it before the actual script tag, hijacking navigation. Meanwhile, `jsonify` outputs raw `<` and `>`, allowing escaping the `<script>` tag.
 **Prevention:** Use `document.querySelector('script#roadmap-node-links')` instead of `getElementById` for configuration scripts. Append `| replace: '<', '\u003c' | replace: '>', '\u003e' | replace: '&', '\u0026'` to `jsonify` inside script tags.
+
+## 2025-02-27 - DOMPurify Bypass in Regex Content Swapping
+**Vulnerability:** Found a critical DOM-based XSS vulnerability in `assets/js/mermaid-config.js` (`sanitizeMermaidSvg`) where an attacker could bypass `DOMPurify` by embedding malicious attributes (e.g., `onload="alert(1)"`) in SVG `foreignObject` tags. The code extracted `foreignObject` tags using a regex, stored their unsanitized attributes, sanitized the rest of the SVG structure via `DOMPurify`, and then blindly re-injected the raw attributes when restoring the `foreignObject` content.
+**Learning:** Using regular expressions to temporarily extract and "protect" HTML structures from a sanitizer often introduces critical bypasses because the extracted parts miss the sanitization pass. If those parts contain attacker-controlled attributes, they will be evaluated by the browser when re-injected.
+**Prevention:** Always let `DOMPurify` sanitize attributes natively rather than side-stepping it with regular expressions. When you need to protect or swap inner content, attach the raw attributes to a placeholder element so the sanitizer can clean the attributes before re-assembling the final HTML.
diff --git a/assets/js/mermaid-config.js b/assets/js/mermaid-config.js
index 2fef886..333e77a 100644
--- a/assets/js/mermaid-config.js
+++ b/assets/js/mermaid-config.js
@@ -175,8 +175,9 @@
           ADD_TAGS: ['semantics', 'annotation'],
           ADD_ATTR: ['xmlns', 'encoding'],
         });
-        foreignObjects.push({ attrs: attrs, inner: safeInner, id: id });
-        return '<foreignObject data-fo-placeholder="' + id + '"></foreignObject>';
+        foreignObjects.push({ inner: safeInner, id: id });
+        // Put attributes on the placeholder so DOMPurify cleans them natively!
+        return '<foreignObject data-fo-placeholder="' + id + '"' + attrs + '></foreignObject>';
       }
     );
 
@@ -189,10 +190,10 @@
     foreignObjects.forEach(function (fo) {
       sanitized = sanitized.replace(
         new RegExp(
-          '<foreignObject[^>]*data-fo-placeholder="' + fo.id + '"[^>]*></foreignObject>',
+          '(<foreignObject[^>]*data-fo-placeholder=["\']?' + fo.id + '["\']?[^>]*)></foreignObject>',
           'i'
         ),
-        '<foreignObject' + fo.attrs + '>' + fo.inner + '</foreignObject>'
+        '$1>' + fo.inner + '</foreignObject>'
       );
     });