Use innerHTML only if needed and on escaped input

[giuscris]

This pull request focuses on improving frontend security and consistency by standardizing how text content is inserted into the DOM and by enhancing input sanitization. The main changes include replacing most uses of innerHTML with innerText to prevent possible XSS vulnerabilities, introducing and applying a new escapeHtml utility function, and refactoring the validation.ts file for better maintainability and correctness.

Security and sanitization improvements:

• Introduced a new escapeHtml function in validation.ts to safely escape user-provided or dynamic text before inserting it into the DOM, and updated various components (e.g., files list, pages view, upload input) to use this function when handling user input or file names. [1] [2] [3] [4] [5] [6] [7] [8]

• Replaced most uses of innerHTML with innerText throughout UI components (such as file lists, color/range/duration/tags inputs, backups, and updates views) to prevent interpreting potentially unsafe HTML. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15]

Refactoring and maintainability:

• Refactored validation.ts by extracting and reorganizing utility functions and lookup tables for escaping, diacritics, and slug creation, making the code more modular and easier to maintain. [1] [2]

Input handling improvements:

• Updated event handlers and selectors in files and pages components to more strictly type and sanitize search input, reducing the risk of errors and unsafe DOM manipulation. [1] [2] [3] [4]

Consistency improvements:

• Ensured consistent usage of selectors and text handling in UI updates, such as always using innerText for labels, dropdowns, and tags, and consistently escaping text where necessary. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14]

These changes collectively improve the security and reliability of the codebase, especially regarding user input and DOM updates.

[Copilot]

Pull Request Overview

This pull request improves frontend security by replacing innerHTML with innerText throughout the codebase and introducing HTML escaping via a new escapeHtml utility function. The changes aim to prevent potential XSS vulnerabilities when handling user input or dynamic content.

• Introduces escapeHtml function and applies it to user-generated content (file names, search inputs)
• Replaces most innerHTML assignments with innerText to prevent HTML interpretation
• Refactors validation.ts by extracting lookup tables and optimizing replace operations

Reviewed Changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
validation.ts	Adds escapeHtml function; extracts and refactors slug/diacritics maps; optimizes string replacement logic
updates.ts	Replaces innerHTML with innerText for version names and status messages
pages.ts	Adds HTML escaping for search input; updates search handler to use innerText and escapeHtml
backups.ts	Replaces innerHTML with innerText for backup metadata display
upload-input.ts	Applies escapeHtml to file names before inserting into DOM
tags-input.ts	Replaces innerHTML with innerText for tag labels and list clearing
range-input.ts	Changes output value display from innerHTML to innerText
duration-input.ts	Updates label text setting from innerHTML to innerText
date-input.ts	Changes calendar time display from innerHTML to innerText
color-input.ts	Updates color value label from innerHTML to innerText
fileslist.ts	Adds HTML escaping for search; applies escapeHtml to file names in search results

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.