javascript / intermediate
Snippet
Bereinigung von unsicherem HTML-Input vor dem v-html-Rendering
Das Maskieren gefährlicher HTML-Entities vor der Ausgabe von benutzerdefinierten Zeichenketten schützt vor Cross-Site-Scripting-Schwachstellen (XSS) in Vue-Templates.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { ref, computed } from 'vue';function sanitizeHtml(dirtyString) {const htmlEntities = {'&': '&','<': '<','>': '>','"': '"',"'": '''};return String(dirtyString).replace(/[&<>"']/g, (char) => htmlEntities[char]);}export function useSafeUserInput(rawInput = '') {const userContent = ref(rawInput);const safeContent = computed(() => sanitizeHtml(userContent.value));return { userContent, safeContent };}
vue
Erklärung
1
const htmlEntities = { ... };
Mappt sensible HTML-Steuerzeichen auf ihre sicheren Entity-Entsprechungen.
2
return String(dirtyString).replace(/[&<>"']/g, (char) => htmlEntities[char]);
Führt eine globale Regex-Ersetzung für alle sicherheitskritischen Zeichen durch.
3
const safeContent = computed(() => sanitizeHtml(userContent.value));
Berechnet reaktiv eine bereinigte Zeichenkette bei jeder Änderung des Eingabewerts.