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>