From 58e4b43fe4c07db1e21f5fa299ee4a7330791cd0 Mon Sep 17 00:00:00 2001 From: Krzysztof Kotlarek Date: Thu, 13 Oct 2022 09:01:19 +1100 Subject: [PATCH] FIX: replace prefixCSS with prefixElementColors (#18556) Instead of having `prefixCSS`, only `prefixElementColors` are available to reduce chances of exposing XSS. --- .../sidebar/anonymous/categories-section.hbs | 4 ++-- .../app/components/sidebar/section-link-prefix.hbs | 3 +-- .../discourse/app/components/sidebar/section-link.hbs | 5 +++-- .../discourse/app/components/sidebar/section-link.js | 10 ++++++++-- .../app/components/sidebar/user/categories-section.hbs | 4 ++-- .../user/categories-section/category-section-link.js | 8 ++------ .../acceptance/sidebar-user-categories-section-test.js | 2 +- 7 files changed, 19 insertions(+), 17 deletions(-) diff --git a/app/assets/javascripts/discourse/app/components/sidebar/anonymous/categories-section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/anonymous/categories-section.hbs index 7b7ee5b749..6a174ed7a6 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/anonymous/categories-section.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/anonymous/categories-section.hbs @@ -13,8 +13,8 @@ @model={{sectionLink.model}} @prefixType={{sectionLink.prefixType}} @prefixValue={{sectionLink.prefixValue}} - @prefixCSS={{sectionLink.prefixCSS}} - @prefixColor={{sectionLink.prefixColor}} > + @prefixColor={{sectionLink.prefixColor}} + @prefixElementColors={{sectionLink.prefixElementColors}} > {{/each}} diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-link-prefix.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section-link-prefix.hbs index 3af9d14f7e..31c5ec6748 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/section-link-prefix.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/section-link-prefix.hbs @@ -15,9 +15,8 @@ {{/if}} {{#if (eq @prefixType "span")}} - + {{/if}} - {{#if @prefixBadge}} {{d-icon @prefixBadge class="prefix-badge"}} {{/if}} diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs index 0cc9938e76..c29385e2c0 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs @@ -6,7 +6,8 @@ @prefixType={{@prefixType}} @prefixValue={{@prefixValue}} @prefixCSSClass={{@prefixCSSClass}} - @prefixCSS={{this.prefixCSS}} + @prefixColor={{this.prefixColor}} + @prefixElementColors={{this.prefixElementColors}} @prefixBadge={{@prefixBadge}} /> @@ -28,8 +29,8 @@ @prefixType={{@prefixType}} @prefixValue={{@prefixValue}} @prefixCSSClass={{@prefixCSSClass}} - @prefixCSS={{this.prefixCSS}} @prefixColor={{this.prefixColor}} + @prefixElementColors={{this.prefixElementColors}} @prefixBadge={{@prefixBadge}} /> diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-link.js b/app/assets/javascripts/discourse/app/components/sidebar/section-link.js index 6155739c72..e472e99ac7 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/section-link.js +++ b/app/assets/javascripts/discourse/app/components/sidebar/section-link.js @@ -51,7 +51,13 @@ export default class SectionLink extends Component { return "#" + color; } - get prefixCSS() { - return this.args.prefixCSS; + get prefixElementColors() { + const prefixElementColors = this.args.prefixElementColors.filter((color) => + color?.match(/^\w{6}$/) + ); + if (prefixElementColors.length === 1) { + prefixElementColors.push(prefixElementColors[0]); + } + return prefixElementColors.map((color) => `#${color} 50%`).join(", "); } } diff --git a/app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.hbs index 2d40a98883..06470cf81e 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.hbs @@ -19,8 +19,8 @@ @prefixBadge={{sectionLink.prefixBadge}} @prefixType={{sectionLink.prefixType}} @prefixValue={{sectionLink.prefixValue}} - @prefixCSS={{sectionLink.prefixCSS}} - @prefixColor={{sectionLink.prefixColor}} > + @prefixColor={{sectionLink.prefixColor}} + @prefixElementColors={{sectionLink.prefixElementColors}} > {{/each}} {{else}} diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/user/categories-section/category-section-link.js b/app/assets/javascripts/discourse/app/lib/sidebar/user/categories-section/category-section-link.js index e7172d5f04..8af34cdb3f 100644 --- a/app/assets/javascripts/discourse/app/lib/sidebar/user/categories-section/category-section-link.js +++ b/app/assets/javascripts/discourse/app/lib/sidebar/user/categories-section/category-section-link.js @@ -52,12 +52,8 @@ export default class CategorySectionLink { return "span"; } - get prefixCSS() { - if (this.category.parentCategory) { - return `background: linear-gradient(90deg, #${this.category.parentCategory.color} 50%, #${this.category.color} 50%)`; - } else { - return `background: #${this.category.color}`; - } + get prefixElementColors() { + return [this.category.parentCategory?.color, this.category.color]; } get prefixColor() { diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js index 42a9959883..d69611fec9 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js @@ -197,7 +197,7 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) { assert.ok( exists( - `.sidebar-section-link-${category1.slug} .sidebar-section-link-prefix .prefix-span[style="background: #${category1.color}"]` + `.sidebar-section-link-${category1.slug} .sidebar-section-link-prefix .prefix-span[style="background: linear-gradient(90deg, #${category1.color} 50%, #${category1.color} 50%)"]` ), "category1 section link is rendered with solid prefix icon color" );