javascript / intermediate
Snippet
Verhinderung von XSS-Sicherheitslücken bei dynamischer Svelte-HTML-Bindung
Die direkte Verwendung von Sveltes `{@html}`-Direktive mit unsicheren Benutzereingaben birgt das Risiko von Cross-Site-Scripting (XSS). Das dynamische Bereinigen von Roh-HTML-Strings mithilfe einer Bibliothek wie DOMPurify in einer reaktiven Anweisung stellt sicher, dass bösartiger Code vor dem Rendering neutralisiert wird.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>import DOMPurify from 'dompurify';export let rawUserInput = '<img src=x onerror=alert(1)> Hello!';$: sanitizedContent = typeof rawUserInput === 'string'? DOMPurify.sanitize(rawUserInput): '';</script><div class="user-content">{@html sanitizedContent}</div>
svelte
Erklärung
1
import DOMPurify from 'dompurify';
Importiert eine HTML-Bereinigungsbibliothek, die gefährliche JavaScript-Inhalte aus Roh-HTML entfernt.
2
export let rawUserInput = '<img src=x onerror=alert(1)> Hello!';
Deklariert eine Komponenten-Prop für unsichere Eingaben, die potenziell bösartigen Code enthalten können.
3
$: sanitizedContent = typeof rawUserInput === 'string' ? DOMPurify.sanitize(rawUserInput) : '';
Führt eine reaktive Anweisung aus, die die Eingabe bei jeder Änderung bereinigt und den Datentyp prüft.
4
{@html sanitizedContent}
Fügt den bereinigten HTML-String sicher in das DOM ein, ohne unerwünschte Skripte auszuführen.