javascript / expert
Snippet
Sicheres dynamisches HTML durch Bereinigung
Die Verwendung des '{@html}'-Tags in Svelte umgeht die Sicherheitsmechanismen des Template-Compilers. Für Experten-Anwendungen, die benutzergenerierte Inhalte verarbeiten, ist die Integration einer Bibliothek wie DOMPurify entscheidend, um Cross-Site Scripting (XSS) zu verhindern. Beachten Sie, dass die Bereinigungslogik in SSR-Umgebungen sorgfältig gehandhabt werden muss, um mit der Client-Ausgabe übereinzustimmen.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>import DOMPurify from 'dompurify';import { browser } from '$app/environment';export let unsafeUserContent = '<img src=x onerror=alert(1)>';$: sanitizedHtml = browser? DOMPurify.sanitize(unsafeUserContent): unsafeUserContent; // Server-side fallback logic needed</script><div class="prose">{@html sanitizedHtml}</div>
svelte
Erklärung
1
$: sanitizedHtml = ...
Ein reaktives Statement, das den Inhalt neu bereinigt, sobald sich die Eingabe ändert.
2
{@html sanitizedHtml}
Rendert den String als rohes HTML. Die Sicherheit wird nun durch DOMPurify verwaltet, nicht durch Svelte.