Sicherheit im Browser
Nutzereingaben sind niemals vertrauenswürdig. Sichere DOM-Updates und klare Grenzen verhindern XSS und Datenlecks.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
XSS verstehen
XSS bedeutet, dass fremdes JavaScript in deiner Seite ausgeführt wird.
Ein häufiger Weg ist innerHTML mit ungeprüften Nutzereingaben.
Ein Kommentar wie <img src=x onerror=alert(1)> ist kein Text, sondern potenzieller Code. Genau deshalb darf Nutzertext nicht als HTML interpretiert werden.
// Nicht so:
element.innerHTML = kommentar;
// Wenn kommentar "<img onerror=...>" enthält,
// kann Code ausgeführt werden.Sicher ausgeben
textContent setzt reinen Text und interpretiert keine Tags.
Für neue Elemente nutzt du createElement und hängst Text separat an.
Wenn HTML wirklich erlaubt sein muss, brauchst du eine geprüfte Sanitizer-Bibliothek und eine strenge Allowlist. Eigenes Regex-Säubern reicht nicht.
const li = document.createElement("li");
li.textContent = kommentar;
liste.append(li);CSP und sichere Links
Eine Content Security Policy begrenzt, woher Skripte und Styles geladen werden dürfen.
Sie ersetzt keine sichere Ausgabe, erschwert aber Angriffe.
Externe Links mit target="_blank" bekommen rel="noopener". URLs aus Eingaben prüfst du gegen erlaubte Protokolle, bevor du sie verwendest.
<a href="https://example.com" target="_blank" rel="noopener">
Dokumentation (neuer Tab)
</a>Vertiefung
Nutzereingaben sind fremder Code
XSS entsteht, wenn Nutzereingaben als HTML interpretiert werden. innerHTML ist dafür der häufigste Weg; ein präparierter Kommentar kann dann Skripte ausführen.
Sichere Ausgabe bedeutet: Text bleibt Text. Nutze textContent oder createElement. Wenn HTML wirklich nötig ist, brauchst du eine geprüfte Sanitizer-Bibliothek mit Allowlist.
// gefährlich
element.innerHTML = kommentar;
// sicher
const li = document.createElement("li");
li.textContent = kommentar;
liste.append(li);Merksatz: Nutzertext wird nie als HTML ausgegeben. textContent und createElement sind die sichere Standardroute.
Übungsaufgabe
Sichere Kommentar-Liste
Rendere eine Liste von Kommentaren so, dass HTML in den Kommentaren als Text erscheint und nicht ausgeführt wird.
Das soll dein Programm können
- Kein innerHTML für Nutzereingaben
- createElement und textContent verwenden
- Liste mit append aufbauen
- Leere Kommentare überspringen
- Ein XSS-Beispiel im Test notieren
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Erzeuge pro Kommentar ein li, setze li.textContent = kommentar und hänge es an die Liste.
Lösung anzeigen
const kommentare = ["Hallo", "<img src=x onerror=alert(1)>"];
const liste = document.querySelector("#kommentare");
for (const kommentar of kommentare) {
if (!kommentar.trim()) continue;
const li = document.createElement("li");
li.textContent = kommentar;
liste.append(li);
}Warum funktioniert das?
textContent behandelt den Kommentar als reinen Text. Das img-Tag wird sichtbar, aber nicht als HTML interpretiert und kann keinen Code ausführen.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Sichere Datenkarte
Lade Daten mit fetch, zeige sie sicher mit textContent an und fange Fehler mit einem Fallback ab.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.