security: strip dangerous HTML from LLM outputs to prevent stored XSS (#5589)

Author: ink-the-squid

web/components/templates/requests/components/ChatOnlyView.tsx

@@ -1,3 +1,4 @@
+import { stripDangerousHtml } from "@/lib/sanitizeContent";
 import { cn } from "@/lib/utils";
 import {
   FunctionCall,
@@ -271,7 +272,7 @@ function ChatBubble({
           )}
         >
           <Streamdown shikiTheme={shikiTheme}>
-            {preserveLineBreaksForMarkdown(displayContent)}
+            {preserveLineBreaksForMarkdown(stripDangerousHtml(displayContent))}
           </Streamdown>
         </div>
 

web/components/templates/requests/components/Realtime.tsx

@@ -1,3 +1,4 @@
+import { stripDangerousHtml } from "@/lib/sanitizeContent";
 import GlassHeader from "@/components/shared/universal/GlassHeader";
 import { JsonRenderer } from "@/components/templates/requests/components/chatComponent/single/JsonRenderer";
 import { logger } from "@/lib/telemetry/logger";
@@ -644,7 +645,7 @@ const SessionUpdate: React.FC<SessionUpdateProps> = ({ content }) => {
           >
             <div className="prose prose-sm dark:prose-invert prose-headings:text-slate-50 prose-p:text-slate-200 prose-a:text-cyan-200 hover:prose-a:text-cyan-100 prose-blockquote:border-slate-400 prose-blockquote:text-slate-300 prose-strong:text-white prose-em:text-slate-300 prose-code:text-yellow-200 prose-pre:bg-slate-800/50 prose-pre:text-slate-200 prose-ol:text-slate-200 prose-ul:text-slate-200 prose-li:text-slate-200 [&_ol>li::marker]:text-white [&_ul>li::marker]:text-white">
               <Streamdown shikiTheme={shikiTheme}>
-                {preserveLineBreaksForMarkdown(sessionData.instructions)}
+                {preserveLineBreaksForMarkdown(stripDangerousHtml(sessionData.instructions))}
               </Streamdown>
             </div>
           </div>

web/components/templates/requests/components/chatComponent/single/AssistantToolCalls.tsx

@@ -1,6 +1,7 @@
 import AssistantToolCall from "./AssistantToolCall";
 
 import MarkdownEditor from "@/components/shared/markdownEditor";
+import { stripDangerousHtml } from "@/lib/sanitizeContent";
 import { cn } from "@/lib/utils";
 import {
   FunctionCall,
@@ -67,7 +68,7 @@ export default function AssistantToolCalls({
         content && (
           <div className="w-full whitespace-pre-wrap break-words p-2 text-xs">
             <Streamdown shikiTheme={shikiTheme}>
-              {preserveLineBreaksForMarkdown(content)}
+              {preserveLineBreaksForMarkdown(stripDangerousHtml(content))}
             </Streamdown>
           </div>
         )

web/components/templates/requests/components/chatComponent/single/TextMessage.tsx

@@ -1,3 +1,4 @@
+import { stripDangerousHtml } from "@/lib/sanitizeContent";
 import { MappedLLMRequest, Message } from "@helicone-package/llm-mapper/types";
 import { isJson } from "../ChatMessage";
 import { JsonRenderer } from "./JsonRenderer";
@@ -124,7 +125,7 @@ export default function TextMessage({
         <>
           <div className="w-full whitespace-pre-wrap break-words text-sm">
             <Streamdown shikiTheme={shikiTheme}>
-              {preserveLineBreaksForMarkdown(displayContent)}
+              {preserveLineBreaksForMarkdown(stripDangerousHtml(displayContent))}
             </Streamdown>
           </div>
           {annotations && annotations.length > 0 && (

web/lib/sanitizeContent.ts

@@ -0,0 +1,62 @@
+/**
+ * Strips dangerous HTML tags from text content before markdown rendering.
+ * Preserves markdown syntax and safe HTML tags (like <b>, <em>, <a>, etc.).
+ *
+ * This prevents stored XSS via LLM outputs containing malicious HTML
+ * (e.g., <iframe srcdoc="<script>document.cookie</script>">).
+ *
+ * We use regex-based stripping rather than DOMPurify because DOMPurify
+ * parses input as HTML, which mangles markdown syntax (backticks,
+ * asterisks, brackets, etc.).
+ */
+export function stripDangerousHtml(text: string): string {
+  if (typeof text !== "string") return text;
+
+  const dangerousTags = [
+    "script",
+    "iframe",
+    "object",
+    "embed",
+    "style",
+    "form",
+    "input",
+    "button",
+    "textarea",
+    "select",
+    "applet",
+    "base",
+    "link",
+    "meta",
+    "svg",
+    "math",
+  ];
+
+  let cleaned = text;
+
+  for (const tag of dangerousTags) {
+    // Remove paired tags with content: <tag ...>...</tag>
+    const pairedRegex = new RegExp(
+      `<\\s*${tag}[^>]*>[\\s\\S]*?<\\s*/\\s*${tag}\\s*>`,
+      "gi"
+    );
+    cleaned = cleaned.replace(pairedRegex, "");
+
+    // Remove self-closing or unclosed: <tag ... /> or <tag ...>
+    const selfClosingRegex = new RegExp(`<\\s*${tag}[^>]*/?>`, "gi");
+    cleaned = cleaned.replace(selfClosingRegex, "");
+  }
+
+  // Remove event handlers from remaining tags (onclick, onload, onerror, etc.)
+  cleaned = cleaned.replace(
+    /\s+on\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi,
+    ""
+  );
+
+  // Remove javascript: protocol in href/src/action attributes
+  cleaned = cleaned.replace(
+    /(href|src|action)\s*=\s*(?:"javascript:[^"]*"|'javascript:[^']*')/gi,
+    '$1=""'
+  );
+
+  return cleaned;
+}