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}}
@prefixType={{sectionLink.prefixType}}
@prefixValue={{sectionLink.prefixValue}}
@prefixCSS={{sectionLink.prefixCSS}}
@prefixColor={{sectionLink.prefixColor}} >
@prefixColor={{sectionLink.prefixColor}}
@prefixElementColors={{sectionLink.prefixElementColors}} >
</Sidebar::SectionLink>
{{/each}}

View File

@ -15,9 +15,8 @@
{{/if}}
{{#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 @prefixBadge}}
{{d-icon @prefixBadge class="prefix-badge"}}
{{/if}}

View File

@ -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}}
/>

View File

@ -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(", ");
}
}

View File

@ -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}} >
</Sidebar::SectionLink>
{{/each}}
{{else}}

View File

@ -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() {

View File

@ -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"
);