HTML-encode user input for activity body displays

src/designer/elsa-workflows-studio/src/plugins/activity-icon-provider-plugin.tsx

@@ -1,8 +1,6 @@
-import {ElsaPlugin} from "../services/elsa-plugin";
-import {eventBus} from '../services/event-bus';
+import {eventBus, activityIconProvider, ElsaPlugin} from "../services";
 import {ActivityDescriptorDisplayContext, ActivityDesignDisplayContext, EventTypes} from "../models";
 import {h} from "@stencil/core";
-import { activityIconProvider} from "../services/activity-icon-provider";
 
 export class ActivityIconProviderPlugin implements ElsaPlugin {
   constructor() {

src/designer/elsa-workflows-studio/src/plugins/cron-plugin.tsx

@@ -1,7 +1,7 @@
-import {ElsaPlugin} from "../services/elsa-plugin";
-import {eventBus} from '../services/event-bus';
+import {eventBus, ElsaPlugin} from "../services";
 import {ActivityDesignDisplayContext, EventTypes} from "../models";
 import {h} from "@stencil/core";
+import {htmlEncode} from "../utils/utils";
 
 export class CronPlugin implements ElsaPlugin {
   constructor() {
@@ -16,7 +16,7 @@ export class CronPlugin implements ElsaPlugin {
 
     const props = activityModel.properties || [];
     const condition = props.find(x => x.name == 'CronExpression') || { name: 'CronExpression', expressions: {'Literal': ''}, syntax: 'Literal'};
-    const expression = condition.expressions[condition.syntax] || '';
+    const expression = htmlEncode(condition.expressions[condition.syntax] || '');
     context.bodyDisplay = `<p>${expression}</p>`;
   }
 }

src/designer/elsa-workflows-studio/src/plugins/http-endpoint-plugin.tsx

@@ -1,6 +1,7 @@
 import {eventBus, ElsaPlugin} from "../services";
 import {ActivityDesignDisplayContext, EventTypes, SyntaxNames} from "../models";
 import {h} from "@stencil/core";
+import {htmlEncode} from "../utils/utils";
 
 export class HttpEndpointPlugin implements ElsaPlugin {
   constructor() {
@@ -16,6 +17,7 @@ export class HttpEndpointPlugin implements ElsaPlugin {
     const props = activityModel.properties || [];
     const path = props.find(x => x.name == 'Path') || { name: 'Path', expressions: { 'Literal': '', syntax: SyntaxNames.Literal } };
     const syntax = path.syntax || SyntaxNames.Literal;
-    context.bodyDisplay = `<p>${path.expressions[syntax]}</p>`;
+    const bodyDisplay = htmlEncode(path.expressions[syntax]);
+    context.bodyDisplay = `<p>${bodyDisplay}</p>`;
   }
 }

src/designer/elsa-workflows-studio/src/plugins/if-plugin.tsx

@@ -1,7 +1,7 @@
-import {ElsaPlugin} from "../services/elsa-plugin";
-import {eventBus} from '../services/event-bus';
+import {eventBus, ElsaPlugin} from "../services";
 import {ActivityDefinitionProperty, ActivityDesignDisplayContext, EventTypes} from "../models";
 import {h} from "@stencil/core";
+import {htmlEncode} from "../utils/utils";
 
 export class IfPlugin implements ElsaPlugin {
   constructor() {
@@ -18,7 +18,7 @@ export class IfPlugin implements ElsaPlugin {
     const condition: ActivityDefinitionProperty = props.find(x => x.name == 'Condition') || { name: 'Condition', expressions: {'Literal': ''}, syntax: 'Literal' };
     const expression = condition.expressions[condition.syntax] || '';
     const description = activityModel.description;
-    const bodyText = description && description.length > 0 ? description : expression;
+    const bodyText = htmlEncode(description && description.length > 0 ? description : expression);
     context.bodyDisplay = `<p>${bodyText}</p>`;
   }
 }

src/designer/elsa-workflows-studio/src/plugins/run-javascript-plugin.tsx

@@ -1,5 +1,4 @@
-import {ElsaPlugin} from "../services/elsa-plugin";
-import {eventBus} from '../services/event-bus';
+import {eventBus, ElsaPlugin} from "../services";
 import {ActivityDesignDisplayContext, EventTypes, SyntaxNames} from "../models";
 import {h} from "@stencil/core";
 import {parseJson} from "../utils/utils";

src/designer/elsa-workflows-studio/src/plugins/run-workflow-plugin.tsx

@@ -1,5 +1,4 @@
-import {ElsaPlugin} from "../services/elsa-plugin";
-import {eventBus} from '../services/event-bus';
+import {eventBus, ElsaPlugin} from "../services";
 import {ActivityDesignDisplayContext, EventTypes, SyntaxNames} from "../models";
 import {h} from "@stencil/core";
 import {parseJson} from "../utils/utils";

src/designer/elsa-workflows-studio/src/plugins/send-email-plugin.tsx

@@ -1,7 +1,7 @@
-import {ElsaPlugin} from "../services/elsa-plugin";
-import {eventBus} from '../services/event-bus';
+import {eventBus, ElsaPlugin} from "../services";
 import {ActivityDesignDisplayContext, EventTypes, SyntaxNames} from "../models";
 import {h} from "@stencil/core";
+import {htmlEncode} from "../utils/utils";
 
 export class SendEmailPlugin implements ElsaPlugin {
   constructor() {
@@ -18,7 +18,7 @@ export class SendEmailPlugin implements ElsaPlugin {
     const to = props.find(x => x.name == 'To') || {expressions: {'Json': ''}, syntax: SyntaxNames.Json};
     const expression = to.expressions[to.syntax || SyntaxNames.Json] || '';
     const description = activityModel.description;
-    const bodyText = description && description.length > 0 ? description : expression;
+    const bodyText = htmlEncode(description && description.length > 0 ? description : expression);
     context.bodyDisplay = `<p>To: ${bodyText}</p>`;
   }
 }

src/designer/elsa-workflows-studio/src/plugins/send-http-request-plugin.tsx

@@ -1,5 +1,4 @@
-import {ElsaPlugin} from "../services/elsa-plugin";
-import {eventBus} from '../services/event-bus';
+import {eventBus, ElsaPlugin} from "../services";
 import {ActivityDesignDisplayContext, EventTypes, SyntaxNames} from "../models";
 import {h} from "@stencil/core";
 import {parseJson} from "../utils/utils";

src/designer/elsa-workflows-studio/src/plugins/send-signal-plugin.tsx

@@ -1,7 +1,7 @@
-import {ElsaPlugin} from "../services/elsa-plugin";
-import {eventBus} from '../services/event-bus';
+import {eventBus, ElsaPlugin} from "../services";
 import {ActivityDesignDisplayContext, EventTypes, SyntaxNames} from "../models";
 import {h} from "@stencil/core";
+import {htmlEncode} from "../utils/utils";
 
 export class SendSignalPlugin implements ElsaPlugin {
   constructor() {
@@ -17,6 +17,7 @@ export class SendSignalPlugin implements ElsaPlugin {
     const props = activityModel.properties || [];
     const signalName = props.find(x => x.name == 'Signal') || { name: 'Signal', expressions: { 'Literal': '', syntax: SyntaxNames.Literal } };
     const syntax = signalName.syntax || SyntaxNames.Literal;
-    context.bodyDisplay = `<p>${signalName.expressions[syntax]}</p>`;
+    const bodyDisplay = htmlEncode(signalName.expressions[syntax]);
+    context.bodyDisplay = `<p>${bodyDisplay}</p>`;
   }
 }

src/designer/elsa-workflows-studio/src/plugins/signal-received-plugin.tsx

@@ -1,7 +1,7 @@
-import {ElsaPlugin} from "../services/elsa-plugin";
-import {eventBus} from '../services/event-bus';
+import {eventBus, ElsaPlugin} from "../services";
 import {ActivityDesignDisplayContext, EventTypes, SyntaxNames} from "../models";
 import {h} from "@stencil/core";
+import {htmlEncode} from "../utils/utils";
 
 export class SignalReceivedPlugin implements ElsaPlugin {
   constructor() {
@@ -17,6 +17,7 @@ export class SignalReceivedPlugin implements ElsaPlugin {
     const props = activityModel.properties || [];
     const signalName = props.find(x => x.name == 'Signal') || { name: 'Signal', expressions: { 'Literal': '', syntax: SyntaxNames.Literal } };
     const syntax = signalName.syntax || SyntaxNames.Literal;
-    context.bodyDisplay = `<p>${signalName.expressions[syntax]}</p>`;
+    const bodyDisplay = htmlEncode(signalName.expressions[syntax]);
+    context.bodyDisplay = `<p>${bodyDisplay}</p>`;
   }
 }

src/designer/elsa-workflows-studio/src/plugins/start-at-plugin.tsx

@@ -1,7 +1,7 @@
-import {ElsaPlugin} from "../services/elsa-plugin";
-import {eventBus} from '../services/event-bus';
+import {eventBus, ElsaPlugin} from "../services";
 import {ActivityDesignDisplayContext, EventTypes} from "../models";
 import {h} from "@stencil/core";
+import {htmlEncode} from "../utils/utils";
 
 export class StartAtPlugin implements ElsaPlugin {
   constructor() {
@@ -16,7 +16,7 @@ export class StartAtPlugin implements ElsaPlugin {
 
     const props = activityModel.properties || [];
     const condition = props.find(x => x.name == 'Instant') || { name: 'Instant', expressions: {'Literal': ''}, syntax: 'Literal'};
-    const expression = condition.expressions[condition.syntax] || '';
+    const expression = htmlEncode(condition.expressions[condition.syntax] || '');
     context.bodyDisplay = `<p>${expression}</p>`;
   }
 }

src/designer/elsa-workflows-studio/src/plugins/state-plugin.tsx

@@ -1,8 +1,7 @@
-import {ElsaPlugin} from "../services/elsa-plugin";
-import {eventBus} from '../services/event-bus';
+import {eventBus, ElsaPlugin} from "../services";
 import {ActivityDesignDisplayContext, EventTypes, SyntaxNames} from "../models";
 import {h} from "@stencil/core";
-import {parseJson} from "../utils/utils";
+import {htmlEncode, parseJson} from "../utils/utils";
 
 export class StatePlugin implements ElsaPlugin {
   constructor() {
@@ -17,7 +16,7 @@ export class StatePlugin implements ElsaPlugin {
 
     const props = activityModel.properties || [];
     const stateNameProp = props.find(x => x.name == 'StateName') || { name: 'Text', expressions: {'Literal': ''}, syntax: SyntaxNames.Literal };
-    context.displayName = stateNameProp.expressions[stateNameProp.syntax || 'Literal'] || 'State';
+    context.displayName = htmlEncode(stateNameProp.expressions[stateNameProp.syntax || 'Literal'] || 'State');
 
     const transitionsSyntax = SyntaxNames.Json;
     const transitions = props.find(x => x.name == 'Transitions') || {expressions: {'Json': '[]'}, syntax: transitionsSyntax};

src/designer/elsa-workflows-studio/src/plugins/timer-plugin.tsx

@@ -1,7 +1,7 @@
-import {ElsaPlugin} from "../services/elsa-plugin";
-import {eventBus} from '../services/event-bus';
+import {eventBus, ElsaPlugin} from "../services";
 import {ActivityDesignDisplayContext, EventTypes} from "../models";
 import {h} from "@stencil/core";
+import {htmlEncode} from "../utils/utils";
 
 export class TimerPlugin implements ElsaPlugin {
   constructor() {
@@ -16,7 +16,7 @@ export class TimerPlugin implements ElsaPlugin {
 
     const props = activityModel.properties || [];
     const condition = props.find(x => x.name == 'Timeout') || { name: 'Timeout', expressions: {'Literal': ''}, syntax: 'Literal'};
-    const expression = condition.expressions[condition.syntax] || '';
+    const expression = htmlEncode(condition.expressions[condition.syntax] || '');
     context.bodyDisplay = `<p>${expression}</p>`;
   }
 }

src/designer/elsa-workflows-studio/src/plugins/user-task-plugin.tsx

@@ -1,5 +1,4 @@
-import {ElsaPlugin} from "../services/elsa-plugin";
-import {eventBus} from '../services/event-bus';
+import {eventBus, ElsaPlugin} from "../services";
 import {ActivityDesignDisplayContext, EventTypes, SyntaxNames} from "../models";
 import {h} from "@stencil/core";
 import {parseJson} from "../utils/utils";

src/designer/elsa-workflows-studio/src/plugins/webhook-plugin.tsx

@@ -1,7 +1,7 @@
-import {ElsaPlugin} from "../services/elsa-plugin";
-import {eventBus} from '../services/event-bus';
+import {eventBus, ElsaPlugin} from "../services";
 import {ActivityDesignDisplayContext, EventTypes, SyntaxNames} from "../models";
 import {h} from "@stencil/core";
+import {htmlEncode} from "../utils/utils";
 
 export class WebhookPlugin implements ElsaPlugin {
   constructor() {
@@ -17,6 +17,7 @@ export class WebhookPlugin implements ElsaPlugin {
     const props = activityModel.properties || [];
     const path = props.find(x => x.name == 'Path') || { name: 'Path', expressions: { 'Literal': '', syntax: SyntaxNames.Literal } };
     const syntax = path.syntax || SyntaxNames.Literal;
-    context.bodyDisplay = `<p>${path.expressions[syntax]}</p>`;
+    const bodyDisplay = htmlEncode(path.expressions[syntax]);
+    context.bodyDisplay = `<p>${bodyDisplay}</p>`;
   }
 }

src/designer/elsa-workflows-studio/src/plugins/while-plugin.tsx

@@ -1,7 +1,7 @@
-import {ElsaPlugin} from "../services/elsa-plugin";
-import {eventBus} from '../services/event-bus';
+import {eventBus, ElsaPlugin} from "../services";
 import {ActivityDefinitionProperty, ActivityDesignDisplayContext, EventTypes} from "../models";
 import {h} from "@stencil/core";
+import {htmlEncode} from "../utils/utils";
 
 export class WhilePlugin implements ElsaPlugin {
   constructor() {
@@ -18,7 +18,7 @@ export class WhilePlugin implements ElsaPlugin {
     const condition: ActivityDefinitionProperty = props.find(x => x.name == 'Condition') || { name: 'Condition', expressions: {'Literal': ''}, syntax: 'Literal' };
     const expression = condition.expressions[condition.syntax] || '';
     const description = activityModel.description;
-    const bodyText = description && description.length > 0 ? description : expression;
+    const bodyText = htmlEncode(description && description.length > 0 ? description : expression);
     context.bodyDisplay = `<p>${bodyText}</p>`;
   }
 }

src/designer/elsa-workflows-studio/src/plugins/write-line-plugin.tsx

@@ -1,7 +1,7 @@
-import {ElsaPlugin} from "../services/elsa-plugin";
-import {eventBus} from '../services/event-bus';
+import {eventBus, ElsaPlugin} from "../services";
 import {ActivityDesignDisplayContext, EventTypes, SyntaxNames} from "../models";
 import {h} from "@stencil/core";
+import {htmlEncode} from "../utils/utils";
 
 export class WriteLinePlugin implements ElsaPlugin {
   constructor() {
@@ -17,6 +17,6 @@ export class WriteLinePlugin implements ElsaPlugin {
     const props = activityModel.properties || [];
     const condition = props.find(x => x.name == 'Text') || { name: 'Text', expressions: {'Literal': ''}, syntax: SyntaxNames.Literal };
     const expression = condition.expressions[condition.syntax || 'Literal'] || '';
-    context.bodyDisplay = `<p>${expression}</p>`;
+    context.bodyDisplay = `<p>${htmlEncode(expression)}</p>`;
   }
 }

src/designer/elsa-workflows-studio/src/utils/utils.ts

@@ -1,6 +1,7 @@
 import {ActivityDefinition, ActivityDefinitionProperty, ActivityModel, ConnectionModel, WorkflowModel} from "../models";
 import * as collection from 'lodash/collection';
 import {Duration} from "moment";
+import {createDocument} from "@stencil/core/mock-doc";
 
 declare global {
   interface Array<T> {
@@ -190,6 +191,18 @@ export function htmlToElement(html: string): Element {
   return template.content.firstElementChild;
 }
 
+export function htmlDecode(value) {
+  const textarea = htmlToElement("<textarea/>");
+  textarea.innerHTML = value;
+  return textarea.textContent;
+}
+
+export function htmlEncode(value) {
+  const textarea = htmlToElement("<textarea/>");
+  textarea.textContent = value;
+  return textarea.innerHTML;
+}
+
 export function durationToString(duration: Duration) {
   return !!duration ? duration.asHours() > 1
     ? `${duration.asHours().toFixed(3)} h`