Add XSS protection with rehype-sanitize

Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

Author: Copilot

packages/components/package.json

@@ -60,6 +60,7 @@
     "react-markdown": "^10.1.0",
     "react-resizable-panels": "^4.4.0",
     "recharts": "^3.6.0",
+    "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^2.6.0",

packages/components/src/ui/markdown.tsx

@@ -1,14 +1,15 @@
 import * as React from "react"
 import ReactMarkdown from "react-markdown"
 import remarkGfm from "remark-gfm"
+import rehypeSanitize from "rehype-sanitize"
 import { cn } from "@/lib/utils"
 
 export interface MarkdownProps {
   content: string
   className?: string
 }
 
-function Markdown({ content, className, ...props }: MarkdownProps & React.ComponentProps<"div">) {
+function Markdown({ content, className }: MarkdownProps) {
   return (
     <div
       data-slot="markdown"
@@ -28,9 +29,11 @@ function Markdown({ content, className, ...props }: MarkdownProps & React.Compon
         "prose-img:rounded-md prose-img:border",
         className
       )}
-      {...props}
     >
-      <ReactMarkdown remarkPlugins={[remarkGfm]}>
+      <ReactMarkdown 
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeSanitize]}
+      >
         {content}
       </ReactMarkdown>
     </div>