Frontend Academy · Lektion

XSS-Schutz: Ausgabekodierung und CSP

XSS-Schutz: Ausgabekodierung und CSP ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist XSS?

Cross-Site Scripting tritt auf, wenn ein Angreifer ausführbares JavaScript in Ihre Seite einschleust. Der Browser führt es mit den Berechtigungen Ihrer Origin aus – dadurch können Cookies gestohlen, Sitzungen übernommen, die Seite verunstaltet oder Benutzer zu Malware umgeleitet werden.

Drei XSS-Varianten

Stored: Ein bösartiges Skript wird in der Datenbank gespeichert und an jeden Besucher ausgeliefert. Reflected: Eine Eingabe wird in der Antwort zurückgespiegelt (?q=<script>...). DOM-based: Clientseitiges JavaScript schreibt nicht vertrauenswürdige Daten in das DOM.

Die Ursache: innerHTML mit nicht vertrauenswürdigen Daten

Die Verwendung von innerHTML (oder v-html, dangerouslySetInnerHTML) mit benutzergesteuerten Zeichenketten ist der häufigste XSS-Vektor.

// BAD: user input rendered as HTML
el.innerHTML = userComment;  // attacker submits <img onerror=alert(1)>

// Vue equivalent:
<div v-html="userComment"></div>  // same bug

// React equivalent:
<div dangerouslySetInnerHTML={{ __html: userComment }} />  // same bug

Ausgabe-Kodierung (sichere Standardeinstellung)

Behandeln Sie nicht vertrauenswürdige Zeichenketten als Text, nicht als HTML. React, Vue, Angular und Svelte tun dies standardmäßig bei der Interpolation mit {value}.

// SAFE: text content, not HTML
el.textContent = userComment;  // <script> shows as literal text

// React (auto-escaped):
<div>{userComment}</div>

// Vue (auto-escaped):
<div>{{ userComment }}</div>

HTML bereinigen, wenn es gerendert werden muss

Wenn Sie tatsächlich Benutzer-HTML rendern müssen, etwa in Rich-Text-Editoren, bereinigen Sie es mit DOMPurify – schreiben Sie niemals selbst einen Regex-Sanitizer.

import DOMPurify from 'dompurify';

const clean = DOMPurify.sanitize(userHtml);
el.innerHTML = clean; // strips <script>, on* handlers, dangerous URLs

URL-Validierung

Benutzergesteuerte URLs in href oder src können über javascript:-Schemes XSS auslösen.

// BAD:
<a href={userUrl}>Click</a>
// attacker submits: javascript:alert(1)

// GOOD: whitelist protocols:
function safeUrl(url) {
  if (!/^https?:\/\//.test(url) && !url.startsWith('/')) return '#';
  return url;
}

Content Security Policy (CSP)

CSP ist ein HTTP-Antwortheader, der dem Browser mitteilt, welche Quellen für Skripte, Styles, Bilder usw. zulässig sind. Selbst wenn ein Angreifer ein Skript einschleust, führt der Browser es nicht aus.

Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.trusted.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:

Strikte CSP mit Nonces

Verwenden Sie für Inline-Skripte, die Sie kontrollieren, eine Nonce pro Anfrage. Von Angreifern eingeschleuste Skripte verfügen nicht über die passende Nonce.

// Server generates a random nonce per request:
const nonce = crypto.randomBytes(16).toString('base64');
res.setHeader('Content-Security-Policy', `script-src 'nonce-${nonce}' 'strict-dynamic'`);

// Inject into the HTML:
<script nonce="abc123">/* trusted inline code */</script>

HttpOnly- und Secure-Cookies

Setzen Sie Sitzungscookies mit HttpOnly, damit JavaScript sie nicht lesen kann – selbst wenn XSS auftritt, kann der Angreifer das Sitzungstoken nicht abgreifen.

Set-Cookie: session=abc; HttpOnly; Secure; SameSite=Strict

Subresource Integrity (SRI)

Wenn Sie Skripte von Drittanbietern über ein CDN laden, verwenden Sie SRI, um zu überprüfen, ob der Inhalt mit einem Hash übereinstimmt. Ein kompromittiertes CDN kann kein schädliches Skript ausliefern, ohne dass die Hash-Prüfung fehlschlägt.

<script
  src="https://cdn.example.com/lib.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
  crossorigin="anonymous"
></script>

Trusted Types (experimentell)

Trusted Types ist eine Browserfunktion (auf Chromium-Basis), die erzwingt, dass gefährliche Senken (innerHTML) ein Trusted-Type-Objekt erhalten — dadurch können Zeichenketten überhaupt nicht eingefügt werden.

Auf XSS testen

Versuchen Sie, <img src=x onerror=alert(1)> in jedes Texteingabefeld einzuschleusen, dessen Inhalt anschließend wieder dargestellt wird. Wenn Sie einen Alert sehen, liegt ein XSS-Fehler vor. Verwenden Sie für automatisierte Scans Tools wie OWASP ZAP.

Kurztest

Warum ist {userInput} von React standardmäßig sicher, dangerouslySetInnerHTML dagegen nicht?

Zusammenfassung: XSS-Vermeidung

Verwenden Sie standardmäßig die Textdarstellung (React's {x}, Vue's {{ x }} sind sicher). Wenn Sie HTML darstellen, bereinigen Sie es mit DOMPurify. Erlauben Sie nur eine Positivliste von URL-Protokollen. Ein CSP-Header (mit Nonces oder 'strict-dynamic') blockiert eingeschleuste Skripte. HttpOnly-Cookies verhindern, dass JavaScript sie ausliest. Verwenden Sie SRI-Hashes für CDN-Skripte. Testen Sie Eingaben mit klassischen Payloads.

Häufig gestellte Fragen

Ist die Lektion „XSS-Schutz: Ausgabekodierung und CSP“ kostenlos?

Ja — der vollständige Text von „XSS-Schutz: Ausgabekodierung und CSP“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „XSS-Schutz: Ausgabekodierung und CSP“?

Verstehen Sie reflektiertes, gespeichertes und DOM-basiertes XSS, maskieren Sie benutzergesteuerte Ausgaben, vermeiden Sie innerHTML mit nicht vertrauenswürdigen Daten und fügen Sie einen Content-Sec… Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „XSS-Schutz: Ausgabekodierung und CSP“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Frontend Academy