0 Tage Serie
javascript / beginner
Snippet

Maskieren von Sonderzeichen zur Vermeidung von Injection in Vue

Das manuelle Maskieren von HTML-Entities mittels regulärem JavaScript-replace wandelt gefährliche Zeichen in sichere HTML-Entities um. Dieses Sicherheitsmuster neutralisiert potenzielle Script-Injektionen vor der weiteren Verarbeitung.

snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script setup>
import { ref } from 'vue';
const safeOutput = ref('');
function sanitizeInput(userInput) {
const entityMap = {
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&#039;'
};
safeOutput.value = userInput.replace(/[&<>"']/g, char => entityMap[char]);
}
</script>
vue
Erklärung
1
const entityMap = { ... };
Definiert ein Wörterbuch zur Zuordnung von sensiblen HTML-Zeichen zu sicheren Entity-Codes.
2
safeOutput.value = userInput.replace(/[&<>"']/g, char => entityMap[char]);
Wendet einen globalen regulären Ausdruck an und ersetzt jedes gefundene unsichere Zeichen durch die maskierte Entsprechung.