javascript / intermediate
Snippet
Bereinigung von unsicherem HTML-Input zur Vermeidung von XSS-Angriffen
Die Verwendung von v-html in Vue umgeht die Template-Maskierung und birgt Risiken für Cross-Site-Scripting (XSS). Die Einbindung von DOMPurify in einer Computed Property entfernt bösartigen JavaScript-Code und Attribute, bevor der HTML-String an das DOM übergeben wird.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { defineComponent, computed, ref } from 'vue';import DOMPurify from 'dompurify';export default defineComponent({setup() {const untrustedUserInput = ref('<img src="x" onerror="alert(1)"><b>Safe User Comment</b>');const sanitizedHtml = computed(() => {return DOMPurify.sanitize(untrustedUserInput.value, {ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'p'],ALLOWED_ATTR: []});});return { sanitizedHtml };},template: '<div v-html="sanitizedHtml"></div>'});
vue
Erklärung
1
const untrustedUserInput = ref('<img src="x" onerror="alert(1)"><b>Safe User Comment</b>');
Hält dynamische Benutzerinhalte, die potenziell schädliche ausführbare Skripte enthalten.
2
const sanitizedHtml = computed(() => {
Erstellt einen reaktiven berechneten Wert, der die Eingabe bereinigt, sobald sich die Quelle ändert.
3
return DOMPurify.sanitize(untrustedUserInput.value, { ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'p'], ALLOWED_ATTR: [] });
Wendet eine strenge Positivliste sicherer HTML-Tags an und entfernt gefährliche Attribute wie onerror oder onclick.
4
template: '<div v-html="sanitizedHtml"></div>'
Rendert das bereinigte HTML-Fragment sicher in das Komponenten-Markup.