Snippet

Sicheres HTML-Rendering in React durch DOMPurify-Bereinigung

Das direkte Einfügen von ungefiltertem Benutzer-HTML über `dangerouslySetInnerHTML` setzt React-Anwendungen Cross-Site-Scripting-Angriffen (XSS) aus. Durch das Bereinigen ungesicherter Strings mittels DOMPurify und einer expliziten Whitelist erlaubter Tags und Attribute wird bösartiger JavaScript-Code vor der DOM-Übergabe neutralisiert.

snippet.js

javascript

import DOMPurify from 'dompurify';
 
const SANITIZE_CONFIG = {
  ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'code'],
  ALLOWED_ATTR: ['href', 'target', 'rel']
};
 
export function SafeRichText({ rawHtml, className }) {
  const cleanHtml = DOMPurify.sanitize(rawHtml, SANITIZE_CONFIG);
 
  return (
    <div
      className={className}
      dangerouslySetInnerHTML={{ __html: cleanHtml }}
    />
  );
}

react

Erklärung

ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'code'],

Definiert eine Positivliste erlaubter HTML-Elemente für Formatierungen und entfernt Tags wie `<script>` oder `<iframe>`.

const cleanHtml = DOMPurify.sanitize(rawHtml, SANITIZE_CONFIG);

Parst und entfernt ausführbaren Code, unzulässige Tags und Event-Handler wie `onload` oder `onerror`.

dangerouslySetInnerHTML={{ __html: cleanHtml }}

Weist React an, den bereinigten HTML-String direkt in das umgebende Container-Element zu rendern.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Sicheres HTML-Rendering in React durch DOMPurify-Bereinigung

Verwandt