FIX: replace prefixCSS with prefixElementColors (#18556)

Instead of having `prefixCSS`, only `prefixElementColors` are available to reduce chances of exposing XSS.
This commit is contained in:
Krzysztof Kotlarek 2022-10-13 09:01:19 +11:00 committed by GitHub
parent 7f167de10b
commit 58e4b43fe4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 19 additions and 17 deletions

View File

@ -13,8 +13,8 @@
@model={{sectionLink.model}} @model={{sectionLink.model}}
@prefixType={{sectionLink.prefixType}} @prefixType={{sectionLink.prefixType}}
@prefixValue={{sectionLink.prefixValue}} @prefixValue={{sectionLink.prefixValue}}
@prefixCSS={{sectionLink.prefixCSS}} @prefixColor={{sectionLink.prefixColor}}
@prefixColor={{sectionLink.prefixColor}} > @prefixElementColors={{sectionLink.prefixElementColors}} >
</Sidebar::SectionLink> </Sidebar::SectionLink>
{{/each}} {{/each}}

View File

@ -15,9 +15,8 @@
{{/if}} {{/if}}
{{#if (eq @prefixType "span")}} {{#if (eq @prefixType "span")}}
<span style={{html-safe @prefixCSS}} class="prefix-span"></span> <span style={{html-safe (concat "background: linear-gradient(90deg, " @prefixElementColors ")")}} class="prefix-span"></span>
{{/if}} {{/if}}
{{#if @prefixBadge}} {{#if @prefixBadge}}
{{d-icon @prefixBadge class="prefix-badge"}} {{d-icon @prefixBadge class="prefix-badge"}}
{{/if}} {{/if}}

View File

@ -6,7 +6,8 @@
@prefixType={{@prefixType}} @prefixType={{@prefixType}}
@prefixValue={{@prefixValue}} @prefixValue={{@prefixValue}}
@prefixCSSClass={{@prefixCSSClass}} @prefixCSSClass={{@prefixCSSClass}}
@prefixCSS={{this.prefixCSS}} @prefixColor={{this.prefixColor}}
@prefixElementColors={{this.prefixElementColors}}
@prefixBadge={{@prefixBadge}} @prefixBadge={{@prefixBadge}}
/> />
@ -28,8 +29,8 @@
@prefixType={{@prefixType}} @prefixType={{@prefixType}}
@prefixValue={{@prefixValue}} @prefixValue={{@prefixValue}}
@prefixCSSClass={{@prefixCSSClass}} @prefixCSSClass={{@prefixCSSClass}}
@prefixCSS={{this.prefixCSS}}
@prefixColor={{this.prefixColor}} @prefixColor={{this.prefixColor}}
@prefixElementColors={{this.prefixElementColors}}
@prefixBadge={{@prefixBadge}} @prefixBadge={{@prefixBadge}}
/> />

View File

@ -51,7 +51,13 @@ export default class SectionLink extends Component {
return "#" + color; return "#" + color;
} }
get prefixCSS() { get prefixElementColors() {
return this.args.prefixCSS; 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(", ");
} }
} }

View File

@ -19,8 +19,8 @@
@prefixBadge={{sectionLink.prefixBadge}} @prefixBadge={{sectionLink.prefixBadge}}
@prefixType={{sectionLink.prefixType}} @prefixType={{sectionLink.prefixType}}
@prefixValue={{sectionLink.prefixValue}} @prefixValue={{sectionLink.prefixValue}}
@prefixCSS={{sectionLink.prefixCSS}} @prefixColor={{sectionLink.prefixColor}}
@prefixColor={{sectionLink.prefixColor}} > @prefixElementColors={{sectionLink.prefixElementColors}} >
</Sidebar::SectionLink> </Sidebar::SectionLink>
{{/each}} {{/each}}
{{else}} {{else}}

View File

@ -52,12 +52,8 @@ export default class CategorySectionLink {
return "span"; return "span";
} }
get prefixCSS() { get prefixElementColors() {
if (this.category.parentCategory) { return [this.category.parentCategory?.color, this.category.color];
return `background: linear-gradient(90deg, #${this.category.parentCategory.color} 50%, #${this.category.color} 50%)`;
} else {
return `background: #${this.category.color}`;
}
} }
get prefixColor() { get prefixColor() {

View File

@ -197,7 +197,7 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
assert.ok( assert.ok(
exists( 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" "category1 section link is rendered with solid prefix icon color"
); );