Use safe DOM manipulation for UI messages (#508)

* Use safe DOM manipulation for UI messages

Replace direct innerHTML usage with replaceChildren/createElement/textContent to render error and loading UI. Adds fallbacks for missing tagName/message values and constructs DOM nodes programmatically (components/simple-transcription, interfaces/transcription, interfaces/custom, interfaces/manage-columns) to avoid accidental HTML injection and preserve existing DOM structure.

* Changes during review

* Changes during review

---------

Co-authored-by: Bryan Haberberger <bryan.j.haberberger@slu.edu>

Author: cubap

components/simple-transcription/index.js

@@ -830,7 +830,7 @@ export default class SimpleTranscriptionInterface extends HTMLElement {
     const tagName = tool.custom?.tagName
     if (tagName && tool.url) {
       if (customElements.get(tagName)) {
-        rightPane.innerHTML = `<${tagName}></${tagName}>`
+        rightPane.replaceChildren(document.createElement(tagName))
         return
       }
 
@@ -844,10 +844,13 @@ export default class SimpleTranscriptionInterface extends HTMLElement {
       script.src = tool.url
       script.id = scriptId
       script.onload = () => {
-        rightPane.innerHTML = `<${tagName}></${tagName}>`
+        rightPane.replaceChildren(document.createElement(tagName))
       }
       script.onerror = () => {
-        rightPane.innerHTML = `<p>Failed to load tool: ${tagName}</p>`
+        rightPane.replaceChildren()
+        const message = document.createElement('p')
+        message.textContent = `Failed to load tool: ${tagName ?? 'unknown tool'}`
+        rightPane.appendChild(message)
       }
       document.head.appendChild(script)
       return
@@ -922,7 +925,10 @@ export default class SimpleTranscriptionInterface extends HTMLElement {
     }
 
     // Fallback message for tools that don't have proper configuration
-    rightPane.innerHTML = `<p>${tool.label ?? tool.custom?.tagName ?? 'Tool'} - functionality coming soon...</p>`
+    rightPane.replaceChildren()
+    const message = document.createElement('p')
+    message.textContent = `${tool.label ?? tool.custom?.tagName ?? 'Tool'} - functionality coming soon...`
+    rightPane.appendChild(message)
     this.checkMagnifierVisibility?.()
   }
 

interfaces/custom/index.html

@@ -308,7 +308,11 @@ <h3>${namespace}</h3>
         }
 
         function showError(message) {
-            errorContainer.innerHTML = `<div class="error">${message}</div>`
+            errorContainer.innerHTML = ''
+            const errorMessage = document.createElement('div')
+            errorMessage.className = 'error'
+            errorMessage.textContent = message ?? 'An unknown error occurred'
+            errorContainer.appendChild(errorMessage)
             setTimeout(() => {
                 errorContainer.innerHTML = ''
             }, 5000)

interfaces/manage-columns/index.js

@@ -895,12 +895,23 @@ class TpenManageColumns extends HTMLElement {
         return { imgUrl, imgWidth, imgHeight }
     }
 
-    showError(message) { 
-        this.container.innerHTML = `<div class="error-message"><strong>Error:</strong> ${message}</div>` 
+    showError(message) {
+        this.container.replaceChildren()
+        const wrapper = document.createElement('div')
+        wrapper.className = 'error-message'
+        const strong = document.createElement('strong')
+        strong.textContent = 'Error:'
+        const textNode = document.createTextNode(` ${message ?? ''}`)
+        wrapper.append(strong, textNode)
+        this.container.appendChild(wrapper)
     }
 
-    showLoading(message = "Loading...") { 
-        this.container.innerHTML = `<div class="loading">${message}</div>` 
+    showLoading(message = 'Loading...') {
+        this.container.replaceChildren()
+        const wrapper = document.createElement('div')
+        wrapper.className = 'loading'
+        wrapper.textContent = message ?? 'Loading...'
+        this.container.appendChild(wrapper)
     }
 
     async renderImage(imgUrl) {

interfaces/transcription/index.js

@@ -369,7 +369,7 @@ export default class TranscriptionInterface extends HTMLElement {
     if (tagName && tool.url) {
       // Dynamically load the script if not already loaded
       if (customElements.get(tagName)) {
-        rightPane.innerHTML = `<${tagName}></${tagName}>`
+        rightPane.replaceChildren(document.createElement(tagName))
         return
       }
       const scriptId = `tool-script-${tool.toolName}`
@@ -382,10 +382,13 @@ export default class TranscriptionInterface extends HTMLElement {
       script.src = tool.url
       script.id = scriptId
       script.onload = () => {
-        rightPane.innerHTML = `<${tagName}></${tagName}>`
+        rightPane.replaceChildren(document.createElement(tagName))
       }
       script.onerror = () => {
-        rightPane.innerHTML = `<p>Failed to load tool: ${tagName}</p>`
+        rightPane.replaceChildren()
+        const message = document.createElement('p')
+        message.textContent = `Failed to load tool: ${tagName ?? 'unknown tool'}`
+        rightPane.appendChild(message)
       }
       document.head.appendChild(script)
       return
@@ -448,7 +451,10 @@ export default class TranscriptionInterface extends HTMLElement {
       return
     }
 
-    rightPane.innerHTML = `<p>${tool.label ?? tool.custom?.tagName ?? 'Tool'} - functionality coming soon...</p>`
+    rightPane.replaceChildren()
+    const message = document.createElement('p')
+    message.textContent = `${tool.label ?? tool.custom?.tagName ?? 'Tool'} - functionality coming soon...`
+    rightPane.appendChild(message)
     this.checkMagnifierVisibility()
   }