javascript / expert
Snippet
Kontextuelles Escaping über Tagged Templates
Tagged Template Literals ermöglichen das Parsen von Template-Strings durch eine Funktion. Dies ist ein Experten-Pattern zur Implementierung von Domain Specific Languages (DSLs) oder, wie hier gezeigt, für automatisches Security-Escaping zur Vermeidung von XSS-Angriffen.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
function safeHTML(strings, ...values) {return strings.reduce((acc, str, i) => {const value = String(values[i] || '');const escaped = value.replace(/[&<>"']/g, m => ({'&': '&', '<': '<', '>': '>', '"': '"', "'": '''}[m]));return acc + str + escaped;}, '');}const userSupplied = '<img src=x onerror=alert(1)>';const html = safeHTML`<div>${userSupplied}</div>`;
Erklärung
1
safeHTML`...`
Ruft die safeHTML-Funktion mit den Strings und den interpolierten Werten separat auf.
2
strings.reduce(...)
Iteriert durch die statischen String-Teile und flicht die escaped dynamischen Werte ein.
3
values[i]
Greift auf die Rohdaten zu, die in das Template eingefügt wurden, bevor sie Teil des finalen Strings werden.