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:
parent
7f167de10b
commit
58e4b43fe4
|
@ -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}}
|
||||||
|
|
||||||
|
|
|
@ -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}}
|
||||||
|
|
|
@ -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}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
|
@ -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(", ");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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}}
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -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"
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue