[sec-check] fix: add rehypeSanitize to ReactMarkdown components (XSS via javascript: URIs)

web/src/components/feedback/FeedbackDialogs.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next'
 import { LazyMarkdown as ReactMarkdown } from '../ui/LazyMarkdown'
 import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
+import rehypeSanitize from 'rehype-sanitize'
 import { useRef, useEffect } from 'react'
 import { sanitizeUrl } from '@/lib/utils/sanitizeUrl'
 
@@ -274,7 +275,10 @@ export function FullscreenPreview({ description, onClose }: FullscreenPreviewPro
           </button>
         </div>
         <div className="flex-1 overflow-y-auto px-6 py-4 ghmd">
-          <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]}>
+          <ReactMarkdown
+            remarkPlugins={[remarkGfm, remarkBreaks]}
+            rehypePlugins={[rehypeSanitize]}
+          >
             {description}
           </ReactMarkdown>
         </div>

web/src/components/feedback/SubmitTab.tsx

@@ -23,6 +23,7 @@ import { LazyMarkdown as ReactMarkdown } from '../ui/LazyMarkdown'
 import { useGlobalFilters } from '../../hooks/useGlobalFilters'
 import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
+import rehypeSanitize from 'rehype-sanitize'
 import { REWARD_ACTIONS } from '../../types/rewards'
 import { useLocalAgent } from '../../hooks/useLocalAgent'
 import type { CreateFeatureRequestInput } from '../../hooks/useFeatureRequests'
@@ -647,7 +648,7 @@ export function SubmitForm({
               )}
             >
               {description.trim() ? (
-                <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]}>
+                <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]} rehypePlugins={[rehypeSanitize]}>
                   {description}
                 </ReactMarkdown>
               ) : (

web/src/components/stellar/MessageBubble.tsx

@@ -1,4 +1,6 @@
 import { lazy, Suspense } from 'react'
+import rehypeSanitize from 'rehype-sanitize'
+import remarkGfm from 'remark-gfm'
 
 const ReactMarkdown = lazy(() => import('react-markdown'))
 
@@ -36,7 +38,12 @@ export function MessageBubble({ msg }: { msg: Msg }) {
         ) : (
           <div className="stellar-markdown">
             <Suspense fallback={<div style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>{msg.content}</div>}>
-              <ReactMarkdown>{msg.content}</ReactMarkdown>
+              <ReactMarkdown
+                remarkPlugins={[remarkGfm]}
+                rehypePlugins={[rehypeSanitize]}
+              >
+                {msg.content}
+              </ReactMarkdown>
             </Suspense>
           </div>
         )}

web/src/components/updates/WhatsNewModal.tsx

@@ -5,6 +5,7 @@ import { Download, Clock, SkipForward, ChevronDown, Copy, Check, Loader2 } from
 import { LazyMarkdown as ReactMarkdown } from '../ui/LazyMarkdown'
 import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
+import rehypeSanitize from 'rehype-sanitize'
 import { BaseModal } from '../../lib/modals'
 import { MS_PER_HOUR, MS_PER_DAY } from '../../lib/constants/time'
 import { useVersionCheck } from '../../hooks/useVersionCheck'
@@ -238,6 +239,7 @@ export function WhatsNewModal({ isOpen, onClose }: WhatsNewModalProps) {
             <div className="prose dark:prose-invert max-w-none text-sm overflow-x-auto wrap-break-word [word-break:break-word] prose-pre:my-5 prose-pre:bg-transparent prose-pre:p-0 prose-code:text-purple-700 dark:prose-code:text-purple-300 prose-code:bg-black/5 dark:prose-code:bg-black/20 prose-code:px-1 prose-code:rounded">
               <ReactMarkdown
                 remarkPlugins={[remarkGfm, remarkBreaks]}
+                rehypePlugins={[rehypeSanitize]}
                 components={markdownComponents}
               >
                 {latestRelease?.releaseNotes ?? ''}
@@ -277,7 +279,7 @@ export function WhatsNewModal({ isOpen, onClose }: WhatsNewModalProps) {
             </div>
           ) : (
             <div className="prose dark:prose-invert max-w-none text-sm">
-              <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]} components={markdownComponents}>
+              <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]} rehypePlugins={[rehypeSanitize]} components={markdownComponents}>
                 {'*No release notes available. Pull the latest commits to update.*'}
               </ReactMarkdown>
             </div>
@@ -308,7 +310,7 @@ export function WhatsNewModal({ isOpen, onClose }: WhatsNewModalProps) {
                       </button>
                       {expandedRelease === release.tag && release.releaseNotes && (
                         <div className="px-3 pb-3 prose dark:prose-invert max-w-none text-xs overflow-x-auto wrap-break-word [word-break:break-word]">
-                          <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]} components={markdownComponents}>
+                          <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]} rehypePlugins={[rehypeSanitize]} components={markdownComponents}>
                             {release.releaseNotes}
                           </ReactMarkdown>
                         </div>