Upload frontend/src/components/ChatWidget.jsx

frontend/src/components/ChatWidget.jsx

@@ -9,9 +9,59 @@ const SUGGESTIONS = [
   "Latest news about Indian startups 2025",
 ]
 
+// ─── XSS Prevention: escape HTML special chars ────────────────────────────────
+function escapeHtml(text) {
+  if (!text) return ''
+  return text
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#x27;')
+}
+
+// ─── XSS Prevention: strip script tags and event handlers ─────────────────────
+function sanitizeChatContent(text) {
+  if (!text) return ''
+  let t = text
+  // Remove script tags
+  t = t.replace(/<script[^>]*>.*?<\/script>/gi, '')
+  // Remove iframe tags
+  t = t.replace(/<iframe[^>]*>.*?<\/iframe>/gi, '')
+  // Remove event handlers (onerror, onclick, etc.)
+  t = t.replace(/\son\w+\s*=\s*["']?[^"'>]*["']?/gi, '')
+  // Remove javascript: and data: URLs
+  t = t.replace(/(javascript|data|vbscript):/gi, '')
+  // Remove meta refresh
+  t = t.replace(/<meta[^>]*http-equiv\s*=\s*["']?refresh["']?[^>]*>/gi, '')
+  return t
+}
+
+// ─── Render sanitized text with basic Markdown (no raw HTML) ──────────────────
+function SafeMarkdown({ text }) {
+  if (!text) return null
+  const sanitized = sanitizeChatContent(text)
+  // Convert **bold**, *italic*, `code`, and bullet points to HTML safely
+  let html = escapeHtml(sanitized)
+    // Bold
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    // Italic
+    .replace(/\*(.+?)\*/g, '<em>$1</em>')
+    // Inline code
+    .replace(/`([^`]+)`/g, '<code>$1</code>')
+    // Bullet points (simple)
+    .replace(/^\s*-\s+/gm, '• ')
+    // Numbered lists
+    .replace(/^\s*(\d+)\.\s+/gm, '$1. ')
+    // Line breaks
+    .replace(/\n/g, '<br>')
+
+  return <span dangerouslySetInnerHTML={{ __html: html }} />
+}
+
 export default function ChatWidget({ onClose }) {
   const [messages, setMessages] = useState([
-    { role: 'assistant', content: '👋 Hi! I\'m Bharat Tech Atlas AI. Ask me about Indian startups, sectors, funding trends, or any company!' }
+    { role: 'assistant', content: "👋 Hi! I'm Bharat Tech Atlas AI. Ask me about Indian startups, sectors, funding trends, or any company!" }
   ])
   const [input, setInput] = useState('')
   const [loading, setLoading] = useState(false)
@@ -51,9 +101,11 @@ export default function ChatWidget({ onClose }) {
         throw new Error(`HTTP ${resp.status}: ${errText}`)
       }
       const data = await resp.json()
+      // Sanitize response before displaying
+      const safeContent = sanitizeChatContent(data.content) || 'Sorry, I had trouble responding. Try again!'
       setMessages(prev => [...prev, {
         role: 'assistant',
-        content: data.content || 'Sorry, I had trouble responding. Try again!'
+        content: safeContent
       }])
     } catch (err) {
       console.error('Chat error:', err)
@@ -77,7 +129,7 @@ export default function ChatWidget({ onClose }) {
             <p className="text-[10px] text-atlas-muted">Powered by Qwen2.5-0.5B + Web Search</p>
           </div>
         </div>
-        <button onClick={onClose} className="text-atlas-muted hover:text-atlas-text text-lg">✕</button>
+        <button onClick={onClose} className="text-atlas-muted hover:text-atlas-text text-lg" aria-label="Close chat">✕</button>
       </div>
 
       {/* Messages */}
@@ -89,7 +141,11 @@ export default function ChatWidget({ onClose }) {
                 ? 'bg-brand-500/20 text-brand-300 rounded-br-none'
                 : 'bg-atlas-surface text-atlas-muted rounded-bl-none'
             }`}>
-              {m.content}
+              {m.role === 'user' ? (
+                <span>{m.content}</span>
+              ) : (
+                <SafeMarkdown text={m.content} />
+              )}
             </div>
           </div>
         ))}
@@ -126,6 +182,7 @@ export default function ChatWidget({ onClose }) {
           onChange={e => setInput(e.target.value)}
           onKeyDown={e => e.key === 'Enter' && sendMessage(input)}
           placeholder="Ask about startups, sectors, funding, latest news..."
+          maxLength={2000}
           className="flex-1 bg-atlas-surface border border-atlas-border rounded-lg px-3 py-2 text-xs text-atlas-text placeholder:text-atlas-muted/50 focus:outline-none focus:border-brand-500/50"
         />
         <button onClick={() => sendMessage(input)} disabled={loading || !input.trim()}