sanitize user input when passing it to innerHTML in the UI

* use dompurify library for that * replaced many `innerHTML` assignments with `textContent` Signed-off-by: Thomas Jäckle <thomas.jaeckle@beyonnex.io>
eclipse-ditto · May 17, 2024 · cce2e96 · cce2e96
1 parent aba53ad
commit cce2e96
Show file tree

Hide file tree

Showing 17 changed files with 66 additions and 68 deletions.
diff --git a/ui/modules/connections/connections.ts b/ui/modules/connections/connections.ts
@@ -16,7 +16,7 @@
 /* eslint-disable require-jsdoc */
 import * as API from '../api.js';
 import * as Utils from '../utils.js';
-import {TabHandler} from '../utils/tabHandler.js';
+import { TabHandler } from '../utils/tabHandler.js';
 import connectionsHTML from './connections.html';
 
 const observers = [];
@@ -57,7 +57,7 @@ export function setConnection(connection, isNewConnection = false) {
 }
 
 export function loadConnections() {
-  dom.tbodyConnections.innerHTML = '';
+  dom.tbodyConnections.textContent = '';
   let connectionSelected = false;
   API.callConnectionsAPI('listConnections', (connections) => {
     connections.forEach((connection) => {
@@ -66,15 +66,15 @@ export function loadConnections() {
       row.id = id;
       if (API.env() === 'ditto_2') {
         API.callConnectionsAPI('retrieveConnection', (dittoConnection) => {
-          row.insertCell(0).innerHTML = dittoConnection.name;
+          row.insertCell(0).textContent = dittoConnection.name;
         },
         id);
       } else {
-        row.insertCell(0).innerHTML = connection.name ? connection.name : id;
+        row.insertCell(0).textContent = connection.name ? connection.name : id;
       }
       API.callConnectionsAPI('retrieveStatus', (status) => {
-        row.insertCell(-1).innerHTML = status.liveStatus;
-        row.insertCell(-1).innerHTML = status.recoveryStatus;
+        row.insertCell(-1).textContent = status.liveStatus;
+        row.insertCell(-1).textContent = status.recoveryStatus;
       },
       id);
       if (id === selectedConnectionId) {

diff --git a/ui/modules/connections/connectionsMonitor.ts b/ui/modules/connections/connectionsMonitor.ts
@@ -86,7 +86,7 @@ function onEnableConnectionLogsClick() {
 
 function retrieveConnectionMetrics() {
   Utils.assert(selectedConnectionId, 'Please select a connection', dom.tableValidationConnections);
-  dom.tbodyConnectionMetrics.innerHTML = '';
+  dom.tbodyConnectionMetrics.textContent = '';
   API.callConnectionsAPI('retrieveConnectionMetrics', (response) => {
     if (response.connectionMetrics) {
       Object.keys(response.connectionMetrics).forEach((direction) => {
@@ -149,8 +149,8 @@ function onConnectionChange(connection, isNewConnection = true) {
   selectedConnectionId = connection ? connection.id : null;
   connectionStatusDetail.setValue('');
   connectionLogDetail.setValue('');
-  dom.tbodyConnectionMetrics.innerHTML = '';
-  dom.tbodyConnectionLogs.innerHTML = '';
+  dom.tbodyConnectionMetrics.textContent = '';
+  dom.tbodyConnectionLogs.textContent = '';
   if (!isNewConnection && connection && connection.id) {
     retrieveConnectionLogs();
   }

diff --git a/ui/modules/environments/environments.ts b/ui/modules/environments/environments.ts
@@ -11,13 +11,13 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 
+import * as Utils from '../utils.js';
 /* eslint-disable arrow-parens */
 /* eslint-disable prefer-const */
 /* eslint-disable require-jsdoc */
 import * as Authorization from './authorization.js';
-import * as Utils from '../utils.js';
-import defaultTemplates from './environmentTemplates.json';
 import environmentsHTML from './environments.html';
+import defaultTemplates from './environmentTemplates.json';
 
 
 const URL_PRIMARY_ENVIRONMENT_NAME = 'primaryEnvironmentName';
@@ -222,7 +222,7 @@ export function environmentsJsonChanged(modifiedField = null) {
   }
 
   function updateEnvTable() {
-    dom.tbodyEnvironments.innerHTML = '';
+    dom.tbodyEnvironments.textContent = '';
     Object.keys(environments).forEach((key) => {
       Utils.addTableRow(dom.tbodyEnvironments, key, key === selectedEnvName);
     });

diff --git a/ui/modules/operations/operations.ts b/ui/modules/operations/operations.ts
@@ -47,12 +47,12 @@ function loadAllLogLevels() {
   API.callDittoREST('GET', '/devops/logging', null, null, false, true)
       .then((result) => createLoggerView(result))
       .catch((error) => {
-        dom.divLoggers.innerHTML = '';
+        dom.divLoggers.textContent = '';
       });
 }
 
 function createLoggerView(allLogLevels) {
-  dom.divLoggers.innerHTML = '';
+  dom.divLoggers.textContent = '';
 
   type LogLevel = {
     loggerConfigs?: object[]

diff --git a/ui/modules/policies/policies.ts b/ui/modules/policies/policies.ts
@@ -227,7 +227,7 @@ function onThingChanged(thing) {
 }
 
 function refreshWhoAmI() {
-  dom.tbodyWhoami.innerHTML = '';
+  dom.tbodyWhoami.textContent = '';
   API.callDittoREST('GET', '/whoami')
       .then((whoamiResult) => {
         whoamiResult.subjects.forEach((subject) => {

diff --git a/ui/modules/things/attributes.ts b/ui/modules/things/attributes.ts
@@ -115,7 +115,7 @@ function refreshAttribute(thing, attributePath = null) {
 function onThingChanged(thing) {
   dom.crudAttribute.editDisabled = (thing === null);
 
-  dom.tbodyAttributes.innerHTML = '';
+  dom.tbodyAttributes.textContent = '';
   let count = 0;
   let thingHasAttribute = false;
   if (thing && thing.attributes) {

diff --git a/ui/modules/things/featureMessages.ts b/ui/modules/things/featureMessages.ts
@@ -163,11 +163,11 @@ function clearAllFields() {
   dom.inputMessageTimeout.value = '10';
   acePayload.setValue('');
   aceResponse.setValue('');
-  dom.ulMessageTemplates.innerHTML = '';
+  dom.ulMessageTemplates.textContent = '';
 }
 
 function refillTemplates() {
-  dom.ulMessageTemplates.innerHTML = '';
+  dom.ulMessageTemplates.textContent = '';
   Utils.addDropDownEntries(dom.ulMessageTemplates, ['Saved message templates'], true);
   if (theFeatureId && Environments.current().messageTemplates[theFeatureId]) {
     Utils.addDropDownEntries(

diff --git a/ui/modules/things/features.ts b/ui/modules/things/features.ts
@@ -219,7 +219,7 @@ function refreshFeature(thing, featureId = null) {
 function onThingChanged(thing) {
   dom.crudFeature.editDisabled = (thing === null);
   // Update features table
-  dom.tbodyFeatures.innerHTML = '';
+  dom.tbodyFeatures.textContent = '';
   let count = 0;
   let thingHasFeature = false;
   if (thing && thing.features) {

diff --git a/ui/modules/things/fields.ts b/ui/modules/things/fields.ts
@@ -10,7 +10,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0
  */
-import {Modal} from 'bootstrap';
+import { Modal } from 'bootstrap';
 
 import * as Environments from '../environments/environments.js';
 import * as Utils from '../utils.js';
@@ -165,14 +165,14 @@ function onEnvironmentChanged() {
  * (Re-)Initializes the fieldlist in the UI
  */
 function updateFieldList() {
-  dom.fieldList.innerHTML = '';
+  dom.fieldList.textContent = '';
   theFieldIndex = -1;
   Environments.current().fieldList.forEach((field, i) => {
     const fieldSelected = dom.fieldPath.value === field.path;
     const row = dom.fieldList.insertRow();
     Utils.addCheckboxToRow(row, i, field.active, toggleFieldActiveEventHandler);
-    row.insertCell(-1).innerHTML = field.path;
-    row.insertCell(-1).innerHTML = field['label'] ? field.label : null;
+    row.insertCell(-1).textContent = field.path;
+    row.insertCell(-1).textContent = field['label'] ? field.label : null;
     if (fieldSelected) {
       theFieldIndex = i;
       row.classList.add('table-active');

diff --git a/ui/modules/things/messagesIncoming.ts b/ui/modules/things/messagesIncoming.ts
@@ -53,7 +53,7 @@ function onMessageTableClick(event) {
 function onResetMessagesClick() {
   messages = [];
   dom.badgeMessageIncomingCount.textContent = '';
-  dom.tbodyMessagesIncoming.innerHTML = '';
+  dom.tbodyMessagesIncoming.textContent = '';
   messageDetail.setValue('');
 }
 

diff --git a/ui/modules/things/searchFilter.ts b/ui/modules/things/searchFilter.ts
@@ -61,8 +61,7 @@ export async function ready() {
   });
 
   dom.searchThings.onclick = () => {
-    fillHistory(dom.searchFilterEdit.value);
-    ThingsSearch.searchTriggered(dom.searchFilterEdit.value);
+    ThingsSearch.searchTriggered(dom.searchFilterEdit.value, () => fillHistory(dom.searchFilterEdit.value));
   };
 
   dom.searchFavorite.onclick = () => {
@@ -74,8 +73,7 @@ export async function ready() {
 
   dom.searchFilterEdit.onkeyup = (event) => {
     if ((event.key === 'Enter' || event.code === 13) && dom.searchFilterEdit.value.indexOf(FILTER_PLACEHOLDER) < 0) {
-      fillHistory(dom.searchFilterEdit.value);
-      ThingsSearch.searchTriggered(dom.searchFilterEdit.value);
+      ThingsSearch.searchTriggered(dom.searchFilterEdit.value, () => fillHistory(dom.searchFilterEdit.value));
     } else {
       clearTimeout(keyStrokeTimeout);
       keyStrokeTimeout = setTimeout(checkIfFavorite, 1000);
@@ -107,7 +105,7 @@ function fillSearchFilterEdit(fillString) {
   checkIfFavorite();
   const filterEditNeeded = checkAndMarkParameter();
   if (!filterEditNeeded) {
-    ThingsSearch.searchTriggered(dom.searchFilterEdit.value);
+    ThingsSearch.searchTriggered(dom.searchFilterEdit.value, () => null);
   }
 }
 

diff --git a/ui/modules/things/thingMessages.ts b/ui/modules/things/thingMessages.ts
@@ -152,11 +152,11 @@ function clearAllFields() {
   dom.inputThingMessageTimeout.value = '10';
   acePayload.setValue('');
   aceResponse.setValue('');
-  dom.ulThingMessageTemplates.innerHTML = '';
+  dom.ulThingMessageTemplates.textContent = '';
 }
 
 function refillTemplates() {
-  dom.ulThingMessageTemplates.innerHTML = '';
+  dom.ulThingMessageTemplates.textContent = '';
   Utils.addDropDownEntries(dom.ulThingMessageTemplates, ['Saved message templates'], true);
   if (Environments.current().messageTemplates['/']) {
     Utils.addDropDownEntries(

diff --git a/ui/modules/things/thingsCRUD.ts b/ui/modules/things/thingsCRUD.ts
@@ -124,7 +124,7 @@ function onThingChanged(thingJson) {
   updateThingJsonEditor();
 
   function updateThingDetailsTable() {
-    dom.tbodyThingDetails.innerHTML = '';
+    dom.tbodyThingDetails.textContent = '';
     if (thingJson) {
       Utils.addTableRow(dom.tbodyThingDetails, 'thingId', false, true, thingJson.thingId);
       Utils.addTableRow(dom.tbodyThingDetails, 'policyId', false, true, thingJson.policyId);

diff --git a/ui/modules/things/thingsSearch.ts b/ui/modules/things/thingsSearch.ts
@@ -20,8 +20,8 @@ import { JSONPath } from 'jsonpath-plus';
 
 import * as API from '../api.js';
 import * as Environments from '../environments/environments.js';
-
 import * as Utils from '../utils.js';
+import { sanitizeHTML } from '../utils.js';
 import * as Fields from './fields.js';
 import * as Things from './things.js';
 import * as ThingsSSE from './thingsSSE.js';
@@ -75,12 +75,14 @@ function onThingsTableClicked(event) {
 /**
  * Tests if the search filter is an RQL. If yes, things search is called otherwise just things get
  * @param {String} filter search filter string containing an RQL or a thingId
+ * @param rqlFilterCallback a callback to invoke when the passed `filter` was a valid RQL statement
  */
-export function searchTriggered(filter) {
+export function searchTriggered(filter: string, rqlFilterCallback: () => void) {
   lastSearch = filter;
   const regex = /^(eq\(|ne\(|gt\(|ge\(|lt\(|le\(|in\(|like\(|ilike\(|exists\(|and\(|or\(|not\().*/;
   if (filter === '' || regex.test(filter)) {
     searchThings(filter);
+    rqlFilterCallback();
   } else {
     getThings([filter]);
   }
@@ -104,7 +106,7 @@ export function performLastSearch() {
   if (lastSearch === 'pinned') {
     pinnedTriggered();
   } else {
-    searchTriggered(lastSearch);
+    searchTriggered(lastSearch, () => null);
   }
 }
 
@@ -113,7 +115,7 @@ export function performLastSearch() {
  * @param {Array} thingIds Array of thingIds
  */
 export function getThings(thingIds) {
-  dom.thingsTableBody.innerHTML = '';
+  dom.thingsTableBody.textContent = '';
   const fieldsQueryParameter = Fields.getQueryParameter();
   if (thingIds.length > 0) {
     API.callDittoREST('GET',
@@ -134,8 +136,8 @@ export function getThings(thingIds) {
 
 function resetAndClearViews(retainThing = false) {
   theSearchCursor = null;
-  dom.thingsTableHead.innerHTML = '';
-  dom.thingsTableBody.innerHTML = '';
+  dom.thingsTableHead.textContent = '';
+  dom.thingsTableBody.textContent = '';
   if (!retainThing) {
     Things.setTheThing(null);
   }
@@ -187,7 +189,7 @@ function searchThings(filter, isMore = false) {
 
   function addMoreToThingList() {
     const moreCell = dom.thingsTableBody.insertRow().insertCell(-1);
-    moreCell.innerHTML = 'load more...';
+    moreCell.textContent = 'load more...';
     moreCell.colSpan = dom.thingsTableBody.rows[0].childElementCount;
     moreCell.style.textAlign = 'center';
     moreCell.style.cursor = 'pointer';
@@ -225,7 +227,7 @@ function fillThingsTable(thingsList) {
   }
 
   function fillHeaderRow() {
-    dom.thingsTableHead.innerHTML = '';
+    dom.thingsTableHead.textContent = '';
     // Utils.addCheckboxToRow(dom.thingsTableHead, 'checkboxHead', false, null);
     Utils.insertHeaderCell(dom.thingsTableHead, '');
     Utils.insertHeaderCell(dom.thingsTableHead, 'Thing ID');
@@ -302,7 +304,7 @@ export function updateTableRow(thingUpdateJson) {
         path: path,
       });
       if (elem.length !== 0) {
-        cell.innerHTML = elem[0];
+        cell.innerHTML = sanitizeHTML(elem[0]);
       }
     }
   });