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