Merge branch 'droplab-templating-xss-fix' into 'master'

droplab templating xss fix

See merge request !2085

app/assets/javascripts/droplab/constants.js

@@ -3,11 +3,14 @@ const DATA_DROPDOWN = 'data-dropdown';
 const SELECTED_CLASS = 'droplab-item-selected';
 const ACTIVE_CLASS = 'droplab-item-active';
 const IGNORE_CLASS = 'droplab-item-ignore';
+// Matches `{{anything}}` and `{{ everything }}`.
+const TEMPLATE_REGEX = /\{\{(.+?)\}\}/g;
 
 export {
   DATA_TRIGGER,
   DATA_DROPDOWN,
   SELECTED_CLASS,
   ACTIVE_CLASS,
+  TEMPLATE_REGEX,
   IGNORE_CLASS,
 };

app/assets/javascripts/droplab/drop_down.js

@@ -94,7 +94,7 @@ Object.assign(DropDown.prototype, {
   },
 
   renderChildren: function(data) {
-    var html = utils.t(this.templateString, data);
+    var html = utils.template(this.templateString, data);
     var template = document.createElement('div');
 
     template.innerHTML = html;

app/assets/javascripts/droplab/utils.js

 /* eslint-disable */
 
-import { DATA_TRIGGER, DATA_DROPDOWN } from './constants';
+import { template as _template } from 'underscore';
+import { DATA_TRIGGER, DATA_DROPDOWN, TEMPLATE_REGEX } from './constants';
 
 const utils = {
   toCamelCase(attr) {
     return this.camelize(attr.split('-').slice(1).join(' '));
   },
 
-  t(s, d) {
-    for (const p in d) {
-      if (Object.prototype.hasOwnProperty.call(d, p)) {
-        s = s.replace(new RegExp(`{{${p}}}`, 'g'), d[p]);
-      }
-    }
-    return s;
+  template(templateString, data) {
+    const template = _template(templateString, {
+      escape: TEMPLATE_REGEX,
+    });
+
+    return template(data);
   },
 
   camelize(str) {

app/assets/javascripts/filtered_search/dropdown_hint.js

@@ -62,7 +62,7 @@ class DropdownHint extends gl.FilteredSearchDropdown {
           Object.assign({
             icon: `fa-${icon}`,
             hint,
-            tag: `<${tag}>`,
+            tag: `<${tag}>`,
           }, type && { type }),
         );
       }

spec/javascripts/droplab/constants_spec.js

@@ -27,6 +27,12 @@ describe('constants', function () {
     });
   });
 
+  describe('TEMPLATE_REGEX', function () {
+    it('should be a handlebars templating syntax regex', function() {
+      expect(constants.TEMPLATE_REGEX).toEqual(/\{\{(.+?)\}\}/g);
+    });
+  });
+
   describe('IGNORE_CLASS', function () {
     it('should be `droplab-item-ignore`', function() {
       expect(constants.IGNORE_CLASS).toBe('droplab-item-ignore');

spec/javascripts/droplab/drop_down_spec.js

@@ -451,7 +451,7 @@ describe('DropDown', function () {
       this.html = 'html';
       this.template = { firstChild: { outerHTML: 'outerHTML', style: {} } };
 
-      spyOn(utils, 't').and.returnValue(this.html);
+      spyOn(utils, 'template').and.returnValue(this.html);
       spyOn(document, 'createElement').and.returnValue(this.template);
       spyOn(this.dropdown, 'setImagesSrc');
 
@@ -459,7 +459,7 @@ describe('DropDown', function () {
     });
 
     it('should call utils.t with .templateString and data', function () {
-      expect(utils.t).toHaveBeenCalledWith(this.templateString, this.data);
+      expect(utils.template).toHaveBeenCalledWith(this.templateString, this.data);
     });
 
     it('should call document.createElement', function () {