mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-11-08 13:52:58 +00:00
[security] replace innerHTML in RevertModal.js
Migrated `js/ui/components/RevertModal.js` to safe DOM APIs (`createElement`, `textContent`, `DOMParser`). Extracted rendering logic to `js/ui/components/revertModalRenderers.js`. Updated baseline in `scripts/check-innerhtml.mjs` (0 remaining usages). Updated tests to mock DOMParser. Co-authored-by: PR0M3TH3AN <[email protected]>
This commit is contained in:
1 parent
83587ea3ea
commit
f676fb2ff5
9 files changed
+1001
-621
No files matched your search
@@ -0,0 +1,30 @@
|
||||
# Decisions - RevertModal innerHTML Migration
|
||||
|
||||
## Context
|
||||
`js/ui/components/RevertModal.js` had 10 assignments to `innerHTML`, making it a high-priority target for migration to safe DOM APIs. The file builds complex UI structures for revision history, including metadata, tags, and media variants.
|
||||
|
||||
## Strategies
|
||||
|
||||
### 1. DOM Construction
|
||||
Replaced template strings with `document.createElement`.
|
||||
- Created helper methods (`createPlaceholder`, `createListEmpty`, `createLinkMarkup`) to standardize element creation.
|
||||
- Used `DocumentFragment` where appropriate to minimize reflows, though direct appending to parent was used for simplicity in linear structures.
|
||||
|
||||
### 2. Complex Renderers Extraction
|
||||
The file size of `RevertModal.js` grew significantly (from ~1660 lines to ~1900 lines) due to the verbosity of DOM API vs template strings.
|
||||
- **Decision:** Extracted complex rendering logic (IMeta variants, tracks, segments, participants, etc.) into a new module: `js/ui/components/revertModalRenderers.js`.
|
||||
- This reduced the main file size and kept it compliant with linting rules.
|
||||
- Dependencies (`createPlaceholder`, etc.) are passed to these renderers via a `utils` object to avoid tight coupling or circular dependencies.
|
||||
|
||||
### 3. Initialization
|
||||
- Replaced `wrapper.innerHTML = html` in `load()` with `DOMParser`.
|
||||
- Replaced `this.details.innerHTML = this.detailsDefaultHTML` in `reset()` with `DOMParser`.
|
||||
- While `detailsDefaultHTML` is trusted (sourced from static template), using `DOMParser` ensures 0 usages of `innerHTML` in the file.
|
||||
|
||||
### 4. Tests
|
||||
- Updated `tests/modal-accessibility.test.mjs` to mock `DOMParser` in the Node.js test environment (JSDOM).
|
||||
|
||||
## Results
|
||||
- `innerHTML` count for `RevertModal.js`: 0 (removed from baseline).
|
||||
- File size violation resolved by extraction.
|
||||
- Functionality preserved (verified via unit tests).
|
||||
Reference in new issue
Block a user