diff --git a/src/components/html/HTML.js b/src/components/html/HTML.js
index 9ff661a67e..08cc0cdc99 100644
--- a/src/components/html/HTML.js
+++ b/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() {
diff --git a/src/components/html/HTML.unit.js b/src/components/html/HTML.unit.js
index 1ffe31ebb1..73906c2cbd 100644
--- a/src/components/html/HTML.unit.js
+++ b/src/components/html/HTML.unit.js
@@ -1,3 +1,4 @@
+import Webform from '../../Webform';
import Harness from '../../../test/harness';
import HTMLComponent from './HTML';
import sinon from 'sinon';
@@ -5,7 +6,8 @@ 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);
+ });
});
diff --git a/src/components/html/fixtures/comp3.js b/src/components/html/fixtures/comp3.js
new file mode 100644
index 0000000000..bc9fcab428
--- /dev/null
+++ b/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: '\n