Fio 7544 html sanitization issue (#5559)

* FIO-7544: Fixes an issue where scripts inside HTML component will be executed during interpolation

* Refactoring

* Added test for interpolation in HTML component

src/components/html/HTML.js

@@ -45,13 +45,15 @@ export default class HTMLComponent extends Component {
     }
 
     const submission = _.get(this.root, 'submission', {});
-    const content = this.component.content ? this.interpolate(this.component.content, {
-      metadata: submission.metadata || {},
-      submission: submission,
-      data: this.rootValue,
-      row: this.data
+    const content = this.component.content ? this.interpolate(
+      this.sanitize(this.component.content, this.shouldSanitizeValue),
+      {
+        metadata: submission.metadata || {},
+        submission: submission,
+        data: this.rootValue,
+        row: this.data
     }) : '';
-    return this.sanitize(content, this.shouldSanitizeValue);
+    return content;
   }
 
   get singleTags() {

src/components/html/HTML.unit.js

@@ -1,11 +1,13 @@
+import Webform from '../../Webform';
 import Harness from '../../../test/harness';
 import HTMLComponent from './HTML';
 import sinon from 'sinon';
 import assert from 'power-assert';
 
 import {
   comp1,
-  comp2
+  comp2,
+  comp3,
 } from './fixtures';
 
 describe('HTML Component', () => {
@@ -30,4 +32,30 @@ describe('HTML Component', () => {
       assert.equal(emit.callCount, 0);
     });
   });
+
+  it('Should not execute scripts inside HTML component, but execute interpolation properly', (done) => {
+    const formElement = document.createElement('div');
+    const form = new Webform(formElement);
+
+    const alert = sinon.spy(window, 'alert');
+    form.setForm(comp3).then(() => {
+      setTimeout(() => {
+        assert.equal(alert.callCount, 0);
+        const div = form.element.querySelector('.myClass');
+        assert.equal(div.innerHTML.trim(), 'No Text');
+
+        const textField = form.getComponent(['textField']);
+        textField.setValue('apple', { modified: true });
+
+        setTimeout(() => {
+          const div = form.element.querySelector('.myClass');
+
+          assert.equal(div.innerHTML.trim(), 'apple');
+          assert.equal(div.className, 'myClass apple-class');
+          done();
+        }, 400);
+      }, 200);
+    })
+      .catch(done);
+  });
 });

src/components/html/fixtures/comp3.js

@@ -0,0 +1,38 @@
+export default {
+  type: 'form',
+  display: 'form',
+  components: [
+    {
+      label: 'Text Field',
+      applyMaskOn: 'change',
+      tableView: true,
+      key: 'textField',
+      type: 'textfield',
+      input: true,
+    },
+    {
+      label: 'HTML',
+      attrs: [
+        {
+          attr: '',
+          value: '',
+        },
+      ],
+      content: '<img src=1 onerror=alert("htmlContent")>\n<div class="myClass {{data.textField + \'-class\'}}">{{' +
+        ' data.textField ? data.textField : \'No Text\'}}</div>',
+      refreshOnChange: true,
+      key: 'html',
+      type: 'htmlelement',
+      input: false,
+      tableView: false,
+    },
+    {
+      type: 'button',
+      label: 'Submit',
+      key: 'submit',
+      disableOnInvalid: true,
+      input: true,
+      tableView: false,
+    },
+  ],
+};

src/components/html/fixtures/index.js

@@ -1,3 +1,4 @@
 import comp1 from './comp1';
 import comp2 from './comp2';
-export { comp1, comp2 };
+import comp3 from './comp3';
+export { comp1, comp2, comp3 };