Harden app security controls from audit

wwwroot/js/modals-ui.js

@@ -1,18 +1,28 @@
 import { t } from "./i18n.js";
 import { toast } from "./dom.js";
-import { escapeHtml } from "./ui-utils.js";
 
 export function openLightbox(url, title) {
     const overlay = document.createElement("div");
     overlay.className = "lightbox";
-    const safeTitle = escapeHtml(title || "");
-    overlay.innerHTML = `
-    <div class="lightbox-content">
-      <button class="lightbox-close" aria-label="${t("lightbox.close")}">✕</button>
-      <img src="${url}" alt="${safeTitle}" />
-      <p>${safeTitle}</p>
-    </div>
-  `;
+
+    const content = document.createElement("div");
+    content.className = "lightbox-content";
+
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "lightbox-close";
+    closeBtn.setAttribute("aria-label", t("lightbox.close"));
+    closeBtn.type = "button";
+    closeBtn.textContent = "✕";
+
+    const image = document.createElement("img");
+    image.src = url ?? "";
+    image.alt = title ?? "";
+
+    const caption = document.createElement("p");
+    caption.textContent = title ?? "";
+
+    content.append(closeBtn, image, caption);
+    overlay.appendChild(content);
     overlay.addEventListener("click", (e) => {
         if (
             e.target.classList.contains("lightbox") ||
@@ -38,15 +48,28 @@ export function openConfirmModal({
     overlay.className = "edit-modal";
     const panel = document.createElement("div");
     panel.className = "edit-panel";
-    panel.innerHTML = `
-      <div class="edit-header">
-        <h3>${title}</h3>
-        <button class="lightbox-close" aria-label="${t("modal.close")}">x</button>
-      </div>
-      <div class="edit-body">
-        <p>${body}</p>
-      </div>
-    `;
+
+    const header = document.createElement("div");
+    header.className = "edit-header";
+
+    const heading = document.createElement("h3");
+    heading.textContent = title ?? "";
+
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "lightbox-close";
+    closeBtn.setAttribute("aria-label", t("modal.close"));
+    closeBtn.type = "button";
+    closeBtn.textContent = "x";
+
+    header.append(heading, closeBtn);
+
+    const bodyWrap = document.createElement("div");
+    bodyWrap.className = "edit-body";
+    const bodyText = document.createElement("p");
+    bodyText.textContent = body ?? "";
+    bodyWrap.appendChild(bodyText);
+    panel.append(header, bodyWrap);
+
     const close = () => overlay.remove();
     const actions = document.createElement("div");
     actions.className = "stack horizontal confirm-actions";
@@ -63,7 +86,7 @@ export function openConfirmModal({
         actions.append(cancelBtn);
         cancelBtn.addEventListener("click", close);
     }
-    const bodyContainer = panel.querySelector(".edit-body");
+    const bodyContainer = bodyWrap;
     let passwordInput = null;
     if (requirePassword && bodyContainer) {
         const field = document.createElement("label");