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>

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) {

ui/modules/connections/connectionsMonitor.ts

@@ -10,13 +10,11 @@
  *
  * SPDX-License-Identifier: EPL-2.0
  */
-import {JSONPath} from 'jsonpath-plus';
-
 import * as API from '../api.js';
 import * as Utils from '../utils.js';
-import * as Connections from './connections.js';
-import { TableFilter } from '../utils/tableFilter.js';
 import { FilterType, Term } from '../utils/basicFilters.js';
+import { TableFilter } from '../utils/tableFilter.js';
+import * as Connections from './connections.js';
 /* eslint-disable prefer-const */
 /* eslint-disable max-len */
 /* eslint-disable no-invalid-this */
@@ -112,7 +110,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) => {
@@ -154,7 +152,7 @@ function retrieveConnectionLogs() {
 }
 
 function fillConnectionLogsTable() {
-  dom.tbodyConnectionLogs.innerHTML = '';
+  dom.tbodyConnectionLogs.textContent = '';
   connectionLogDetail.setValue('');
 
   filteredLogs = dom.tableFilterConnectionLogs.filterItems(connectionLogs);
@@ -188,8 +186,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();
   }

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);
     });

ui/modules/operations/piggyback.ts

@@ -16,10 +16,10 @@
 /* eslint-disable require-jsdoc */
 import * as API from '../api.js';
 import * as Utils from '../utils.js';
+import { TabHandler } from '../utils/tabHandler.js';
 import piggybackHTML from './piggyback.html';
 import piggybackPlaceholders from './piggybackPlaceholders.json';
 import * as Templates from './templates.js';
-import {TabHandler} from '../utils/tabHandler.js';
 
 const EDITOR_INVALID_JSON_MNSSAGE = 'Invalid json!'
 const HEADER_IS_REQUIRED_MESSAGE = 'Headers field is required!';
@@ -205,7 +205,7 @@ function hasEditorError(editorSession) {
 
 async function submitPiggybackCommand() {
     if (isCommandValid()) {
-        dom.responseStatus.innerHTML = REQUEST_IN_PROGRESS_MESSAGE;
+        dom.responseStatus.textContent = REQUEST_IN_PROGRESS_MESSAGE;
         aceResponse.setValue('', -1);
         let path = buildPath(
             dom.serviceSelector.value,
@@ -228,19 +228,19 @@ async function submitPiggybackCommand() {
             } catch (err) {
                 onRequestDone();
                 aceResponse.setValue(err.message, -1);
-                dom.responseStatus.innerHTML = REQUEST_ERROR_MESSAGE;
+                dom.responseStatus.textContent = REQUEST_ERROR_MESSAGE;
             }
         });
         promise.then((result: any) => {
             onRequestDone();
             result.json().then(resultJson => {
                 aceResponse.setValue(Utils.stringifyPretty(resultJson), -1);
-                dom.responseStatus.innerHTML = result.status;
+                dom.responseStatus.textContent = result.status;
             });
         }).catch(err => {
             onRequestDone();
             aceResponse.setValue(err.message, -1);
-            dom.responseStatus.innerHTML = REQUEST_ERROR_MESSAGE;
+            dom.responseStatus.textContent = REQUEST_ERROR_MESSAGE;
         });
 
     }

ui/modules/operations/servicesLogging.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 servicesLoggingHTML from './servicesLogging.html';
 
 let dom = {
@@ -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[]

ui/modules/operations/templates.ts

@@ -11,9 +11,9 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 import * as Utils from '../utils.js';
-import templatesHTML from './templates.html';
-import templatesByService from './piggybackTemplates.json';
 import * as Piggyback from './piggyback.js';
+import templatesByService from './piggybackTemplates.json';
+import templatesHTML from './templates.html';
 
 const dom = {
     templateServiceSelector: null,
@@ -88,9 +88,9 @@ function onTemplateSelected() {
     if (selectedTemplate) {
         let templateBody = buildPiggybackCommand(selectedTemplate.targetActorSelection,
             selectedTemplate.headers, selectedTemplate.command);
-        dom.commandPreview.innerHTML = Utils.stringifyPretty(templateBody);
+        dom.commandPreview.textContent = Utils.stringifyPretty(templateBody);
     } else {
-        dom.commandPreview.innerHTML = "";
+        dom.commandPreview.textContent = '';
     }
 }
 

ui/modules/policies/policies.ts

@@ -111,7 +111,7 @@ function onThingChanged(thing) {
 }
 
 function refreshWhoAmI() {
-  dom.tbodyWhoami.innerHTML = '';
+  dom.tbodyWhoami.textContent = '';
   API.callDittoREST('GET', '/whoami')
       .then((whoamiResult) => {
         whoamiResult.subjects.forEach((subject) => {
@@ -166,7 +166,7 @@ export function updateRecentPolicies(policyId: String) {
 
 function onEnvironmentChanged(modifiedField: String) {
   Environments.current()['recentPolicyIds'] = Environments.current()['recentPolicyIds'] || [];
-  dom.tbodyRecentPolicies.innerHTML = '';
+  dom.tbodyRecentPolicies.textContent = '';
   Environments.current().recentPolicyIds.forEach(entry => {
     Utils.addTableRow(dom.tbodyRecentPolicies, entry, thePolicy && thePolicy.policyId === entry, entry);
   });

ui/modules/policies/policiesEntries.ts

@@ -11,10 +11,10 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 
-import * as Utils from '../utils.js';
 import * as API from '../api.js';
-import { Observable } from '../utils/observable.js';
+import * as Utils from '../utils.js';
 import { CrudOperation, CrudToolbar } from '../utils/crudToolbar.js';
+import { Observable } from '../utils/observable.js';
 import * as Policies from './policies.js';
 
 export let observable = Observable();
@@ -101,7 +101,7 @@ function putOrDeletePolicyEntry(entry, value, onSuccess) {
 };
 
 function onPolicyChanged(policy: Policies.Policy) {
-  dom.tbodyPolicyEntries.innerHTML = '';
+  dom.tbodyPolicyEntries.textContent = '';
   dom.crudEntry.idValue = null;
   dom.crudEntry.editDisabled = (policy === null);
 

ui/modules/policies/policiesImports.ts

@@ -11,12 +11,10 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 
-import * as ace from 'ace-builds/src-noconflict/ace';
-import * as Utils from '../utils.js';
 import * as API from '../api.js';
-import * as Policies from './policies.js';
-import * as PolicyEntries from './policiesEntries.js';
+import * as Utils from '../utils.js';
 import { CrudOperation, CrudToolbar } from '../utils/crudToolbar.js';
+import * as Policies from './policies.js';
 
 
 let selectedImport: string;
@@ -111,7 +109,7 @@ function setExplicitCheckboxesDisabledState(disabled: boolean) {
 }
 
 function onPolicyChanged(policy: Policies.Policy) {
-  dom.tbodyPolicyImports.innerHTML = '';
+  dom.tbodyPolicyImports.textContent = '';
   dom.crudImport.idValue = null;
   dom.crudImport.editDisabled = (policy === null);
 
@@ -145,7 +143,7 @@ function onPolicyChanged(policy: Policies.Policy) {
 async function setImport(importedPolicyId: string) {
 
   dom.crudImport.idValue = importedPolicyId;
-  dom.tbodyPolicyImportEntries.innerHTML = '';
+  dom.tbodyPolicyImportEntries.textContent = '';
 
   if (importedPolicyId) {
     const importedPolicy: Policies.Policy = await API.callDittoREST('GET', '/policies/' + importedPolicyId)

ui/modules/policies/policiesResources.ts

@@ -12,12 +12,12 @@
  */
 
 import * as ace from 'ace-builds/src-noconflict/ace';
-import * as Utils from '../utils.js';
 import * as API from '../api.js';
+import * as Utils from '../utils.js';
+import { CrudOperation, CrudToolbar } from '../utils/crudToolbar.js';
 import * as Policies from './policies.js';
 import * as PolicyEntries from './policiesEntries.js';
 import resourceTemplates from './resourceTemplates.json';
-import { CrudOperation, CrudToolbar } from '../utils/crudToolbar.js';
 
 let selectedResource: string;
 
@@ -138,7 +138,7 @@ function onEditToggleResource(event: CustomEvent) {
 function onEntryChanged(entryLabel: string) {
   selectedResource = null;
 
-  dom.tbodyPolicyResources.innerHTML = '';
+  dom.tbodyPolicyResources.textContent = '';
   dom.crudResource.idValue = null;
   resourceEditor.setValue('');
   dom.crudResource.editDisabled = (entryLabel === null);

ui/modules/policies/policiesSubjects.ts

@@ -12,11 +12,11 @@
  */
 
 import * as ace from 'ace-builds/src-noconflict/ace';
-import * as Utils from '../utils.js';
 import * as API from '../api.js';
+import * as Utils from '../utils.js';
+import { CrudOperation, CrudToolbar } from '../utils/crudToolbar.js';
 import * as Policies from './policies.js';
 import * as PolicyEntries from './policiesEntries.js';
-import { CrudOperation, CrudToolbar } from '../utils/crudToolbar.js';
 
 
 let selectedSubject: string;
@@ -121,7 +121,7 @@ function onEditToggleSubject(event: CustomEvent) {
 function onEntryChanged(entryLabel: string) {
   selectedSubject = null;
 
-  dom.tbodyPolicySubjects.innerHTML = '';
+  dom.tbodyPolicySubjects.textContent = '';
   dom.crudSubject.idValue = null;
   dom.crudSubject.editDisabled = (entryLabel === null);
   subjectEditor.setValue('');

ui/modules/things/attributes.ts

@@ -120,7 +120,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) {

ui/modules/things/featureMessages.ts

@@ -163,12 +163,12 @@ function clearAllFields() {
   dom.inputMessageTimeout.value = '10';
   acePayload.setValue('');
   aceResponse.setValue('');
-  dom.ulMessageTemplates.innerHTML = '';
+  dom.ulMessageTemplates.textContent = '';
   dom.buttonMessageSend.disabled = !theFeatureId || theFeatureId === '';
 }
 
 function refillTemplates() {
-  dom.ulMessageTemplates.innerHTML = '';
+  dom.ulMessageTemplates.textContent = '';
   Utils.addDropDownEntry(dom.ulMessageTemplates, 'Saved message templates', true);
   if (theFeatureId && Environments.current().messageTemplates[theFeatureId]) {
     Utils.addDropDownEntries(

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) {

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, false, 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');

ui/modules/things/messagesIncoming.ts

@@ -113,7 +113,7 @@ function onResetMessagesClick() {
   messages = [];
   filteredMessages = [];
   dom.badgeMessageIncomingCount.textContent = '';
-  dom.tbodyMessagesIncoming.innerHTML = '';
+  dom.tbodyMessagesIncoming.textContent = '';
   messageDetail.setValue('');
 }
 
@@ -188,7 +188,7 @@ function createFilterOptions(thing?: any): [Term?] {
 }
 
 function onMessageFilterChange(event: CustomEvent) {
-  dom.tbodyMessagesIncoming.innerHTML = '';
+  dom.tbodyMessagesIncoming.textContent = '';
   filteredMessages = dom.tableFilterMessagesIncoming.filterItems(messages);
   filteredMessages.forEach((entry) => addTableRow(entry));
   Utils.updateCounterBadge(dom.badgeMessageIncomingCount, messages, filteredMessages);