Group popup menu items

lib/features/context-pad/ContextPad.js

@@ -19,6 +19,10 @@ import {
 
 import { getBBox } from '../../util/Elements';
 
+import {
+  escapeCSS
+} from '../../util/EscapeUtil';
+
 var entrySelector = '.entry';
 
 var DEFAULT_PRIORITY = 1000;
@@ -281,9 +285,11 @@ ContextPad.prototype._updateAndOpen = function(target) {
 
     domAttr(control, 'data-action', id);
 
-    container = domQuery('[data-group=' + grouping + ']', html);
+    container = domQuery('[data-group=' + escapeCSS(grouping) + ']', html);
     if (!container) {
-      container = domify('<div class="group" data-group="' + grouping + '"></div>');
+      container = domify('<div class="group"></div>');
+      domAttr(container, 'data-group', grouping);
+
       html.appendChild(container);
     }
 
@@ -298,7 +304,8 @@ ContextPad.prototype._updateAndOpen = function(target) {
     }
 
     if (entry.imageUrl) {
-      image = domify('<img src="' + entry.imageUrl + '">');
+      image = domify('<img>');
+      domAttr(image, 'src', entry.imageUrl);
       image.style.width = '100%';
       image.style.height = '100%';
 

lib/features/palette/Palette.js

@@ -15,6 +15,9 @@ import {
   event as domEvent
 } from 'min-dom';
 
+import {
+  escapeCSS
+} from '../../util/EscapeUtil';
 
 var TOGGLE_SELECTOR = '.djs-palette-toggle',
     ENTRY_SELECTOR = '.entry',
@@ -233,9 +236,11 @@ Palette.prototype._update = function() {
 
     var grouping = entry.group || 'default';
 
-    var container = domQuery('[data-group=' + grouping + ']', entriesContainer);
+    var container = domQuery('[data-group=' + escapeCSS(grouping) + ']', entriesContainer);
     if (!container) {
-      container = domify('<div class="group" data-group="' + grouping + '"></div>');
+      container = domify('<div class="group"></div>');
+      domAttr(container, 'data-group', grouping);
+
       entriesContainer.appendChild(container);
     }
 
@@ -260,7 +265,10 @@ Palette.prototype._update = function() {
       }
 
       if (entry.imageUrl) {
-        control.appendChild(domify('<img src="' + entry.imageUrl + '">'));
+        var image = domify('<img>');
+        domAttr(image, 'src', entry.imageUrl);
+
+        control.appendChild(image);
       }
     }
   });

lib/features/popup-menu/PopupMenu.js

@@ -13,9 +13,14 @@ import {
   domify as domify,
   classes as domClasses,
   attr as domAttr,
+  query as domQuery,
   remove as domRemove
 } from 'min-dom';
 
+import {
+  escapeCSS
+} from '../../util/EscapeUtil';
+
 var DATA_REF = 'data-id';
 
 var CLOSE_EVENTS = [
@@ -167,7 +172,7 @@ PopupMenu.prototype.open = function(element, id, position) {
 
   current.entries = assign({}, entries, headerEntries);
 
-  current.container = this._createContainer();
+  current.container = this._createContainer(id);
 
   if (size(headerEntries)) {
     current.container.appendChild(
@@ -353,7 +358,7 @@ PopupMenu.prototype._emit = function(eventName) {
  *
  * @return {Object} a DOM container
  */
-PopupMenu.prototype._createContainer = function() {
+PopupMenu.prototype._createContainer = function(id) {
   var container = domify('<div class="djs-popup">'),
       position = this._current.position,
       className = this._current.className;
@@ -367,6 +372,8 @@ PopupMenu.prototype._createContainer = function() {
 
   domClasses(container).add(className);
 
+  domAttr(container, 'data-popup', id);
+
   return container;
 };
 
@@ -501,8 +508,18 @@ PopupMenu.prototype._createEntries = function(entries, className) {
   domClasses(entriesContainer).add(className);
 
   forEach(entries, function(entry, id) {
-    var entryContainer = self._createEntry(entry, id);
-    entriesContainer.appendChild(entryContainer);
+    var entryContainer = self._createEntry(entry, id),
+        grouping = entry.group || 'default',
+        groupContainer = domQuery('[data-group=' + escapeCSS(grouping) + ']', entriesContainer);
+
+    if (!groupContainer) {
+      groupContainer = domify('<div class="group"></div>');
+      domAttr(groupContainer, 'data-group', grouping);
+
+      entriesContainer.appendChild(groupContainer);
+    }
+
+    groupContainer.appendChild(entryContainer);
   });
 
   return entriesContainer;
@@ -538,7 +555,10 @@ PopupMenu.prototype._createEntry = function(entry, id) {
   }
 
   if (entry.imageUrl) {
-    entryContainer.appendChild(domify('<img src="' + entry.imageUrl + '" />'));
+    var image = domify('<img>');
+    domAttr(image, 'src', entry.imageUrl);
+
+    entryContainer.appendChild(image);
   }
 
   if (entry.active === true) {

test/spec/features/context-pad/ContextPadSpec.js

@@ -952,7 +952,7 @@ describe('features/context-pad', function() {
   });
 
 
-  describe('icons size', function() {
+  describe('icons', function() {
 
     beforeEach(bootstrapDiagram({
       modules: [
@@ -962,6 +962,34 @@ describe('features/context-pad', function() {
     }));
 
 
+    it('should NOT allow XSS via imageUrl', inject(function(canvas, contextPad) {
+
+      // given
+      var shape = { id: 's1', type: 'bigImage', width: 100, height: 100, x: 10, y: 10 };
+
+      canvas.addShape(shape);
+      contextPad.registerProvider({
+        getContextPadEntries: function() {
+          return {
+            entry: {
+              imageUrl: '"><marquee />'
+            }
+          };
+        }
+      });
+
+      // when
+      contextPad.open(shape);
+
+      // then
+      var pad = contextPad.getPad(shape),
+          padContainer = pad.html,
+          injected = domQuery('marquee', padContainer);
+
+      expect(injected).not.to.exist;
+    }));
+
+
     it('should limit image size', function(done) {
 
       function verify(entry, image) {
@@ -1012,4 +1040,41 @@ describe('features/context-pad', function() {
     });
   });
 
+
+  describe('grouping', function() {
+
+    beforeEach(bootstrapDiagram({
+      modules: [
+        contextPadModule
+      ]
+    }));
+
+
+    it('should NOT allow XSS via group', inject(function(canvas, contextPad) {
+
+      // given
+      var shape = { id: 's1', type: 'bigImage', width: 100, height: 100, x: 10, y: 10 };
+
+      canvas.addShape(shape);
+      contextPad.registerProvider({
+        getContextPadEntries: function() {
+          return {
+            entry: {
+              group: '"><marquee />'
+            }
+          };
+        }
+      });
+
+      // when
+      contextPad.open(shape);
+
+      // then
+      var pad = contextPad.getPad(shape),
+          padContainer = pad.html,
+          injected = domQuery('marquee', padContainer);
+
+      expect(injected).not.to.exist;
+    }));
+  });
 });

test/spec/features/palette/PaletteSpec.js

@@ -643,6 +643,51 @@ describe('features/palette', function() {
 
   });
 
+
+  describe('DOM injection', function() {
+
+    beforeEach(bootstrapDiagram({
+      modules: [ paletteModule ]
+    }));
+
+
+    it('should NOT allow XSS via group name', inject(function(canvas, palette) {
+
+      // given
+      var entries = {
+        'entryA': {
+          group: '"><marquee />'
+        }
+      };
+
+      // when
+      palette.registerProvider(new Provider(entries));
+
+      // then
+      var injected = domQuery('marquee', canvas.getContainer());
+      expect(injected).not.to.exist;
+    }));
+
+
+    it('should NOT allow XSS via imageUrl', inject(function(canvas, palette) {
+
+      // given
+      var entries = {
+        'entryA': {
+          imageUrl: '"><marquee />'
+        }
+      };
+
+      // when
+      palette.registerProvider(new Provider(entries));
+
+      // then
+      var injected = domQuery('marquee', canvas.getContainer());
+      expect(injected).not.to.exist;
+    }));
+
+  });
+
 });