feat: integrate DOMPurify for sanitizing HTML content

apps/web/package.json

@@ -34,10 +34,12 @@
     "@tiptap/starter-kit": "^3.11.0",
     "@tiptap/suggestion": "^3.11.0",
     "@types/dagre": "^0.7.53",
+    "@types/dompurify": "^3.2.0",
     "@uiw/react-codemirror": "^4.25.3",
     "@xyflow/react": "^12.9.3",
     "dagre": "^0.8.5",
     "dayjs": "^1.11.19",
+    "dompurify": "^3.4.0",
     "framer-motion": "^12.23.24",
     "juice": "^11.0.3",
     "lucide-react": "^0.553.0",

apps/web/src/pages/campaigns/[id].tsx

@@ -52,6 +52,7 @@ import {
   Users,
   XCircle,
 } from 'lucide-react';
+import DOMPurify from 'dompurify';
 import Link from 'next/link';
 import {useRouter} from 'next/router';
 import {useEffect, useState} from 'react';
@@ -996,7 +997,7 @@ export default function CampaignDetailsPage() {
                 <p className="text-sm font-medium text-neutral-700 mb-3">Message Content</p>
                 <div className="border-2 border-neutral-200 rounded-lg overflow-hidden bg-white">
                   <div className="p-6 max-h-96 overflow-y-auto">
-                    <div className="prose prose-sm max-w-none" dangerouslySetInnerHTML={{__html: c.body}} />
+                    <div className="prose prose-sm max-w-none" dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(c.body)}} />
                   </div>
                 </div>
               </div>

yarn.lock

@@ -6766,6 +6766,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/dompurify@npm:^3.2.0":
+  version: 3.2.0
+  resolution: "@types/dompurify@npm:3.2.0"
+  dependencies:
+    dompurify: "npm:*"
+  checksum: 10c0/e83fec586ffbb1b43f7c8479f2a99c223814d240db912d53fb126aaeea52a4091deceeb75632b5d76004d88ef0fbf444984887b121dece6fa69f4172ed4b2b07
+  languageName: node
+  linkType: hard
+
 "@types/eslint-scope@npm:^3.7.7":
   version: 3.7.7
   resolution: "@types/eslint-scope@npm:3.7.7"
@@ -7137,6 +7146,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/trusted-types@npm:^2.0.7":
+  version: 2.0.7
+  resolution: "@types/trusted-types@npm:2.0.7"
+  checksum: 10c0/4c4855f10de7c6c135e0d32ce462419d8abbbc33713b31d294596c0cc34ae1fa6112a2f9da729c8f7a20707782b0d69da3b1f8df6645b0366d08825ca1522e0c
+  languageName: node
+  linkType: hard
+
 "@types/unist@npm:*, @types/unist@npm:^3.0.0":
   version: 3.0.3
   resolution: "@types/unist@npm:3.0.3"
@@ -9796,6 +9812,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dompurify@npm:*, dompurify@npm:^3.4.0":
+  version: 3.4.0
+  resolution: "dompurify@npm:3.4.0"
+  dependencies:
+    "@types/trusted-types": "npm:^2.0.7"
+  dependenciesMeta:
+    "@types/trusted-types":
+      optional: true
+  checksum: 10c0/5593ac44ee20b9aa521c2120884effc98927fb9128c548183c75e79e0a04357c62ee913a049a267c8f396cb8c9d520ecf72562826c5524c46d4fe03c12063638
+  languageName: node
+  linkType: hard
+
 "domutils@npm:^2.4.2":
   version: 2.8.0
   resolution: "domutils@npm:2.8.0"
@@ -19430,6 +19458,7 @@ __metadata:
     "@tiptap/starter-kit": "npm:^3.11.0"
     "@tiptap/suggestion": "npm:^3.11.0"
     "@types/dagre": "npm:^0.7.53"
+    "@types/dompurify": "npm:^3.2.0"
     "@types/node": "npm:^24.10.0"
     "@types/react": "npm:^19.2.7"
     "@types/react-dom": "npm:^19.2.3"
@@ -19437,6 +19466,7 @@ __metadata:
     "@xyflow/react": "npm:^12.9.3"
     dagre: "npm:^0.8.5"
     dayjs: "npm:^1.11.19"
+    dompurify: "npm:^3.4.0"
     framer-motion: "npm:^12.23.24"
     juice: "npm:^11.0.3"
     lucide-react: "npm:^0.553.0"