Web Security Grundlagen für Entwickler

Cybersicherheit ist kein Luxus, sondern eine Notwendigkeit. Lernen Sie die wichtigsten Sicherheitslücken kennen und wie Sie Ihre Websites effektiv dagegen schützen können.

Die OWASP Top 10

Die OWASP Foundation veröffentlicht regelmäßig eine Liste der häufigsten Web-Sicherheitslücken. Hier sind die wichtigsten für Frontend-Entwickler:

1. Cross-Site Scripting (XSS)

Hoch

Angreifer injizieren schädlichen JavaScript-Code in Ihre Website.

Beispiel einer XSS-Attacke:

// Gefährlich - niemals tun!
document.getElementById('welcome').innerHTML = 
  'Hallo ' + userInput; 

// Wenn userInput = '<script>alert("XSS")</script>'
// wird der Code ausgeführt!

Sichere Alternative:

// Sicher - verwendet textContent
document.getElementById('welcome').textContent = 
  'Hallo ' + userInput;

// Oder sanitize mit DOMPurify
const clean = DOMPurify.sanitize(userInput);
document.getElementById('welcome').innerHTML = 
  'Hallo ' + clean;

2. Cross-Site Request Forgery (CSRF)

Mittel

Unbefugte Aktionen werden im Namen des Benutzers ausgeführt.

Schutz durch CSRF-Token:

<form method="POST" action="/transfer">
  <input type="hidden" name="csrf_token" 
         value="abc123uniquetoken">
  <input type="text" name="amount" required>
  <button type="submit">Überweisen</button>
</form>

3. SQL Injection

Hoch

Angreifer manipulieren Datenbankabfragen durch Benutzereingaben.

Verwenden Sie immer Prepared Statements:

// PHP Beispiel mit PDO
$stmt = $pdo->prepare(
  "SELECT * FROM users WHERE email = ? AND password = ?"
);
$stmt->execute([$email, $hashedPassword]);

HTTPS und Verschlüsselung

HTTPS ist heute Standard und nicht optional:

Schutz vor Man-in-the-Middle

Alle Daten zwischen Browser und Server sind verschlüsselt.

SEO-Vorteil

Google bevorzugt HTTPS-Websites in den Suchergebnissen.

Vertrauen der Nutzer

Moderne Browser warnen vor unsicheren HTTP-Seiten.

SSL/TLS Zertifikat einrichten

Verwenden Sie kostenlose Zertifikate von Let's Encrypt oder Cloud-Provider wie Cloudflare für automatische Erneuerung.

Content Security Policy (CSP)

CSP ist eine der wirksamsten Verteidigungen gegen XSS-Angriffe:

CSP Header Beispiel

Content-Security-Policy: 
  default-src 'self';
  script-src 'self' https://cdnjs.cloudflare.com;
  style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
  img-src 'self' data: https:;
  font-src 'self' https://fonts.gstatic.com;

script-src

Kontrolliert, von wo JavaScript geladen werden darf

style-src

Kontrolliert CSS-Quellen

img-src

Bestimmt erlaubte Bildquellen

connect-src

Regelt AJAX-, WebSocket- und EventSource-Verbindungen

Sichere Authentifizierung

Benutzeranmeldungen sind besonders kritisch:

Sichere Passwörter

Mindestlänge von 12 Zeichen
Kombination aus Buchstaben, Zahlen, Symbolen
Keine häufigen Wörter oder Muster
Passwort-Stärke-Anzeige implementieren

Zwei-Faktor-Authentifizierung

SMS-Codes (weniger sicher)
Authenticator Apps (empfohlen)
Hardware-Token (höchste Sicherheit)
Backup-Codes für Notfälle

Brute-Force Schutz

Rate-Limiting implementieren
Account-Sperrung nach Fehlversuchen
CAPTCHA bei verdächtigen Aktivitäten
IP-basierte Blockierung

Sichere Passwort-Validierung (Frontend)

function validatePassword(password) {
  const minLength = 12;
  const hasUpperCase = /[A-Z]/.test(password);
  const hasLowerCase = /[a-z]/.test(password);
  const hasNumbers = /\d/.test(password);
  const hasSymbols = /[!@#$%^&*(),.?":{}|<>]/.test(password);
  
  const requirements = {
    length: password.length >= minLength,
    uppercase: hasUpperCase,
    lowercase: hasLowerCase,
    numbers: hasNumbers,
    symbols: hasSymbols
  };
  
  const score = Object.values(requirements)
    .filter(Boolean).length;
  
  return {
    valid: score >= 4 && requirements.length,
    score: score,
    requirements: requirements
  };
}

Security Headers

Zusätzliche HTTP-Header erhöhen die Sicherheit:

X-Frame-Options

Verhindert Clickjacking-Angriffe

X-Frame-Options: DENY

X-Content-Type-Options

Stoppt MIME-Type-Sniffing

X-Content-Type-Options: nosniff

X-XSS-Protection

Aktiviert XSS-Filter im Browser

X-XSS-Protection: 1; mode=block

Referrer-Policy

Kontrolliert Referrer-Informationen

Referrer-Policy: strict-origin-when-cross-origin

Security Testing

Regelmäßige Sicherheitstests sind essentiell:

Automatisierte Tools

OWASP ZAP: Kostenloser Security Scanner
Burp Suite: Professionelles Penetration Testing
Netsparker: Web Application Security Scanner
Acunetix: Vulnerability Scanner

Code-Analyse

ESLint Security: JavaScript Sicherheitslücken
SonarQube: Code Quality und Security
Snyk: Dependency Vulnerability Scanning
npm audit: Node.js Package Vulnerabilities

NPM Security Audit

# Vulnerability Scan durchführen
npm audit

# Automatische Fixes anwenden
npm audit fix

# Detaillierte Informationen
npm audit --audit-level moderate

Security Checkliste

Eine praktische Checkliste für jeden Website-Launch:

Server & Hosting

HTTPS aktiviert
Security Headers konfiguriert
Regelmäßige Updates
Firewall eingerichtet
Backups konfiguriert

Code & Development

Input-Validierung implementiert
Output-Encoding verwendet
CSP konfiguriert
CSRF-Schutz aktiv
Dependencies aktuell

Benutzer & Auth

Sichere Passwort-Richtlinien
2FA verfügbar
Session-Management sicher
Rate-Limiting implementiert
Logout-Funktionalität

Fazit

Web Security ist ein kontinuierlicher Prozess, kein einmaliges Ereignis. Die Bedrohungslandschaft entwickelt sich ständig weiter, und es ist wichtig, auf dem neuesten Stand zu bleiben.

Wichtigste Erkenntnisse:

Implementieren Sie mehrere Sicherheitsebenen (Defense in Depth)
Validieren und sanitizen Sie alle Benutzereingaben
Halten Sie alle Dependencies und Systeme aktuell
Führen Sie regelmäßige Security-Audits durch
Bilden Sie sich kontinuierlich weiter