Welche Sicherheitsrisiken entstehen durch die Nutzung von `dangerouslySetInnerHTML` und wie können diese durch Sanitization-Libraries minimiert werden?

Die Nutzung von dangerouslySetInnerHTML in React hebelt den integrierten Schutz gegen Cross-Site Scripting (XSS) aus. Normalerweise escaped React alle Inhalte, um zu verhindern, dass vom Benutzer eingegebene Daten als ausführbarer Code interpretiert werden. Durch dieses Attribut wird der String jedoch direkt in das DOM injiziert, was Angreifern ermöglicht, bösartige Skripte in die Anwendung einzuschleusen.

Die primären Angriffsvektoren sind:

  • <script>-Tags: Direkte Ausführung von JavaScript im Kontext der Session des Nutzers.
  • Event-Handler: Attribute wie onerror, onload oder onclick in ansonsten legitimen Tags (z. B. <img src="x" onerror="alert(1)">).
  • javascript:-URLs: In href-Attributen von Hyperlinks.

Um diese Risiken zu minimieren, setzen wir auf Sanitization-Libraries wie DOMPurify. Diese Tools analysieren den HTML-String und entfernen alle potenziell gefährlichen Elemente und Attribute basierend auf einer definierten Whitelist.

RisikoMechanismusLösung durch Sanitization
Script Injection<script>alert('XSS')</script>Vollständiges Entfernen des Tags
Event-Handler<img src=x onerror=...>Entfernen von on*-Attributen
Malicious Links<a href="javascript:...">Validierung und Filterung des URI-Schemas

Die Integration erfolgt so, dass der Input vor der Zuweisung an das Prop bereinigt wird: const cleanHtml = DOMPurify.sanitize(dirtyHtml);. In komplexen Infrastrukturen, die wir im Rahmen unserer IT-Consulting & Digitale Strategie begleiten, implementieren wir solche Filter oft bereits auf API-Ebene oder in einer dedizierten Middleware, um die Client-Seite zu entlasten und eine konsistente Sicherheitsstrategie über mehrere Plattformen hinweg zu gewährleisten.

Wir raten davon ab, dangerouslySetInnerHTML als Standardlösung für dynamische Inhalte zu verwenden. Wenn die Darstellung von HTML unvermeidbar ist, ist die Nutzung einer strikten Whitelist-basierten Sanitization die einzige akzeptable Methode. Die sicherste Architektur vermeidet die direkte Manipulation des DOMs durch externe Daten vollständig und setzt stattdessen auf strukturierte Datenformate wie JSON, die im Frontend kontrolliert in React-Komponenten übersetzt werden.

Sergej Wiens

Sergej Wiens

Gründer & Software Architekt