fix: address review feedback for XSS vulnerability fix

- Replace HTML string fallback with React elements to prevent potential XSS
- Add error handling for toJsxRuntime conversion with proper fallback
- Add explanatory comment about why hast-util-to-jsx-runtime was chosen
- Improve test mock to handle transformers and be more comprehensive

Author: daniel-lxs

webview-ui/src/components/common/CodeBlock.tsx

@@ -255,7 +255,12 @@ const CodeBlock = memo(
 			// Set mounted state at the beginning of this effect
 			isMountedRef.current = true
 
-			const fallback = `<pre style="padding: 0; margin: 0;"><code class="hljs language-${currentLanguage || "txt"}">${source || ""}</code></pre>`
+			// Create a safe fallback using React elements instead of HTML string
+			const fallback = (
+				<pre style={{ padding: 0, margin: 0 }}>
+					<code className={`hljs language-${currentLanguage || "txt"}`}>{source || ""}</code>
+				</pre>
+			)
 
 			const highlight = async () => {
 				// Show plain text if language needs to be loaded.
@@ -292,16 +297,25 @@ 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
-				})
+				// Convert HAST to React elements using hast-util-to-jsx-runtime
+				// This approach eliminates XSS vulnerabilities by avoiding dangerouslySetInnerHTML
+				// while maintaining the exact same visual output and syntax highlighting
+				try {
+					const reactElement = toJsxRuntime(hast, {
+						Fragment,
+						jsx,
+						jsxs,
+						// Don't override components - let them render as-is to maintain exact output
+					})
 
-				if (isMountedRef.current) {
-					setHighlightedCode(reactElement)
+					if (isMountedRef.current) {
+						setHighlightedCode(reactElement)
+					}
+				} catch (error) {
+					console.error("[CodeBlock] Error converting HAST to JSX:", error)
+					if (isMountedRef.current) {
+						setHighlightedCode(fallback)
+					}
 				}
 			}
 

webview-ui/src/components/common/__tests__/CodeBlock.spec.tsx

@@ -39,8 +39,9 @@ vi.mock("../../../utils/highlighter", () => {
 		}),
 		codeToHast: vi.fn().mockImplementation((code, options) => {
 			const theme = options.theme === "github-light" ? "light" : "dark"
-			// Return a simple HAST node structure that includes the theme marker
-			return {
+			// Return a comprehensive HAST node structure that matches Shiki's output
+			// Apply transformers if provided
+			const preNode = {
 				type: "element",
 				tagName: "pre",
 				properties: {},
@@ -58,6 +59,20 @@ vi.mock("../../../utils/highlighter", () => {
 					},
 				],
 			}
+
+			// Apply transformers if they exist
+			if (options.transformers) {
+				for (const transformer of options.transformers) {
+					if (transformer.pre) {
+						transformer.pre(preNode)
+					}
+					if (transformer.code && preNode.children[0]) {
+						transformer.code(preNode.children[0])
+					}
+				}
+			}
+
+			return preNode
 		}),
 	}