Potential fix for code scanning alert no. 14: DOM text reinterpreted as HTML

[leandrumartin]

Potential fix for https://github.com/oss-slu/DigitalBonesBox/security/code-scanning/14

General fix: Avoid feeding untrusted or semi‑trusted text back into the DOM via innerHTML unless it has been properly HTML‑escaped, or avoid innerHTML altogether by constructing DOM nodes with textContent. Here, the vulnerability is in tests/test-colored-regions.html: addLog builds HTML strings containing unescaped message and then assigns consoleDiv.innerHTML a concatenation of those strings. We can keep the visual formatting (timestamp, severity coloring) but build elements programmatically and store them in logs as DOM nodes instead of HTML strings, and append them using DOM APIs (appendChild / replaceChildren) so that any text is treated as text, not HTML.

Best concrete fix without changing functionality:

• Change logs from an array of HTML strings to an array of DOM elements (e.g., <span> nodes).
• In addLog, instead of building a template string with <span class=...>...</span> and pushing it to logs, create a span element, set its className, and assign its textContent to the full [timestamp] TYPE: message string. This ensures any special characters in message are escaped by the browser.
• Update the rendering step: instead of consoleDiv.innerHTML = logs.slice(-50).join('\n');, clear consoleDiv and append the last 50 span elements, optionally inserting real text newlines or <br> elements between them for readability. This removes the dangerous innerHTML use for tainted content while preserving log display behavior.
• Leave the rest of the application code (dropdowns.js, imageDisplay.js, coloredRegionsOverlay.js) unchanged, as the sink is in the test file’s logger and fixing it protects against all tainted flows.

All changes are confined to tests/test-colored-regions.html, lines 84–97 where the logging is implemented.

---

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