Fix character escapes in combobox options

Author: vidartf

packages/controls/src/widget_string.ts

@@ -531,10 +531,13 @@ export class ComboboxView extends TextView {
     this.isInitialRender = false;
 
     const opts = this.model.get('options') as string[];
-    const optLines = opts.map(o => {
-      return `<option value="${o}"></option>`;
-    });
-    this.datalist.innerHTML = optLines.join('\n');
+    const optionFragment = document.createDocumentFragment();
+    for (const v of opts) {
+      const o = document.createElement('option');
+      o.value = v;
+      optionFragment.appendChild(o);
+    }
+    this.datalist.appendChild(optionFragment);
   }
 
   isValid(value: string): boolean {

packages/controls/test/src/widget_string_test.ts

@@ -66,4 +66,27 @@ describe('ComboboxView', function() {
       view.textbox.classList.contains('jpwidgets-invalidComboValue')
     ).to.equal(true);
   });
+
+  it('escapes characters in options', function() {
+    const input = [
+      'foo"',
+      '"><script>alert("foo")</script><a "',
+      '" onmouseover=alert(1) "'
+    ];
+    this.model.set({
+      value: 'ABC',
+      options: input,
+      ensure_option: true
+    });
+    const options = { model: this.model };
+    const view = new widgets.ComboboxView(options);
+    view.render();
+    expect(view.datalist!.children.length).to.equal(3);
+    for (let i = 0; i < view.datalist!.children.length; ++i) {
+      const el = view.datalist!.children[i];
+      expect(el.tagName.toLowerCase()).to.equal('option');
+      expect(el.getAttributeNames()).to.eqls(['value']);
+      expect(el.getAttribute('value')).to.equal(input[i]);
+    }
+  });
 });