From e034fabe62f87b4dd988c4f2de30d851f03dc978 Mon Sep 17 00:00:00 2001
From: ruinivist <179396038+ruinivist@users.noreply.github.com>
Date: Thu, 4 Jun 2026 08:24:40 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A1=EF=B8=8F=20Sentinel:=20[HIGH]=20Mi?=
=?UTF-8?q?tigate=20XSS=20in=20CodeBlock=20rendering=20via=20DOMPurify?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Sanitize HTML string generated by Shiki before rendering it via `dangerouslySetInnerHTML` in CodeBlockEmbeddable and CodeBlockSidebar.
---
.jules/sentinel.md | 4 ++++
bun.lock | 9 +++++++--
package.json | 2 ++
src/client/components/CodeBlockEmbeddable.tsx | 3 ++-
src/client/components/CodeBlockSidebar.tsx | 3 ++-
5 files changed, 17 insertions(+), 4 deletions(-)
create mode 100644 .jules/sentinel.md
diff --git a/.jules/sentinel.md b/.jules/sentinel.md
new file mode 100644
index 0000000..cfe7055
--- /dev/null
+++ b/.jules/sentinel.md
@@ -0,0 +1,4 @@
+## 2024-06-04 - Defense in Depth: Shiki HTML Sanitization
+**Vulnerability:** Potential XSS via `dangerouslySetInnerHTML` in CodeBlock components rendering Shiki highlighted code.
+**Learning:** While Shiki is generally considered safe as it just wraps code in spans, passing user-controlled input (even if it's "code") through an external library and directly into `dangerouslySetInnerHTML` without explicit sanitization creates an unnecessary risk surface. A vulnerability or misconfiguration in the highlighter could lead to XSS.
+**Prevention:** Always wrap the output of HTML generators (like Shiki) in a dedicated sanitizer (like DOMPurify) before using `dangerouslySetInnerHTML`, even if the generator is deemed "safe." This is a core tenet of defense in depth.
diff --git a/bun.lock b/bun.lock
index 8dec3d4..fb302b2 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,12 +1,12 @@
{
"lockfileVersion": 1,
- "configVersion": 1,
"workspaces": {
"": {
"name": "excali",
"dependencies": {
"@excalidraw/excalidraw": "^0.18.1",
"@modelcontextprotocol/sdk": "^1.29.0",
+ "dompurify": "^3.4.8",
"fast-json-patch": "^3.1.1",
"mcp-handler": "^1.1.0",
"react": "^19.2.6",
@@ -16,6 +16,7 @@
},
"devDependencies": {
"@types/bun": "^1.3.14",
+ "@types/dompurify": "^3.2.0",
"@types/react": "^19.2.15",
"@types/react-dom": "^19.2.3",
"prettier": "^3.8.3",
@@ -217,6 +218,8 @@
"@types/d3-zoom": ["@types/d3-zoom@3.0.8", "", { "dependencies": { "@types/d3-interpolate": "*", "@types/d3-selection": "*" } }, "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw=="],
+ "@types/dompurify": ["@types/dompurify@3.2.0", "", { "dependencies": { "dompurify": "*" } }, "sha512-Fgg31wv9QbLDA0SpTOXO3MaxySc4DKGLi8sna4/Utjo4r3ZRPdCt4UQee8BWr+Q5z21yifghREPJGYaEOEIACg=="],
+
"@types/geojson": ["@types/geojson@7946.0.16", "", {}, "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg=="],
"@types/hast": ["@types/hast@3.0.4", "", { "dependencies": { "@types/unist": "*" } }, "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ=="],
@@ -393,7 +396,7 @@
"devlop": ["devlop@1.1.0", "", { "dependencies": { "dequal": "^2.0.0" } }, "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA=="],
- "dompurify": ["dompurify@3.4.5", "", { "optionalDependencies": { "@types/trusted-types": "^2.0.7" } }, "sha512-OrwIBKsdNSVEeubdJ1HBv/wNENRM9ytAVCv7YXt//A3vPdVMNuACRqK9mXCGCBW2ln7BT/A4X0jXHo2Gu89miA=="],
+ "dompurify": ["dompurify@3.4.8", "", { "optionalDependencies": { "@types/trusted-types": "^2.0.7" } }, "sha512-yb1cEmaOum7wFvOCSQxyfgVlv5D47Rc30iZWoMpbDIWTnJ6grDDQyu2KFJzB2k7u0pMuJcQ1zphH//fFnw2tjQ=="],
"dunder-proto": ["dunder-proto@1.0.1", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", "gopd": "^1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="],
@@ -843,6 +846,8 @@
"mermaid/@mermaid-js/parser": ["@mermaid-js/parser@1.1.1", "", { "dependencies": { "@chevrotain/types": "~11.1.1" } }, "sha512-VuHdsYMK1bT6X2JbcAaWAhugTRvRBRyuZgd+c22swUeI9g/ntaxF7CY7dYarhZovofCbUNO0G7JesfmNtjYOCw=="],
+ "mermaid/dompurify": ["dompurify@3.4.5", "", { "optionalDependencies": { "@types/trusted-types": "^2.0.7" } }, "sha512-OrwIBKsdNSVEeubdJ1HBv/wNENRM9ytAVCv7YXt//A3vPdVMNuACRqK9mXCGCBW2ln7BT/A4X0jXHo2Gu89miA=="],
+
"mermaid/roughjs": ["roughjs@4.6.6", "", { "dependencies": { "hachure-fill": "^0.5.2", "path-data-parser": "^0.1.0", "points-on-curve": "^0.2.0", "points-on-path": "^0.2.1" } }, "sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ=="],
"points-on-path/points-on-curve": ["points-on-curve@0.2.0", "", {}, "sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A=="],
diff --git a/package.json b/package.json
index 329e46c..cc980f7 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
"dependencies": {
"@excalidraw/excalidraw": "^0.18.1",
"@modelcontextprotocol/sdk": "^1.29.0",
+ "dompurify": "^3.4.8",
"fast-json-patch": "^3.1.1",
"mcp-handler": "^1.1.0",
"react": "^19.2.6",
@@ -29,6 +30,7 @@
},
"devDependencies": {
"@types/bun": "^1.3.14",
+ "@types/dompurify": "^3.2.0",
"@types/react": "^19.2.15",
"@types/react-dom": "^19.2.3",
"prettier": "^3.8.3",
diff --git a/src/client/components/CodeBlockEmbeddable.tsx b/src/client/components/CodeBlockEmbeddable.tsx
index 9dcb778..bd6cab5 100644
--- a/src/client/components/CodeBlockEmbeddable.tsx
+++ b/src/client/components/CodeBlockEmbeddable.tsx
@@ -1,4 +1,5 @@
import { memo, useEffect, useState } from "react";
+import DOMPurify from "dompurify";
import type { ExcalidrawProps } from "@excalidraw/excalidraw/types";
import type {
ExcalidrawEmbeddableElement,
@@ -57,7 +58,7 @@ const CodeBlockEmbeddable = memo(function CodeBlockEmbeddable({
{html ? (
) : (
diff --git a/src/client/components/CodeBlockSidebar.tsx b/src/client/components/CodeBlockSidebar.tsx
index 1b81d50..553e03d 100644
--- a/src/client/components/CodeBlockSidebar.tsx
+++ b/src/client/components/CodeBlockSidebar.tsx
@@ -1,4 +1,5 @@
import { useEffect, useRef, useState } from "react";
+import DOMPurify from "dompurify";
import {
CODE_BLOCK_LANGUAGES,
type CodeBlockDraftState,
@@ -75,7 +76,7 @@ function CodeBlockEditor({
{html ? (
) : (