javascript / intermediate
Snippet
Bereinigen von benutzergeneriertem Rich-Text mit DOMPurify
Das Einfügen von dynamischem HTML über dangerouslySetInnerHTML setzt React-Anwendungen Cross-Site-Scripting-Angriffen (XSS) aus. DOMPurify entfernt schädliche ausführbare Skripte und nicht freigegebene Attribute und liefert einen bereinigten String-Datentyp vor dem Rendern zurück.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React, { useState } from 'react';import DOMPurify from 'dompurify';export function SafeHtmlViewer({ rawUserInput }) {const sanitizedHtml = DOMPurify.sanitize(rawUserInput, {ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'],ALLOWED_ATTR: ['href', 'title']});return (<divclassName="preview-box"dangerouslySetInnerHTML={{ __html: sanitizedHtml }}/>);}
react
Erklärung
1
import DOMPurify from 'dompurify';
Importiert die Bereinigungsbibliothek zum Parsen und Säubern nicht vertrauenswürdiger HTML-Strings.
2
const sanitizedHtml = DOMPurify.sanitize(rawUserInput, {
Führt die HTML-Bereinigung basierend auf einer strikten Whitelist-Konfiguration durch.
3
ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'],
Beschränkt die erlaubten DOM-Knoten auf sichere Typografie- und Link-Elemente.
4
dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
Fügt den bereinigten HTML-String sicher ohne XSS-Gefahr in das React-Element ein.