fix(chat): prevent XSS in attachment preview via filename/data URL escaping

waleedlatif1 · waleedlatif1 · commit 983370ee7c23 · 2026-06-04T09:23:02.000-07:00
Replace document.write with an escaped blob URL preview: HTML-entity
encode the user-controlled filename and data URL, open with
noopener,noreferrer, and revoke the blob URL after navigation.
diff --git a/apps/sim/app/chat/components/message/message.tsx b/apps/sim/app/chat/components/message/message.tsx
@@ -38,6 +38,44 @@ export interface ChatMessage {
   files?: ChatFile[]
 }
 
+/**
+ * Escapes HTML entities so untrusted strings are safe to interpolate into markup.
+ */
+function escapeHtml(value: string): string {
+  return value.replace(
+    /[&<>"']/g,
+    (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c] || c
+  )
+}
+
+/**
+ * Opens an image attachment preview in a new tab via a blob URL,
+ * escaping the user-controlled filename and data URL to prevent XSS.
+ */
+function openAttachmentPreview(name: string, dataUrl: string): void {
+  const safeName = escapeHtml(name)
+  const safeUrl = escapeHtml(dataUrl)
+  const html = `
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <title>${safeName}</title>
+        <style>
+          body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000; }
+          img { max-width: 100%; max-height: 100vh; object-fit: contain; }
+        </style>
+      </head>
+      <body>
+        <img src="${safeUrl}" alt="${safeName}" />
+      </body>
+    </html>
+  `
+  const blob = new Blob([html], { type: 'text/html' })
+  const blobUrl = URL.createObjectURL(blob)
+  window.open(blobUrl, '_blank', 'noopener,noreferrer')
+  setTimeout(() => URL.revokeObjectURL(blobUrl), 60_000)
+}
+
 export const ClientChatMessage = memo(
   function ClientChatMessage({ message }: { message: ChatMessage }) {
     const [isCopied, setIsCopied] = useState(false)
@@ -103,43 +141,15 @@ export const ClientChatMessage = memo(
                           if (validDataUrl?.startsWith('data:')) {
                             e.preventDefault()
                             e.stopPropagation()
-                            const newWindow = window.open('', '_blank')
-                            if (newWindow) {
-                              newWindow.document.write(`
-                                <!DOCTYPE html>
-                                <html>
-                                  <head>
-                                    <title>${attachment.name}</title>
-                                    <style>
-                                      body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000; }
-                                      img { max-width: 100%; max-height: 100vh; object-fit: contain; }
-                                    </style>
-                                  </head>
-                                  <body>
-                                    <img src="${validDataUrl}" alt="${attachment.name}" />
-                                  </body>
-                                </html>
-                              `)
-                              newWindow.document.close()
-                            }
+                            openAttachmentPreview(attachment.name, validDataUrl)
                           }
                         }}
                         onKeyDown={(event) => {
                           const validDataUrl = attachment.dataUrl?.trim()
                           if (!validDataUrl?.startsWith('data:')) return
                           if (event.key === 'Enter' || event.key === ' ') {
                             event.preventDefault()
-                            const newWindow = window.open('', '_blank')
-                            if (newWindow) {
-                              newWindow.document.write(`
-                                <html>
-                                  <head><title>${attachment.name}</title></head>
-                                  <body style="margin:0;display:flex;align-items:center;justify-content:center;min-height:100vh;background:#111;">
-                                    <img src="${validDataUrl}" alt="${attachment.name}" style="max-width:100%;max-height:100vh;object-fit:contain;" />
-                                  </body>
-                                </html>
-                              `)
-                            }
+                            openAttachmentPreview(attachment.name, validDataUrl)
                           }
                         }}
                       >
