fix: eliminate XSS vulnerability in CodeBlock component

Replace dangerouslySetInnerHTML with safer codeToHast approach to render
syntax-highlighted code from Shiki. This eliminates the cross-site scripting
vulnerability while maintaining identical rendering output and performance.

Security considerations:
- Eliminates potential for HTML injection attacks
- Maintains all syntax highlighting capabilities
- Preserves exact visual output

Performance considerations:
- Direct React element creation is more efficient than HTML parsing
- No browser HTML parsing overhead
- Memoization pattern preserved for optimal rendering

This issue was discovered as part of security review #3785.

Fixes: #5156
Signed-off-by: Eric Wheeler <[email protected]>

Author: Eric Wheeler

pnpm-lock.yaml

@@ -42,6 +42,7 @@
 		"debounce": "^2.1.1",
 		"fast-deep-equal": "^3.1.3",
 		"fzf": "^0.5.2",
+		"hast-util-to-jsx-runtime": "^2.3.6",
 		"i18next": "^25.0.0",
 		"i18next-http-backend": "^3.0.2",
 		"katex": "^0.16.11",

webview-ui/package.json

@@ -4,6 +4,8 @@ import { useCopyToClipboard } from "@src/utils/clipboard"
 import { getHighlighter, isLanguageLoaded, normalizeLanguage, ExtendedLanguage } from "@src/utils/highlighter"
 import { bundledLanguages } from "shiki"
 import type { ShikiTransformer } from "shiki"
+import { toJsxRuntime } from "hast-util-to-jsx-runtime"
+import { Fragment, jsx, jsxs } from "react/jsx-runtime"
 import { ChevronDown, ChevronUp, WrapText, AlignJustify, Copy, Check } from "lucide-react"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { StandardTooltip } from "@/components/ui"
@@ -226,7 +228,7 @@ const CodeBlock = memo(
 		const [windowShade, setWindowShade] = useState(initialWindowShade)
 		const [currentLanguage, setCurrentLanguage] = useState<ExtendedLanguage>(() => normalizeLanguage(language))
 		const userChangedLanguageRef = useRef(false)
-		const [highlightedCode, setHighlightedCode] = useState<string>("")
+		const [highlightedCode, setHighlightedCode] = useState<React.ReactNode>(null)
 		const [showCollapseButton, setShowCollapseButton] = useState(true)
 		const codeBlockRef = useRef<HTMLDivElement>(null)
 		const preRef = useRef<HTMLDivElement>(null)
@@ -266,7 +268,7 @@ const CodeBlock = memo(
 				const highlighter = await getHighlighter(currentLanguage)
 				if (!isMountedRef.current) return
 
-				const html = await highlighter.codeToHtml(source || "", {
+				const hast = await highlighter.codeToHast(source || "", {
 					lang: currentLanguage || "txt",
 					theme: document.body.className.toLowerCase().includes("light") ? "github-light" : "github-dark",
 					transformers: [
@@ -290,8 +292,16 @@ const CodeBlock = memo(
 				})
 				if (!isMountedRef.current) return
 
+				// Convert HAST to React elements
+				const reactElement = toJsxRuntime(hast, {
+					Fragment,
+					jsx,
+					jsxs,
+					// Don't override components - let them render as-is to maintain exact output
+				})
+
 				if (isMountedRef.current) {
-					setHighlightedCode(html)
+					setHighlightedCode(reactElement)
 				}
 			}
 
@@ -783,7 +793,7 @@ const CodeBlock = memo(
 )
 
 // Memoized content component to prevent unnecessary re-renders of highlighted code
-const MemoizedCodeContent = memo(({ html }: { html: string }) => <div dangerouslySetInnerHTML={{ __html: html }} />)
+const MemoizedCodeContent = memo(({ children }: { children: React.ReactNode }) => <>{children}</>)
 
 // Memoized StyledPre component
 const MemoizedStyledPre = memo(
@@ -801,7 +811,7 @@ const MemoizedStyledPre = memo(
 		wordWrap: boolean
 		windowShade: boolean
 		collapsedHeight?: number
-		highlightedCode: string
+		highlightedCode: React.ReactNode
 		updateCodeBlockButtonPosition: (forceHide?: boolean) => void
 	}) => (
 		<StyledPre
@@ -812,7 +822,7 @@ const MemoizedStyledPre = memo(
 			collapsedHeight={collapsedHeight}
 			onMouseDown={() => updateCodeBlockButtonPosition(true)}
 			onMouseUp={() => updateCodeBlockButtonPosition(false)}>
-			<MemoizedCodeContent html={highlightedCode} />
+			<MemoizedCodeContent>{highlightedCode}</MemoizedCodeContent>
 		</StyledPre>
 	),
 )