From c80d3653b97f35cbca9cf42fa350aa45ff0a3f30 Mon Sep 17 00:00:00 2001
From: Felix Wotschofsky <hello@felisk.io>
Date: Mon, 28 Nov 2022 23:29:39 +0100
Subject: [PATCH] =?UTF-8?q?Prevent=20XSS=20in=20GrantsInterface=20?=
 =?UTF-8?q?=F0=9F=9B=A1=EF=B8=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/GrantsInterface.ts | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/modules/GrantsInterface.ts b/src/modules/GrantsInterface.ts
index 688fa24..97d3fd3 100644
--- a/src/modules/GrantsInterface.ts
+++ b/src/modules/GrantsInterface.ts
@@ -117,7 +117,9 @@ export default class GrantsInterface {
     const table = document.createElement('table');
     table.className = 'consent-manager--table';
 
-    for (const category of this.client.config.categories) {
+    for (const [index, category] of Object.entries(
+      this.client.config.categories
+    )) {
       const row = document.createElement('tr');
       row.className = 'consent-manager--row';
 
@@ -126,14 +128,19 @@ export default class GrantsInterface {
       const checked = category.required || status ? 'checked' : '';
       row.innerHTML =
         `<td class="consent-manager--table-toggle-col">` +
-        `  <input id="consent-manager--table-toggle-${category.id}" class="consent-manager--table-toggle" type="checkbox" ${checked} ${disabled} />` +
+        `  <input id="consent-manager--table-toggle-${index}" class="consent-manager--table-toggle" type="checkbox" ${checked} ${disabled} />` +
         `</td>` +
         `<td class="consent-manager--table-label-col">` +
-        `  <label for="consent-manager--table-toggle-${category.id}">` +
-        `    <span class="consent-manager--table-label">${category.label}</span>` +
-        `    <sub class="consent-manager--table-description">${category.description}</sub>` +
+        `  <label for="consent-manager--table-toggle-${index}">` +
+        `    <span class="consent-manager--table-label"></span>` +
+        `    <sub class="consent-manager--table-description"></sub>` +
         `  </label>` +
         `</td>`;
+      row.querySelector('consent-manager--table-label').textContent =
+        category.label;
+      row.querySelector('consent-manager--table-description').textContent =
+        category.description;
+
       if (!category.required) {
         const checkbox: HTMLInputElement = row.querySelector(
           'input[type="checkbox"]'