fix(process-variables): prevent using variable names as identifier

* We used the variable name as identifier for the items inside the process variable overview * These can include unescaped content --> Prevent this by using generic ids + escape variable name whenever used Related to camunda/camunda-modeler#2031
bpmn-io · Dec 15, 2020 · 1a0e4d2 · 1a0e4d2
1 parent 4fd5a37
commit 1a0e4d2
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 12 deletions.
diff --git a/lib/provider/camunda/parts/implementation/ProcessVariables.js b/lib/provider/camunda/parts/implementation/ProcessVariables.js
@@ -11,6 +11,8 @@ var getBusinessObject = require('bpmn-js/lib/util/ModelUtil').getBusinessObject,
     is = require('bpmn-js/lib/util/ModelUtil').is,
     isAny = require('bpmn-js/lib/features/modeling/util/ModelingUtil').isAny;
 
+var escapeHTML = require('../../../../Utils').escapeHTML;
+
 var factory = require('../../../../factory/EntryFactory');
 
 var entryFieldDescription = require('../../../../factory/EntryFieldDescription');
@@ -23,7 +25,7 @@ module.exports = function(element, translate) {
   function createVariablesList(variables, scope) {
     var scopePrefix = scope ? scope + '-' : '';
 
-    return flatten(map(variables, function(variable) {
+    return flatten(map(variables, function(variable, idx) {
 
       var name = variable.name,
           origin = variable.origin,
@@ -32,13 +34,13 @@ module.exports = function(element, translate) {
       // title ///////////////////
 
       var collapsible = factory.collapsible({
-        id: scopePrefix + name + '-collapsible',
-        title: name,
+        id: scopePrefix + 'variable- ' + idx + '-collapsible',
+        title: escapeHTML(name),
         description: origin.toString(),
         open: false,
         get: function() {
           return {
-            title: name,
+            title: escapeHTML(name),
             description: origin.toString()
           };
         }
@@ -51,12 +53,12 @@ module.exports = function(element, translate) {
       // created in //////////////////
 
       var createdInHtml = '<div data-show="show">' +
-        '<b>' + translate('Created in') + '</b>' +
+        '<b>' + escapeHTML(translate('Created in')) + '</b>' +
         createdInList(origin) +
       '</div>';
 
       variableEntries.push({
-        id: scopePrefix + name + '-created-in',
+        id: scopePrefix + 'variable- ' + idx + '-created-in',
         html: createdInHtml,
         cssClasses: [
           'bpp-process-variables',
@@ -119,7 +121,7 @@ module.exports = function(element, translate) {
 
       entries.push({
         id: scope + '-scope-title',
-        html: '<div>' + translate('Scope: ') + scope + '</div>',
+        html: '<div>' + escapeHTML(translate('Scope: ')) + scope + '</div>',
         cssClasses: [
           'bpp-process-variables',
           'bpp-process-variables__scope-title',

diff --git a/test/spec/provider/camunda/ProcessVariablesSpec.js b/test/spec/provider/camunda/ProcessVariablesSpec.js
@@ -120,7 +120,7 @@ describe('process-variables', function() {
       // when
       selectProcessVariable(container, 0);
 
-      var createdInNode = getCreatedIn(container, 'variable1'),
+      var createdInNode = getCreatedIn(container, 0),
           originItem = domQuery('.bpp-process-variables__created-in-item', createdInNode);
 
       // then
@@ -191,7 +191,7 @@ describe('process-variables', function() {
       // when
       selectProcessVariable(container, 0);
 
-      var createdInNode = getCreatedIn(container, 'SubProcess_1-variable3'),
+      var createdInNode = getCreatedIn(container, 0, 'SubProcess_1-'),
           originItem = domQuery('.bpp-process-variables__created-in-item', createdInNode);
 
       // then
@@ -250,7 +250,7 @@ describe('process-variables', function() {
       // when
       selectProcessVariable(container, 0);
 
-      var createdInNode = getCreatedIn(container, 'variable1'),
+      var createdInNode = getCreatedIn(container, 0),
           originItem = domQuery('.bpp-process-variables__created-in-item', createdInNode);
 
       // then
@@ -262,6 +262,7 @@ describe('process-variables', function() {
 
   });
 
+
 });
 
 
@@ -295,9 +296,13 @@ function selectProcessVariable(container, idx) {
   TestHelper.triggerEvent(item.firstChild, 'click');
 }
 
-function getCreatedIn(container, prefix) {
+function getCreatedIn(container, idx, scopePrefix) {
+  if (!scopePrefix) {
+    scopePrefix = '';
+  }
+
   var group = getProcessVariablesGroup(container);
-  return domQuery('div[data-entry="' + prefix +'-created-in"]', group);
+  return domQuery('div[data-entry="' + scopePrefix + 'variable- ' + idx + '-created-in"]', group);
 }
 
 function getScopeHeaders(container) {