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.

4 files changed, 8 insertions, 10 deletions

diff --git a/webAO/client/createArea.ts b/webAO/client/createArea.ts
index 9a40bef4..a90b49ad 100644
--- a/webAO/client/createArea.ts
+++ b/webAO/client/createArea.ts
@@ -18,7 +18,7 @@ export const createArea = (id: number, aname: string) => {
   const newarea = document.createElement("SPAN");
   newarea.className = "area-button area-default";
   newarea.id = `area${id}`;
-  newarea.innerText = thisarea.name;
+  newarea.textContent = thisarea.name;
   newarea.title =
     `Players: ${thisarea.players}\n` +
     `Status: ${thisarea.status}\n` +
diff --git a/webAO/client/fetchLists.ts b/webAO/client/fetchLists.ts
index 4e32abc9..710bc0e1 100644
--- a/webAO/client/fetchLists.ts
+++ b/webAO/client/fetchLists.ts
@@ -9,7 +9,7 @@ export const fetchBackgroundList = async () => {
     // the try catch will fail before here when there is no file
 
     const bg_select = <HTMLSelectElement>document.getElementById("bg_select");
-    bg_select.innerHTML = "";
+    bg_select.replaceChildren();
 
     bg_select.add(new Option("Custom", "0"));
     bg_array.forEach((background: string) => {
@@ -24,7 +24,7 @@ export const fetchCharacterList = async () => {
   const char_select = <HTMLSelectElement>(
     document.getElementById("client_iniselect")
   );
-  char_select.innerHTML = "";
+  char_select.replaceChildren();
 
   char_select.add(new Option("Custom", "0"));
 
@@ -43,7 +43,7 @@ export const fetchCharacterList = async () => {
 
 export const fetchEvidenceList = async () => {
   const evi_select = <HTMLSelectElement>document.getElementById("evi_select");
-  evi_select.innerHTML = "";
+  evi_select.replaceChildren();
 
   evi_select.add(new Option("Custom", "0"));
 
diff --git a/webAO/client/handleBans.ts b/webAO/client/handleBans.ts
index 004b27ee..4abd1f07 100644
--- a/webAO/client/handleBans.ts
+++ b/webAO/client/handleBans.ts
@@ -7,8 +7,6 @@ import { safeTags } from "../encoding";
  */
 export const handleBans = (type: string, reason: string) => {
   document.getElementById("client_error_overlay")!.style.display = "flex";
-  document.getElementById("client_errortext")!.innerHTML =
-    `${type}:<br>${safeTags(reason).replace(/\n/g, "<br />")}`;
-  (<HTMLElement>document.getElementById("client_reconnect")).style.display =
-    "none";
+  document.getElementById("client_errortext")!.textContent = `${type}:\n${reason}`;
+  document.getElementById("client_reconnect")!.style.display = "none";
 };
diff --git a/webAO/client/saveChatLogHandle.ts b/webAO/client/saveChatLogHandle.ts
index 5e6b277b..b184e09d 100644
--- a/webAO/client/saveChatLogHandle.ts
+++ b/webAO/client/saveChatLogHandle.ts
@@ -8,8 +8,8 @@ export const saveChatlogHandle = async () => {
   for (let i = 0; i < icMessageLogs.length; i++) {
     const SHOWNAME_POSITION = 0;
     const TEXT_POSITION = 2;
-    const showname = icMessageLogs[i].children[SHOWNAME_POSITION].innerHTML;
-    const text = icMessageLogs[i].children[TEXT_POSITION].innerHTML;
+    const showname = icMessageLogs[i].children[SHOWNAME_POSITION].textContent;
+    const text = icMessageLogs[i].children[TEXT_POSITION].textContent;
     const message = `${showname}: ${text}`;
     messages.push(message);
   }