javascript / intermediate
Snippet
Markierte Template-Literale zur Bereinigung
Markierte Templates (Tagged Templates) ermöglichen das Parsen von Template-Literalen mit einer Funktion. Dies ist nützlich für DSLs oder, wie hier gezeigt, zum automatischen Eskapieren von Benutzereingaben zur XSS-Prävention.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
function safeHTML(strings, ...values) {return strings.reduce((acc, str, i) => {const val = String(values[i] || '').replace(/</g, '<').replace(/>/g, '>');return acc + str + val;}, '');}const userInput = '<img src=x onerror=alert(1)>';const message = safeHTML`User said: ${userInput}`;console.log(message); // User said: <img src=x onerror=alert(1)>
Erklärung
1
function safeHTML(strings, ...values) {
Die Funktion erhält statische Zeichenketten als Array und dynamische Werte separat.
2
replace(/</g, '<')
Ersetzt gefährliche HTML-Zeichen durch sichere Entities.
3
strings.reduce(...)
Verwebt die statischen Teile der Zeichenkette mit den verarbeiteten dynamischen Werten.
4
safeHTML`User said: ${userInput}`;
Ruft die 'Tag'-Funktion ohne Klammern auf der Template-Zeichenkette auf.