javascript / intermediate
Snippet
Bereinigen von HTML-Direktiven gegen XSS mittels DOMPurify
Die Verwendung von Vues nativer v-html-Direktive setzt Komponenten Cross-Site-Scripting-Angriffen (XSS) aus, wenn ungeprüfte Benutzereingaben ausführbares Markup enthalten. Durch die Implementierung einer benutzerdefinierten Direktive, die HTML-Strings mittels DOMPurify bereinigt, bevor sie in innerHTML geschrieben werden, erzwingt die Anwendung strenge Sicherheitsbeschränkungen für erlaubte Tags und Attribute bei Mount- und Update-Zyklen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { type Directive } from 'vue';import DOMPurify from 'dompurify';export const vSafeHtml: Directive<HTMLElement, string | null> = {mounted(el, binding) {const rawInput = binding.value;if (typeof rawInput !== 'string' || !rawInput.trim()) {el.textContent = '';return;}const sanitized = DOMPurify.sanitize(rawInput, {ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'code'],ALLOWED_ATTR: ['href', 'target', 'rel']});el.innerHTML = sanitized;},updated(el, binding) {if (binding.value !== binding.oldValue) {vSafeHtml.mounted?.(el, binding, null as any, null as any);}}};
vue
Erklärung
1
export const vSafeHtml: Directive<HTMLElement, string | null> = {
Definiert eine typisierte benutzerdefinierte Vue-Direktive, die ein HTML-Element und ein String-Binding akzeptiert.
2
if (typeof rawInput !== 'string' || !rawInput.trim()) {
Führt defensive Kontrollfluss-Typprüfungen durch, um den Inhalt sicher zu leeren, wenn Eingaben ungültig sind.
3
const sanitized = DOMPurify.sanitize(rawInput, {
Führt DOMPurify mit einer Whitelist für Tags und Attribute aus, um bösartige Skripte zu entfernen.
4
if (binding.value !== binding.oldValue) {
Prüft, ob sich der gebundene Wert geändert hat, um redundante DOM-Aktualisierungen zu vermeiden.