From 873a8e5ad7a7e2960c39a3ecc257a504abaa25f5 Mon Sep 17 00:00:00 2001 From: Thomas Baumgartner Date: Fri, 11 Oct 2024 11:44:46 +0200 Subject: [PATCH 1/2] use innerText instead of innerHTML for setting an option's text --- src/slim-select/select.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/slim-select/select.ts b/src/slim-select/select.ts index cd8ed854..7cc32a5f 100644 --- a/src/slim-select/select.ts +++ b/src/slim-select/select.ts @@ -374,7 +374,7 @@ export default class Select { const optionEl = document.createElement('option') optionEl.id = info.id optionEl.value = info.value - optionEl.innerHTML = info.text + optionEl.innerText = info.text if (info.html !== '') { optionEl.setAttribute('data-html', info.html) } From a1d18467645767bd0238bd3fb68659875687b43e Mon Sep 17 00:00:00 2001 From: Thomas Baumgartner Date: Fri, 11 Oct 2024 14:10:12 +0200 Subject: [PATCH 2/2] [FIX] use option.textContent instead of option.innerText add test --- src/slim-select/select.ts | 2 +- src/slim-select/settings.test.ts | 15 +++++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/src/slim-select/select.ts b/src/slim-select/select.ts index 7cc32a5f..09d34c49 100644 --- a/src/slim-select/select.ts +++ b/src/slim-select/select.ts @@ -374,7 +374,7 @@ export default class Select { const optionEl = document.createElement('option') optionEl.id = info.id optionEl.value = info.value - optionEl.innerText = info.text + optionEl.textContent = info.text if (info.html !== '') { optionEl.setAttribute('data-html', info.html) } diff --git a/src/slim-select/settings.test.ts b/src/slim-select/settings.test.ts index f9e724a6..bd33eabf 100644 --- a/src/slim-select/settings.test.ts +++ b/src/slim-select/settings.test.ts @@ -195,6 +195,21 @@ describe('Settings module', () => { expect(optionElement.dataset.html).toBe(option.html) }) + test('malicious text is inserted with innerText', () => { + // decoded text: + const str = '<img src=x onerror=alert(1)></img>' + // const str = 'opt' + const decode = (string: string|null) => { + if(string === null) return '' + const doc = new DOMParser().parseFromString(string, "text/html") + return doc.documentElement.textContent; + } + const option = new Option({ text: str }) + const optionElement = select.createOption(option) + // expect(decode(optionElement.textContent)).toBe('opt') + expect(optionElement.textContent).toBe(str) + }) + test('disabled sets disabled property correctly', () => { const option = new Option({ text: 'opt', disabled: true }) const optionElement = select.createOption(option)