From 4d755998f25a90122fb50015536915c28b518f08 Mon Sep 17 00:00:00 2001
From: iotserver24 <147928812+iotserver24@users.noreply.github.com>
Date: Mon, 4 May 2026 04:21:22 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=92=20Fix=20DOM-based=20XSS=20in=20Set?=
 =?UTF-8?q?tings=20Panel=20Webview?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🎯 What: Fixed a DOM-based Cross-Site Scripting (XSS) vulnerability in the Settings Panel webview where user-controlled strings (profiles and model names) were injected into the DOM via innerHTML.
⚠️ Risk: An attacker could potentially execute malicious scripts within the webview context if they can influence the configuration data, potentially leading to unauthorized actions within the extension.
🛡️ Solution: Replaced innerHTML string concatenation with secure DOM manipulation using document.createElement and textContent. Functional property assignments were used for event handlers instead of string-based HTML attributes.
---
 .../src/providers/settings-panel-provider.ts  | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/ext/src/providers/settings-panel-provider.ts b/packages/ext/src/providers/settings-panel-provider.ts
index 34d89f0..4519bf1 100644
--- a/packages/ext/src/providers/settings-panel-provider.ts
+++ b/packages/ext/src/providers/settings-panel-provider.ts
@@ -473,9 +473,14 @@ export class SettingsPanelProvider {
 
     // Update profile dropdown
     const sel = q('profileSelect');
-    sel.innerHTML = profiles.map(p=>
-      '<option value="'+p+'"'+(p===profile?' selected':'')+'>'+p+'</option>'
-    ).join('');
+    sel.innerHTML = '';
+    profiles.forEach(p => {
+      const opt = document.createElement('option');
+      opt.value = p;
+      opt.textContent = p;
+      if (p === profile) opt.selected = true;
+      sel.appendChild(opt);
+    });
 
     // Apply fields
     q('apiKey').value            = '';   // never pre-fill the real key
@@ -511,9 +516,14 @@ export class SettingsPanelProvider {
         fetchedModels = msg.models;
         q('fetchStatus').textContent = msg.models.length+' models loaded';
         const list = q('modelList');
-        list.innerHTML = msg.models.map(m=>
-          '<div class="model-item" onclick="pickModel(\''+m+'\')">'+m+'</div>'
-        ).join('');
+        list.innerHTML = '';
+        msg.models.forEach(m => {
+          const item = document.createElement('div');
+          item.className = 'model-item';
+          item.textContent = m;
+          item.onclick = () => pickModel(m);
+          list.appendChild(item);
+        });
         list.classList.add('visible');
         break;
       }