javascript / intermediate
Snippet
Absichern von benutzerdefiniertem Markup über benutzerdefinierte Vue-Direktiven
Das direkte Binden von rohem Benutzer-Markup über v-html setzt Komponenten Cross-Site-Scripting-Angriffen (XSS) aus. Eine benutzerdefinierte Vue-Direktive kapselt eine strikte Bereinigung via DOMPurify beim Mounten und bei reaktiven Aktualisierungen und erzwingt eine Positivliste sicherer HTML-Tags und Attribute.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import DOMPurify from 'dompurify';export const vSafeHtml = {mounted(el, binding) {const cleanContent = DOMPurify.sanitize(binding.value || '', {ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'],ALLOWED_ATTR: ['href', 'target']});el.innerHTML = cleanContent;},updated(el, binding) {if (binding.value !== binding.oldValue) {el.innerHTML = DOMPurify.sanitize(binding.value || '', {ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'],ALLOWED_ATTR: ['href', 'target']});}}};
vue
Erklärung
1
const cleanContent = DOMPurify.sanitize(binding.value || '', {
Führt die HTML-Bereinigung des übergebenen Strings anhand der konfigurierten Sicherheitsoptionen durch.
2
if (binding.value !== binding.oldValue) {
Vergleicht neuen und alten Direktiven-Wert, um unnötige DOM-Neuschreibungen bei Re-Renders zu vermeiden.
3
el.innerHTML = cleanContent;
Weist dem Ziel-DOM-Element den geprüften und unschädlichen HTML-String zu.