🛡️ Sentinel: [HIGH] Fix XSS vulnerability in RoomAIChat

.jules/sentinel.md

@@ -0,0 +1,4 @@
+## 2024-05-24 - [dangerouslySetInnerHTML XSS Vulnerability]
+**Vulnerability:** Found a Cross-Site Scripting (XSS) vulnerability in `RoomAIChat` where chat messages were being rendered using `dangerouslySetInnerHTML` to support `<br/>` tags for newlines.
+**Learning:** Using `.replace(/\n/g, '<br/>')` paired with `dangerouslySetInnerHTML` is a highly dangerous pattern in React that inadvertently allows malicious HTML/JS execution if user input flows through it (e.g. chat messages).
+**Prevention:** Always use standard React text rendering `{msg.content}` paired with CSS `white-space: pre-wrap` (or Tailwind's `whitespace-pre-wrap`) to safely render text with line breaks without exposing the app to XSS risks.

src/components/room/ai-chat.tsx

@@ -185,7 +185,7 @@ export function RoomAIChat({
                         : "bg-purple-500/10 border border-purple-500/20 text-purple-100",
                     )}
                   >
-                    <div dangerouslySetInnerHTML={{ __html: msg.content.replace(/\n/g, '<br/>') }} />
+                    <div className="whitespace-pre-wrap">{msg.content}</div>
 
                     {/* Render Options Buttons */}
                     {msg.options && msg.options.length > 0 && (