javascript / intermediate
Snippet
Verhindern von Cross-Site-Scripting (XSS) bei dynamischer HTML-Injektion mit DOMPurify
Das Einfügen von rohem HTML über dangerouslySetInnerHTML setzt Anwendungen Cross-Site-Scripting-Angriffen (XSS) aus. Die Verwendung einer Bereinigungsbibliothek wie DOMPurify entfernt schädliche JavaScript-Payloads, ausführbare Attribute und unerwünschte Tags, bevor der Browser-DOM den Inhalt verarbeitet.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import DOMPurify from 'dompurify';function SafeHtmlViewer({ untrustedMarkup }) {const sanitizedContent = DOMPurify.sanitize(untrustedMarkup, {USE_PROFILES: { html: true },FORBID_TAGS: ['script', 'iframe'],FORBID_ATTR: ['onerror', 'onload', 'onclick']});return (<articleclassName="user-rendered-content"dangerouslySetInnerHTML={{ __html: sanitizedContent }}/>);}
react
Erklärung
1
const sanitizedContent = DOMPurify.sanitize(untrustedMarkup, {
Übergibt die unsichere Zeichenkette an einen Parser, der schädliche Skripte und Knoten entfernt.
2
FORBID_TAGS: ['script', 'iframe'],
Konfiguriert ein striktes Tag-Verbot, um das Einbetten von Ausführungskontexten zu unterbinden.
3
FORBID_ATTR: ['onerror', 'onload', 'onclick']
Blockiert Inline-Event-Handler-Attribute, die beliebigen JavaScript-Code ausführen könnten.
4
dangerouslySetInnerHTML={{ __html: sanitizedContent }}
Rendert den geprüften, sauberen HTML-String ohne XSS-Sicherheitslücke in das React-Element.