From bd8b53cd6046cef9802d593d8257392d81afb5ce Mon Sep 17 00:00:00 2001 From: Osmium Sorcerer Date: Wed, 3 Jun 2026 11:08:07 +0000 Subject: Eliminate innerHTML manipulation Construct DOM nodes directly instead of trying to sanitize every input string and dynamically updating HTML. Replace all uses of innerHTML with textContent, replaceChildren, and appendChild. This removes the need to use safeTags and replace newlines, but now requires preserving whitespace via CSS pre-wrap. Every OOC chat line is now placed into its own element instead of simply being appended to the log. This might be worse, and createTextNode is another alternative. --- webAO/dom/changeCharacter.ts | 2 +- webAO/dom/musicListFilter.ts | 2 +- webAO/dom/renderPlayerList.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) (limited to 'webAO/dom') diff --git a/webAO/dom/changeCharacter.ts b/webAO/dom/changeCharacter.ts index abf6f71..586b144 100644 --- a/webAO/dom/changeCharacter.ts +++ b/webAO/dom/changeCharacter.ts @@ -5,6 +5,6 @@ export function changeCharacter(_event: Event) { document.getElementById("client_waiting")!.style.display = "block"; document.getElementById("client_charselect")!.style.display = "block"; - document.getElementById("client_emo")!.innerHTML = ""; + document.getElementById("client_emo")!.replaceChildren(); } window.changeCharacter = changeCharacter; diff --git a/webAO/dom/musicListFilter.ts b/webAO/dom/musicListFilter.ts index b0a8c3b..ce6b2f6 100644 --- a/webAO/dom/musicListFilter.ts +++ b/webAO/dom/musicListFilter.ts @@ -11,7 +11,7 @@ export function musiclist_filter(_event: Event) { document.getElementById("client_musicsearch") )).value; - musiclist_element.innerHTML = ""; + musiclist_element.replaceChildren(); for (const trackname of client.musics) { if (trackname.toLowerCase().indexOf(searchname.toLowerCase()) !== -1) { diff --git a/webAO/dom/renderPlayerList.ts b/webAO/dom/renderPlayerList.ts index c238f28..6c696ac 100644 --- a/webAO/dom/renderPlayerList.ts +++ b/webAO/dom/renderPlayerList.ts @@ -3,7 +3,7 @@ import { AO_HOST } from "../client/aoHost"; export function renderPlayerList() { const list = document.getElementById("client_playerlist") as HTMLTableElement; - list.innerHTML = ""; + list.replaceChildren(); const header = list.createTHead().insertRow(); for (const label of ["Icon", "Character", "Showname", "OOC Name"]) { -- cgit