🔒 [Security] XSS vulnerability in chatbot — user input inserted via innerHTML

[KGFCH2]

Problem

home.js inserts user-typed input directly into the DOM using innerHTML:

chatBox.innerHTML += `<p><strong>You:</strong> ${userInput}</p>`;

This is a Cross-Site Scripting (XSS) vulnerability.

Current Behavior

Any HTML or JavaScript typed by the user is executed in the page context. For example, typing <img src=x onerror=alert(1)> in the chat input executes JavaScript.

Why This Improvement Is Needed

XSS is ranked #3 in the OWASP Top 10. Even in a client-side app without a server database, this can be exploited to:

• Steal localStorage tokens (auth state, progress data)
• Redirect users to phishing pages
• Inject malicious scripts that run on subsequent page loads (if localStorage is used as cache)

Proposed Solution

• Create escapeHTML(str) helper using document.createTextNode() (browser-native escaping)
• Refactor appendMessage() to build DOM nodes instead of string concatenation
• Render user messages with textContent (never HTML)
• Add typing indicator while awaiting bot response
• Add Enter key support for submitting messages

Expected Outcome

User input is never executed as HTML. The chatbot is XSS-safe.