security: sanitize all dangerouslySetInnerHTML usage with DOMPurify (#5588)

Apply DOMPurify.sanitize() to all remaining dangerouslySetInnerHTML
instances that were not already sanitized:

- ChangelogModal: RSS feed content rendering
- textbookCourse: marked.parse() markdown-to-HTML output
- adminSettings: search highlight markup
- EmptyStateCard: Shiki code highlighting output

Prevents stored XSS via injected HTML/JS in rendered content.
DOMPurify was already a dependency and used in CodeHighlighter
and ErrorMessage components.

Author: ink-the-squid

web/components/layout/ChangelogModal.tsx

@@ -5,6 +5,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { ChangelogItem } from "./auth/types";
+import DOMPurify from "dompurify";
 
 const ChangelogModal = ({
   open,
@@ -36,7 +37,7 @@ const ChangelogModal = ({
             )}
             <div
               className="prose prose-sm dark:prose-invert prose-h2:text-base prose-h3:text-base"
-              dangerouslySetInnerHTML={{ __html: changelog["content:encoded"] }}
+              dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(changelog["content:encoded"]) }}
             />
           </div>
         </DialogContent>

web/components/shared/helicone/EmptyStateCard.tsx

@@ -1,5 +1,6 @@
 import { Button } from "@/components/ui/button";
 import { H2, P } from "@/components/ui/typography";
+import DOMPurify from "dompurify";
 import {
   Archive,
   Bell,
@@ -311,7 +312,7 @@ const ShikiHighlightedCode: React.FC<{
     <div className="w-full overflow-hidden rounded-lg">
       <div
         className={`overflow-x-auto rounded-lg bg-[#24292e] p-4 text-left max-w-${maxWidth} mx-auto`}
-        dangerouslySetInnerHTML={{ __html: highlightedCode }}
+        dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(highlightedCode) }}
       />
     </div>
   );

web/components/shared/themed/demo/textbookCourse.tsx

@@ -8,6 +8,7 @@ import "prismjs/components/prism-clike";
 import "prismjs/components/prism-javascript";
 import "prismjs/components/prism-json";
 import { Course } from "./types";
+import DOMPurify from "dompurify";
 import Link from "next/link";
 import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/solid";
 import { SESSION_NAME } from "./courseGenerator";
@@ -74,7 +75,7 @@ const TextbookCourse: React.FC<TextbookCourseProps> = ({
     const html = marked.parse(content) as string;
     return (
       <div
-        dangerouslySetInnerHTML={{ __html: html }}
+        dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(html) }}
         className="prose prose-indigo max-w-none"
         style={{
           fontFamily: '"Fira Code", "Fira Mono", monospace',

web/components/templates/admin/adminSettings.tsx

@@ -1,4 +1,5 @@
 import { useState, useMemo } from "react";
+import DOMPurify from "dompurify";
 import { $JAWN_API } from "../../../lib/clients/jawn";
 import { Button } from "@/components/ui/button";
 import { H1, P, Lead, Small } from "@/components/ui/typography";
@@ -400,7 +401,7 @@ const AdminSettings = () => {
                         <div className="flex items-center">
                           <p
                             className="font-sans m-0 text-base font-medium leading-7 text-[hsl(var(--foreground))]"
-                            dangerouslySetInnerHTML={{ __html: displayName }}
+                            dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(displayName) }}
                           />
                           {isSensitive && (
                             <span className="ml-2 rounded-full bg-amber-100 px-2 py-0.5 text-xs text-amber-800 dark:bg-amber-900 dark:text-amber-100">