chore: add escapeHtml option for secure HTML escaping in notifications

This commit is contained in:
Younes ENNAJI
2024-09-19 07:05:11 +01:00
parent 74a71b36dc
commit 889fc4701e
6 changed files with 79 additions and 8 deletions
+28 -2
View File
@@ -19,6 +19,7 @@ export default class FlasherPlugin extends AbstractPlugin {
direction: 'top',
rtl: false,
style: {} as Properties,
escapeHtml: false,
}
constructor(theme: Theme) {
@@ -31,11 +32,12 @@ export default class FlasherPlugin extends AbstractPlugin {
const render = () =>
envelopes.forEach((envelope) => {
// @ts-expect-error
const typeTimeout = this.options.timeout ?? this.options.timeouts[envelope.type] ?? 5000;
const typeTimeout = this.options.timeout ?? this.options.timeouts[envelope.type] ?? 5000
const options = {
...this.options,
...envelope.options,
timeout: envelope.options.timeout ?? typeTimeout,
escapeHtml: (envelope.options.escapeHtml ?? this.options.escapeHtml) as boolean,
}
this.addToContainer(this.createContainer(options), envelope, options)
@@ -64,7 +66,12 @@ export default class FlasherPlugin extends AbstractPlugin {
return container
}
private addToContainer(container: HTMLDivElement, envelope: Envelope, options: { direction: string, timeout: number, fps: number, rtl: boolean }): void {
private addToContainer(container: HTMLDivElement, envelope: Envelope, options: { direction: string, timeout: number, fps: number, rtl: boolean, escapeHtml: boolean }): void {
if (options.escapeHtml) {
envelope.title = this.escapeHtml(envelope.title)
envelope.message = this.escapeHtml(envelope.message)
}
const notification = this.stringToHTML(this.theme.render(envelope))
notification.classList.add(...`fl-container${options.rtl ? ' fl-rtl' : ''}`.split(' '))
@@ -126,4 +133,23 @@ export default class FlasherPlugin extends AbstractPlugin {
template.innerHTML = str.trim()
return template.content.firstElementChild as HTMLElement
}
private escapeHtml(str: string | null | undefined): string {
if (str == null) {
return ''
}
return str.replace(/[&<>"'`=\/]/g, (char) => {
return {
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
'\'': '&#39;',
'`': '&#96;',
'=': '&#61;',
'/': '&#47;',
}[char] as string
})
}
}