Potential fix for code scanning alert no. 8: Client-side cross-site scripting

[erikraft]

Potential fix for https://github.com/erikraft/Drop/security/code-scanning/8

In general, the problem is that untrusted text (message.senderName / message.senderId) is interpolated into a string and assigned to meta.innerHTML, which parses it as HTML. To fix this without changing functionality, we should avoid using innerHTML for untrusted data and instead build the DOM structure using createElement + textContent/innerText (which do not interpret HTML). This preserves the same visual structure (<span>name</span><span>time</span>) while eliminating XSS.

Concretely, in public/scripts/ui.js inside _appendMessageNode, replace the line

meta.innerHTML = `<span>${message.senderName || message.senderId}</span><span>${time}</span>`;

with code that creates two <span> elements, sets their .innerText (or .textContent) to the sender label and time string, and appends them to meta. No new imports are needed, and no other parts of the code need to change, because the DOM structure will remain equivalent, just constructed safely.

---

Suggested fixes powered by Copilot Autofix. Review carefully before merging.

Summary by CodeRabbit

• Refactor
  • Improved the internal structure of chat metadata rendering to enhance code maintainability and safety while preserving the display of sender name and timestamp information.

[coderabbitai]

Walkthrough

The public/scripts/ui.js file was refactored to replace innerHTML-based DOM construction with explicit element creation. Chat metadata (sender name and time) now uses separately created span elements appended to the container, maintaining identical visual output while improving code safety and structure.

Changes

Cohort / File(s)	Summary
DOM Construction Refactoring public/scripts/ui.js	Replaced innerHTML string assignment with explicit span element creation for chat metadata (name and time display). Observable output unchanged; improves safety and structure.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Poem

🐰 A rabbit's rejoicing

No more strings of HTML in the night,
We build our DOM elements just right—
Span by span, safe and clear,
The metadata shines without fear! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main security fix: replacing innerHTML with safer DOM manipulation to prevent XSS vulnerabilities, which aligns with the code change and PR objectives.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch alert-autofix-8

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}