javascript / expert
Snippet
Bereinigung von dangerouslySetInnerHTML zur XSS-Prävention
Die Verwendung von dangerouslySetInnerHTML ist ein Sicherheitsrisiko. Um Cross-Site Scripting (XSS) zu verhindern, muss die Eingabe mit einer Bibliothek wie DOMPurify bereinigt werden, idealerweise innerhalb eines useMemo-Hooks.
snippet.js
1
2
3
4
5
6
7
8
9
10
import DOMPurify from 'dompurify';const MarkdownPreview = ({ rawHtml }) => {const cleanHtml = React.useMemo(() => DOMPurify.sanitize(rawHtml),[rawHtml]);return <div dangerouslySetInnerHTML={{ __html: cleanHtml }} />;};
react
Erklärung
1
DOMPurify.sanitize(rawHtml)
Entfernt gefährliche Skripte und Attribute (wie 'onerror') aus dem HTML-String.
2
dangerouslySetInnerHTML={{ __html: cleanHtml }}
Reacts explizite API zum Einfügen von HTML, die nun durch die vorherige Bereinigung sicher ist.