fix: code scanning alert no. 2: DOM text reinterpreted as HTML

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> Signed-off-by: Patrick Kollitsch <[email protected]>
davidsneighbour · Jan 11, 2025 · ebb9249 · ebb9249
1 parent 0b54de8
commit ebb9249
Showing 1 changed file with 15 additions and 7 deletions.
diff --git a/static/color-chooser.html b/static/color-chooser.html
@@ -222,29 +222,37 @@ <h1>Nearest Color Finder</h1>
     document.getElementById("findColor").addEventListener("click", () => {
       const colorInput = document.getElementById("colorInput").value;
       const resultDiv = document.getElementById("result");
-      resultDiv.innerHTML = "";
+      resultDiv.textContent = "";
 
       const nearestColor = findNearestColorFromGroups(colorInput);
       if (nearestColor) {
         resultDiv.innerHTML = `
           <div class="comparison">
             <div>
               <p>Original color:</p>
-              <div class="color-box" style="background-color: ${colorInput};"></div>
-              <p>${colorInput}</p>
+              <div class="color-box" style="background-color: ${escapeHtml(colorInput)};"></div>
+              <p>${escapeHtml(colorInput)}</p>
             </div>
             <div>
               <p>Nearest color:</p>
-              <div class="color-box" style="background-color: ${nearestColor.value};"></div>
-              <p>${nearestColor.name} (${nearestColor.value})</p>
-              <p>Group: ${nearestColor.group}</p>
+              <div class="color-box" style="background-color: ${escapeHtml(nearestColor.value)};"></div>
+              <p>${escapeHtml(nearestColor.name)} (${escapeHtml(nearestColor.value)})</p>
+              <p>Group: ${escapeHtml(nearestColor.group)}</p>
             </div>
           </div>
         `;
       } else {
-        resultDiv.innerHTML = `<p>Invalid color input. Please enter a valid hex color code.</p>`;
+        resultDiv.textContent = "Invalid color input. Please enter a valid hex color code.";
       }
     });
+    function escapeHtml(unsafe) {
+      return unsafe
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+    }
   </script>
 </body>
 </html>