From 25bab3deb5c1598f474fa7f07fa52c0a0f81fc1e Mon Sep 17 00:00:00 2001
From: pacnpal <183241239+pacnpal@users.noreply.github.com>
Date: Tue, 28 Jan 2025 21:37:25 -0500
Subject: [PATCH] Potential fix for code scanning alert no. 4: DOM text
 reinterpreted as HTML

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
---
 src/simpleguardhome/templates/index.html | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/simpleguardhome/templates/index.html b/src/simpleguardhome/templates/index.html
index 87e125f..ef5fa32 100644
--- a/src/simpleguardhome/templates/index.html
+++ b/src/simpleguardhome/templates/index.html
@@ -6,6 +6,15 @@
     <title>SimpleGuardHome</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script>
+        function escapeHtml(unsafe) {
+            return unsafe
+                .replace(/&/g, "&amp;")
+                .replace(/</g, "&lt;")
+                .replace(/>/g, "&gt;")
+                .replace(/"/g, "&quot;")
+                .replace(/'/g, "&#039;");
+        }
+
         async function checkDomain(event) {
             event.preventDefault();
             const domain = document.getElementById('domain').value;
@@ -33,10 +42,10 @@
                         resultDiv.innerHTML = `
                             <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4">
                                 <p class="font-bold">Domain is blocked</p>
-                                <p class="text-sm"><strong>${domain}</strong> is blocked</p>
-                                <p class="text-sm">Reason: ${data.reason}</p>
-                                ${data.rules?.length ? `<p class="text-sm font-mono bg-red-50 p-2 mt-1 rounded">Rule: ${data.rules[0].text}</p>` : ''}
-                                ${data.service_name ? `<p class="text-sm mt-2">Service: ${data.service_name}</p>` : ''}
+                                <p class="text-sm"><strong>${escapeHtml(domain)}</strong> is blocked</p>
+                                <p class="text-sm">Reason: ${escapeHtml(data.reason)}</p>
+                                ${data.rules?.length ? `<p class="text-sm font-mono bg-red-50 p-2 mt-1 rounded">Rule: ${escapeHtml(data.rules[0].text)}</p>` : ''}
+                                ${data.service_name ? `<p class="text-sm mt-2">Service: ${escapeHtml(data.service_name)}</p>` : ''}
                             </div>`;
                         unblockDiv.innerHTML = `
                             <button onclick="unblockDomain('${domain}')" 
@@ -47,8 +56,8 @@
                         resultDiv.innerHTML = `
                             <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4">
                                 <p class="font-bold">Domain is not blocked</p>
-                                <p class="text-sm"><strong>${domain}</strong> is allowed</p>
-                                <p class="text-xs mt-2">Status: ${data.reason}</p>
+                                <p class="text-sm"><strong>${escapeHtml(domain)}</strong> is allowed</p>
+                                <p class="text-xs mt-2">Status: ${escapeHtml(data.reason)}</p>
                             </div>`;
                         unblockDiv.innerHTML = '';
                     }
@@ -68,7 +77,7 @@
                 resultDiv.innerHTML = `
                     <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4">
                         <p class="font-bold">Error checking domain</p>
-                        <p class="text-sm">${error.message}</p>
+                        <p class="text-sm">${escapeHtml(error.message)}</p>
                     </div>`;
                 unblockDiv.innerHTML = '';
             } finally {