Avoid self-XSS

index.html.tmpl

@@ -139,6 +139,17 @@
         document.getElementById('maxUploadSizeLabel').textContent = formatBytes(maxUploadSize);
         document.getElementById('maxUploadSizeText').textContent = formatBytes(maxUploadSize);
 
+        function clearResults() {
+            results.replaceChildren();
+        }
+
+        function showMessage(message) {
+            const div = document.createElement('div');
+            div.className = 'result-item';
+            div.textContent = message;
+            results.replaceChildren(div);
+        }
+
         uploadArea.addEventListener('click', () => fileInput.click());
 
         uploadArea.addEventListener('dragover', (e) => {
@@ -174,14 +185,14 @@
             }
 
             if (oversizedFiles.length > 0) {
-                results.innerHTML = '<div class="result-item">Upload failed: the following file(s) exceed the maximum size of ' +
+                showMessage('Upload failed: the following file(s) exceed the maximum size of ' +
-                    formatBytes(maxUploadSize) + ': ' + oversizedFiles.join(', ') + '</div>';
+                    formatBytes(maxUploadSize) + ': ' + oversizedFiles.join(', '));
                 return;
             }
 
             if (maxUploadSize && totalSize > maxUploadSize) {
-                results.innerHTML = '<div class="result-item">Upload failed: total upload size (' + formatBytes(totalSize) +
+                showMessage('Upload failed: total upload size (' + formatBytes(totalSize) +
-                    ') exceeds the maximum of ' + formatBytes(maxUploadSize) + '</div>';
+                    ') exceeds the maximum of ' + formatBytes(maxUploadSize));
                 return;
             }
 
@@ -192,7 +203,7 @@
 
             progressContainer.style.display = 'block';
             progressBar.style.width = '0%';
-            results.innerHTML = '';
+            clearResults();
 
             const xhr = new XMLHttpRequest();
 
@@ -219,13 +230,13 @@
                             message = xhr.responseText;
                         }
                     }
-                    results.innerHTML = '<div class="result-item">Upload failed: ' + message + '</div>';
+                    showMessage('Upload failed: ' + message);
                 }
                 progressBar.style.width = '100%';
             });
 
             xhr.addEventListener('error', () => {
-                results.innerHTML = '<div class="result-item">Upload failed: Network error</div>';
+                showMessage('Upload failed: Network error');
             });
 
             xhr.open('POST', '/upload');
@@ -233,11 +244,19 @@
         }
 
         function displayResults(urls) {
-            results.innerHTML = '<h3>Download URLs:</h3>';
+            const heading = document.createElement('h3');
+            heading.textContent = 'Download URLs:';
+            results.replaceChildren(heading);
+
             urls.forEach(url => {
                 const div = document.createElement('div');
                 div.className = 'result-item';
-                div.innerHTML = '<a href="' + url + '" target="_blank">' + url + '</a>';
+                const link = document.createElement('a');
+                link.href = url;
+                link.target = '_blank';
+                link.rel = 'noopener noreferrer';
+                link.textContent = url;
+                div.appendChild(link);
                 results.appendChild(div);
             });
         }