feat(markdown): integrate DOMPurify for enhanced security in Mermaid diagrams

Common/UI/Components/Markdown.tsx/MarkdownViewer.tsx

@@ -68,12 +68,13 @@ SyntaxHighlighter.registerLanguage("php", php);
 SyntaxHighlighter.registerLanguage("graphql", graphql);
 SyntaxHighlighter.registerLanguage("http", http);
 import mermaid from "mermaid";
+import DOMPurify from "dompurify";
 
 // Initialize mermaid
 mermaid.initialize({
   startOnLoad: false,
   theme: "default",
-  securityLevel: "loose",
+  securityLevel: "strict",
   fontFamily: "inherit",
   themeVariables: {
     background: "#ffffff",
@@ -103,11 +104,20 @@ const MermaidDiagram: FunctionComponent<{ chart: string }> = ({
           const id: string = `mermaid-${Math.random().toString(36).substr(2, 9)}`;
           const { svg } = await mermaid.render(id, chart);
           if (containerRef.current) {
-            containerRef.current.innerHTML = svg;
+            containerRef.current.innerHTML = DOMPurify.sanitize(svg, {
+              USE_PROFILES: { svg: true, svgFilters: true },
+              ADD_TAGS: ["foreignObject"],
+            });
           }
         } catch (error) {
           if (containerRef.current) {
-            containerRef.current.innerHTML = `<pre class="text-red-500">Error rendering diagram: ${error}</pre>`;
+            const errorMessage: string = String(error);
+            const errorEl: HTMLPreElement =
+              document.createElement("pre");
+            errorEl.className = "text-red-500";
+            errorEl.textContent = `Error rendering diagram: ${errorMessage}`;
+            containerRef.current.innerHTML = "";
+            containerRef.current.appendChild(errorEl);
           }
         }
       }

Common/package-lock.json

@@ -37,6 +37,7 @@
         "@tippyjs/react": "^4.2.6",
         "@types/archiver": "^6.0.3",
         "@types/crypto-js": "^4.2.2",
+        "@types/dompurify": "^3.0.5",
         "@types/multer": "^2.0.0",
         "@types/qrcode": "^1.5.5",
         "@types/react-highlight": "^0.12.8",
@@ -53,6 +54,7 @@
         "cors": "^2.8.5",
         "cron-parser": "^4.8.1",
         "crypto-js": "^4.2.0",
+        "dompurify": "^3.3.2",
         "dotenv": "^16.4.4",
         "ejs": "^3.1.10",
         "elkjs": "^0.10.0",
@@ -5205,6 +5207,15 @@
         "@types/ms": "*"
       }
     },
+    "node_modules/@types/dompurify": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz",
+      "integrity": "sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/trusted-types": "*"
+      }
+    },
     "node_modules/@types/ejs": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/@types/ejs/-/ejs-3.1.5.tgz",
@@ -5677,8 +5688,7 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-1.0.6.tgz",
       "integrity": "sha512-230RC8sFeHoT6sSUlRO6a8cAnclO06eeiq1QDfiv2FGCLWFvvERWgwIQD4FWqD9A69BN7Lzee4OXwoMVnnsWDw==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@types/unist": {
       "version": "2.0.11",
@@ -8569,10 +8579,13 @@
       }
     },
     "node_modules/dompurify": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.1.tgz",
-      "integrity": "sha512-qkdCKzLNtrgPFP1Vo+98FRzJnBRGe4ffyCea9IwHB1fyxPOeNTHpLKYGd4Uk9xvNoH0ZoOjwZxNptyMwqrId1Q==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.2.tgz",
+      "integrity": "sha512-6obghkliLdmKa56xdbLOpUZ43pAR6xFy1uOrxBaIDjT+yaRuuybLjGS9eVBoSR/UPU5fq3OXClEHLJNGvbxKpQ==",
       "license": "(MPL-2.0 OR Apache-2.0)",
+      "engines": {
+        "node": ">=20"
+      },
       "optionalDependencies": {
         "@types/trusted-types": "^2.0.7"
       }

Common/package.json

@@ -76,6 +76,7 @@
     "@tippyjs/react": "^4.2.6",
     "@types/archiver": "^6.0.3",
     "@types/crypto-js": "^4.2.2",
+    "@types/dompurify": "^3.0.5",
     "@types/multer": "^2.0.0",
     "@types/qrcode": "^1.5.5",
     "@types/react-highlight": "^0.12.8",
@@ -92,6 +93,7 @@
     "cors": "^2.8.5",
     "cron-parser": "^4.8.1",
     "crypto-js": "^4.2.0",
+    "dompurify": "^3.3.2",
     "dotenv": "^16.4.4",
     "ejs": "^3.1.10",
     "elkjs": "^0.10.0",