fix: sanitize document preview markdown

frontend/package.json

@@ -17,6 +17,7 @@
     "axios": "^1.6.7",
     "clsx": "^2.1.0",
     "date-fns": "^4.1.0",
+    "dompurify": "^3.4.5",
     "lucide-react": "^0.314.0",
     "marked": "^18.0.3",
     "react": "^18.2.0",

frontend/src/components/DocumentEditor.tsx

@@ -1,7 +1,8 @@
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect, useCallback, useMemo } from 'react'
 import { Save, Eye, EyeOff } from 'lucide-react'
 import CodeMirror from '@uiw/react-codemirror'
 import { markdown } from '@codemirror/lang-markdown'
+import DOMPurify from 'dompurify'
 import { marked } from 'marked'
 import api from '../services/api'
 
@@ -22,6 +23,10 @@ export default function DocumentEditor({
   const [showPreview, setShowPreview] = useState(false)
   const [isSaving, setIsSaving] = useState(false)
   const [saveTimeout, setSaveTimeout] = useState<ReturnType<typeof setTimeout> | null>(null)
+  const sanitizedPreview = useMemo(() => {
+    const renderedMarkdown = marked.parse(content, { async: false }) as string
+    return DOMPurify.sanitize(renderedMarkdown)
+  }, [content])
 
   const handleSave = useCallback(async () => {
     setIsSaving(true)
@@ -91,7 +96,7 @@ export default function DocumentEditor({
       <div className="flex-1 overflow-auto">
         {showPreview ? (
           <div className="prose max-w-none p-6">
-            <div dangerouslySetInnerHTML={{ __html: marked.parse(content, { async: false }) }} />
+            <div dangerouslySetInnerHTML={{ __html: sanitizedPreview }} />
           </div>
         ) : (
           <div className="h-full">
@@ -107,4 +112,4 @@ export default function DocumentEditor({
       </div>
     </div>
   )
-}
+}