From 880d1f53fec42e6893fdab9d345a5dedd6b89181 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?us=CD=A1an=CC=B8df=CD=98rien=CD=9Cds=CD=A0?= Date: Tue, 17 Oct 2017 15:03:22 -0700 Subject: [PATCH] fix(a11y-status): escape HTML in statuses (#231) * fix(a11y-status): escape HTML in statuses * docs(contributors): add @usandfriends to contributors Because he is awesome --- .all-contributorsrc | 11 ++++++++ README.md | 5 ++-- .../__snapshots__/set-a11y-status.js.snap | 25 +++++++++++++++---- src/__tests__/set-a11y-status.js | 6 +++++ src/set-a11y-status.js | 22 +++++++++++----- 5 files changed, 56 insertions(+), 13 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 2cc8d144a..9e0875c49 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -340,6 +340,17 @@ "contributions": [ "ideas" ] + }, + { + "login": "usandfriends", + "name": "us͡an̸df͘rien͜ds͠", + "avatar_url": "https://avatars1.githubusercontent.com/u/3241922?v=4", + "profile": "http://ronak.io/", + "contributions": [ + "bug", + "code", + "test" + ] } ] } diff --git a/README.md b/README.md index a33ba4468..c7a6bcad8 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ autocomplete/dropdown/select/combobox components

[![version][version-badge]][package] [![MIT License][license-badge]][LICENSE] -[![All Contributors](https://img.shields.io/badge/all_contributors-35-orange.svg?style=flat-square)](#contributors) +[![All Contributors](https://img.shields.io/badge/all_contributors-36-orange.svg?style=flat-square)](#contributors) [![PRs Welcome][prs-badge]][prs] [![Chat][chat-badge]][chat] [![Code of Conduct][coc-badge]][coc] @@ -624,8 +624,9 @@ Thanks goes to these people ([emoji key][emojis]): | :---: | :---: | :---: | :---: | :---: | :---: | :---: | | [
Haroen Viaene](https://haroen.me)
[💡](#example-Haroenv "Examples") | [
monssef](https://github.com/rezof)
[💡](#example-rezof "Examples") | [
Federico Zivolo](https://fezvrasta.github.io)
[📖](https://github.com/paypal/downshift/commits?author=FezVrasta "Documentation") | [
Divyendu Singh](https://divyendusingh.com)
[💡](#example-divyenduz "Examples") [💻](https://github.com/paypal/downshift/commits?author=divyenduz "Code") [📖](https://github.com/paypal/downshift/commits?author=divyenduz "Documentation") [⚠️](https://github.com/paypal/downshift/commits?author=divyenduz "Tests") | [
Muhammad Salman](https://github.com/salmanmanekia)
[💻](https://github.com/paypal/downshift/commits?author=salmanmanekia "Code") | [
João Alberto](https://twitter.com/psicotropidev)
[💻](https://github.com/paypal/downshift/commits?author=psicotropicos "Code") | [
Bernard Lin](https://github.com/bernard-lin)
[💻](https://github.com/paypal/downshift/commits?author=bernard-lin "Code") [📖](https://github.com/paypal/downshift/commits?author=bernard-lin "Documentation") | | [
Geoff Davis](https://geoffdavis.info)
[💡](#example-geoffdavis92 "Examples") | [
Anup](https://github.com/reznord)
[📖](https://github.com/paypal/downshift/commits?author=reznord "Documentation") | [
Ferdinand Salis](http://ferdinandsalis.com)
[🐛](https://github.com/paypal/downshift/issues?q=author%3Aferdinandsalis "Bug reports") [💻](https://github.com/paypal/downshift/commits?author=ferdinandsalis "Code") | [
Kye Hohenberger](https://github.com/tkh44)
[🐛](https://github.com/paypal/downshift/issues?q=author%3Atkh44 "Bug reports") | [
Julien Goux](https://github.com/jgoux)
[🐛](https://github.com/paypal/downshift/issues?q=author%3Ajgoux "Bug reports") [💻](https://github.com/paypal/downshift/commits?author=jgoux "Code") [⚠️](https://github.com/paypal/downshift/commits?author=jgoux "Tests") | [
Joachim Seminck](https://github.com/jseminck)
[💻](https://github.com/paypal/downshift/commits?author=jseminck "Code") | [
Jesse Harlin](http://jesseharlin.net/)
[🐛](https://github.com/paypal/downshift/issues?q=author%3Athe-simian "Bug reports") [💡](#example-the-simian "Examples") | -| [
Matt Parrish](https://github.com/pbomb)
[🔧](#tool-pbomb "Tools") | [
thom](http://thom.kr)
[💻](https://github.com/paypal/downshift/commits?author=thomhos "Code") | [
Vu Tran](http://twitter.com/tranvu)
[💻](https://github.com/paypal/downshift/commits?author=vutran "Code") | [
Codie Mullins](https://github.com/codiemullins)
[💻](https://github.com/paypal/downshift/commits?author=codiemullins "Code") [💡](#example-codiemullins "Examples") | [
Mohammad Rajabifard](https://morajabi.me)
[📖](https://github.com/paypal/downshift/commits?author=morajabi "Documentation") [🤔](#ideas-morajabi "Ideas, Planning, & Feedback") | [
Frank Tan](https://github.com/tansongyang)
[💻](https://github.com/paypal/downshift/commits?author=tansongyang "Code") | [
Kier Borromeo](https://kierb.com)
[💡](#example-srph "Examples") | +| [
Matt Parrish](https://github.com/pbomb)
[🔧](#tool-pbomb "Tools") [👀](#review-pbomb "Reviewed Pull Requests") | [
thom](http://thom.kr)
[💻](https://github.com/paypal/downshift/commits?author=thomhos "Code") | [
Vu Tran](http://twitter.com/tranvu)
[💻](https://github.com/paypal/downshift/commits?author=vutran "Code") | [
Codie Mullins](https://github.com/codiemullins)
[💻](https://github.com/paypal/downshift/commits?author=codiemullins "Code") [💡](#example-codiemullins "Examples") | [
Mohammad Rajabifard](https://morajabi.me)
[📖](https://github.com/paypal/downshift/commits?author=morajabi "Documentation") [🤔](#ideas-morajabi "Ideas, Planning, & Feedback") | [
Frank Tan](https://github.com/tansongyang)
[💻](https://github.com/paypal/downshift/commits?author=tansongyang "Code") | [
Kier Borromeo](https://kierb.com)
[💡](#example-srph "Examples") | | [
Paul Veevers](https://github.com/paul-veevers)
[💻](https://github.com/paypal/downshift/commits?author=paul-veevers "Code") | [
Ron Cruz](https://github.com/Ronolibert)
[📖](https://github.com/paypal/downshift/commits?author=Ronolibert "Documentation") | [
Rick McGavin](http://rickmcgavin.github.io)
[📖](https://github.com/paypal/downshift/commits?author=rickMcGavin "Documentation") | [
Jelle Versele](http://twitter.com/vejersele)
[💡](#example-vejersele "Examples") | [
Brent Ertz](https://github.com/brentertz)
[🤔](#ideas-brentertz "Ideas, Planning, & Feedback") | [
Justice Mba ](https://github.com/Dajust)
[💻](https://github.com/paypal/downshift/commits?author=Dajust "Code") [📖](https://github.com/paypal/downshift/commits?author=Dajust "Documentation") [🤔](#ideas-Dajust "Ideas, Planning, & Feedback") | [
Mark Ellis](http://mfellis.com)
[🤔](#ideas-ellismarkf "Ideas, Planning, & Feedback") | +| [
us͡an̸df͘rien͜ds͠](http://ronak.io/)
[🐛](https://github.com/paypal/downshift/issues?q=author%3Ausandfriends "Bug reports") [💻](https://github.com/paypal/downshift/commits?author=usandfriends "Code") [⚠️](https://github.com/paypal/downshift/commits?author=usandfriends "Tests") | This project follows the [all-contributors][all-contributors] specification. diff --git a/src/__tests__/__snapshots__/set-a11y-status.js.snap b/src/__tests__/__snapshots__/set-a11y-status.js.snap index 439695f3c..4cc512728 100644 --- a/src/__tests__/__snapshots__/set-a11y-status.js.snap +++ b/src/__tests__/__snapshots__/set-a11y-status.js.snap @@ -8,7 +8,7 @@ exports[`clears statuses when a change appears 1`] = ` aria-relevant="additions text" style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;" > -
+
goodbye
@@ -27,6 +27,21 @@ exports[`does add anything for an empty string 1`] = ` `; +exports[`escapes HTML 1`] = ` + +
+
+ <script>alert("!!!")</script> +
+
+ +`; + exports[`repeat statuses get appended as children 1`] = `
-
+
hello
-
+
hello
-
+
hello
@@ -56,7 +71,7 @@ exports[`sets the status 1`] = ` aria-relevant="additions text" style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;" > -
+
hello
diff --git a/src/__tests__/set-a11y-status.js b/src/__tests__/set-a11y-status.js index 88960db5b..d01ba4d09 100644 --- a/src/__tests__/set-a11y-status.js +++ b/src/__tests__/set-a11y-status.js @@ -31,6 +31,12 @@ test('does add anything for an empty string', () => { expect(document.body.innerHTML.trim()).toMatchSnapshot() }) +test('escapes HTML', () => { + const setA11yStatus = setup() + setA11yStatus('') + expect(document.body.innerHTML.trim()).toMatchSnapshot() +}) + function setup() { jest.resetModules() return require('../set-a11y-status').default diff --git a/src/set-a11y-status.js b/src/set-a11y-status.js index f5aafd44b..14ab6f910 100644 --- a/src/set-a11y-status.js +++ b/src/set-a11y-status.js @@ -14,15 +14,25 @@ function setStatus(status) { statuses = [status] } const div = getStatusDiv() - div.innerHTML = `${statuses - .filter(Boolean) - .map(getStatusHtml) - .join('')}` + + // Remove previous children + while (div.lastChild) { + div.removeChild(div.firstChild) + } + + statuses.filter(Boolean).forEach((statusItem, index) => { + div.appendChild(getStatusChildDiv(statusItem, index)) + }) } -function getStatusHtml(status, index) { +function getStatusChildDiv(status, index) { const display = index === statuses.length - 1 ? 'block' : 'none' - return `
${status}
` + + const childDiv = document.createElement('div') + childDiv.style.display = display + childDiv.textContent = status + + return childDiv } function getStatusDiv() {