Snippet

Verhinderung von Cross-Site-Scripting durch Bereinigung von Rich-Text mit DOMPurify

Das direkte Rendern von benutzerdefiniertem HTML in React mittels dangerouslySetInnerHTML setzt Anwendungen Cross-Site-Scripting-Angriffen (XSS) aus. Durch den Einsatz von DOMPurify mit einer expliziten Whitelist für Tags und Attribute werden bösartige Inhalte (wie Inline-Skripte, onerror-Handler oder javascript:-URIs) vor der Übergabe an das DOM entfernt.

snippet.js

javascript

import React from 'react';
import DOMPurify from 'dompurify';
 
export function SafeHtmlViewer({ rawHtmlContent }) {
  const sanitizedHtml = DOMPurify.sanitize(rawHtmlContent, {
    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p'],
    ALLOWED_ATTR: ['href', 'target', 'rel']
  });
 
  return (
    <div
      className="content-preview"
      dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
    />
  );
}

react

Erklärung

const sanitizedHtml = DOMPurify.sanitize(rawHtmlContent, {

Ruft die Bereinigungsfunktion auf, um unzulässige Elemente aus dem Eingabestring zu parsen und zu entfernen.

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

Definiert eine strikte Positivliste (Whitelist) erlaubter Tags für die bereinigte Ausgabe.

dangerouslySetInnerHTML={{ __html: sanitizedHtml }}

Fügt das geprüfte und bereinigte HTML sicher in den von React verwalteten DOM-Knoten ein.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Verhinderung von Cross-Site-Scripting durch Bereinigung von Rich-Text mit DOMPurify

Verwandt