Bremsen, Sperren und CSP: die offenen Punkte schliessen

S3: Aus der Kontosperre wird eine Wartezeit. Die alte Sperre wies auch das
richtige Passwort ab — wer die Adresse eines Administrators kannte, konnte
ihn alle 15 Minuten neu aussperren. Jetzt bleiben vier Fehlversuche
folgenlos, danach verdoppelt sich die Wartezeit bis zu einer Minute. Der
Besitzer kommt spaetestens nach einer Minute hinein, ein Fremder bekommt
einen Versuch pro Minute. Ausgewertet wird sie vor der Passwortpruefung,
damit ein ohnehin abgewiesener Versuch keine 128 MiB kostet.

S4: Drei Stufen statt einer. Die Bremse je Absender liest
X-Forwarded-For nur noch mit TRUST_PROXY=true — ohne Proxy waehlt den Wert
jeder Aufrufer selbst, und eine so umgehbare Bremse ist eine Behauptung.
Dazu die Wartezeit je Konto, die an der Datenbank haengt, und eine
Obergrenze fuer die ganze Installation: 60 Passwortpruefungen und 120
Rueckmeldungen je Minute. Die letzte Stufe ist die einzige, die sich nicht
ueber Kopfzeilen umgehen laesst, und sie schuetzt den Speicher.

CSP: Eine vollstaendige Policy mit Nonce je Anfrage, strict-dynamic,
default-src self, object-src none, base-uri und form-action self. Skripte
ohne den Nonce dieser Anfrage laufen nicht mehr. Zwei Lockerungen bleiben
und stehen begruendet in der Doku: style-src erlaubt unsafe-inline, weil
ein Nonce keine style-Attribute deckt, und media-src erlaubt https, weil
der Typ Video ausdruecklich Direktlinks annimmt.

Protokoll: Sicherheitsereignisse als JSON auf die Standardausgabe —
Fehlversuche, OIDC-Verknuepfungen samt abgelehnten, Vergabe von
Administratorrechten. Ohne Passwoerter, Token und Adressen.

Refs #20

src/proxy.ts

@@ -26,17 +26,68 @@ import { isSameOrigin } from "@/lib/http";
 const SCHREIBEND = new Set(["POST", "PUT", "PATCH", "DELETE"]);
 
 /**
- * Schutzheader.
+ * Woher eingebettete Videos kommen dürfen.
  *
- * Bewusst ohne vollständige `Content-Security-Policy` für Skripte: Next.js
- * bringt eingebettete Skripte mit, dafür bräuchte es Nonces durch die ganze
- * Anwendung. Eine halbherzige Policy mit `unsafe-inline` sähe nur nach
- * Schutz aus. Was hier steht, wirkt dagegen sofort.
+ * Der Video-Typ bettet YouTube und Vimeo ein — beide brauchen einen eigenen
+ * Eintrag, sonst bliebe der Rahmen nach dem Klick leer. Mehr steht hier
+ * nicht: Was nicht eingebettet wird, gehört auch nicht in die Liste.
  */
+const VIDEO_QUELLEN = [
+  "https://www.youtube-nocookie.com",
+  "https://www.youtube.com",
+  "https://player.vimeo.com",
+].join(" ");
+
+/**
+ * Die Content-Security-Policy dieser Anfrage.
+ *
+ * Skripte laufen nur mit dem Nonce dieser einen Anfrage oder weil ein Skript
+ * sie geladen hat, das selbst eines hatte (`strict-dynamic`). Ein Skript,
+ * das über eine Lücke in die Seite gerät, hat keines — und läuft nicht.
+ *
+ * **Warum `style-src` weiter `unsafe-inline` erlaubt:** Ein Nonce wirkt nur
+ * auf `<style>`-Blöcke, nicht auf `style="…"` an einzelnen Elementen. Die
+ * Oberfläche benutzt solche Attribute an rund einem Dutzend Stellen, etwa
+ * für die gewählte Akzentfarbe. Sie zu verbieten hieße, sie vorher alle
+ * aufzulösen; der Gewinn wäre gering, denn über ein Stilattribut lässt sich
+ * kein Code ausführen. Das ist eine bewusste Grenze, keine Nachlässigkeit.
+ *
+ * `upgrade-insecure-requests` nur bei HTTPS: Auf einer Installation, die
+ * bewusst über HTTP läuft, würde die Regel die eigenen Ressourcen auf HTTPS
+ * hochstufen und damit alles zerlegen.
+ */
+function contentSecurityPolicy(nonce: string): string {
+  const entwicklung = process.env.NODE_ENV === "development";
+  const ueberHttps = (process.env.BASE_URL ?? "").startsWith("https://");
+
+  return [
+    "default-src 'self'",
+    "base-uri 'self'",
+    "object-src 'none'",
+    "frame-ancestors 'none'",
+    "form-action 'self'",
+    // `unsafe-eval` braucht React nur in der Entwicklung, für die
+    // Fehleraufbereitung im Browser.
+    `script-src 'self' 'nonce-${nonce}' 'strict-dynamic'${entwicklung ? " 'unsafe-eval'" : ""}`,
+    "style-src 'self' 'unsafe-inline'",
+    // `data:` für die Vorschau des QR-Codes, `blob:` für den Download.
+    "img-src 'self' data: blob:",
+    "font-src 'self'",
+    "connect-src 'self'",
+    `frame-src ${VIDEO_QUELLEN}`,
+    // Videos duerfen als Direktlink irgendwo liegen — der Typ „Video" nimmt
+    // ausdruecklich auch eine Adresse auf eine MP4-Datei entgegen. `https:`
+    // statt einer Liste: Welche Adresse jemand eintraegt, weiss nur er.
+    "media-src 'self' https:",
+    ...(ueberHttps ? ["upgrade-insecure-requests"] : []),
+  ].join("; ");
+}
+
+/** Schutzheader, die unabhängig von der Anfrage gelten. */
 const HEADER: Record<string, string> = {
   // Kein Einbetten in fremde Seiten — sonst ließe sich die Verwaltung hinter
-  // einer harmlos aussehenden Seite verstecken und fernsteuern.
-  "Content-Security-Policy": "frame-ancestors 'none'",
+  // einer harmlos aussehenden Seite verstecken und fernsteuern. Steht auch
+  // in der CSP; dieser Header erreicht ältere Browser.
   "X-Frame-Options": "DENY",
   // Der Browser soll den Inhaltstyp nicht raten.
   "X-Content-Type-Options": "nosniff",
@@ -58,7 +109,20 @@ export function proxy(request: NextRequest) {
     );
   }
 
-  const response = NextResponse.next();
+  // Ein frischer Nonce je Anfrage. Next.js liest ihn aus der CSP der
+  // **Anfrage** und hängt ihn an seine eigenen Skripte — deshalb muss die
+  // Kopfzeile an beiden Stellen stehen, an der Anfrage und an der Antwort.
+  const nonce = crypto.randomUUID().replaceAll("-", "");
+  const csp = contentSecurityPolicy(nonce);
+
+  const anfrage = new Headers(request.headers);
+  anfrage.set("x-nonce", nonce);
+  anfrage.set("Content-Security-Policy", csp);
+
+  const response = NextResponse.next({ request: { headers: anfrage } });
+  if (!response.headers.has("Content-Security-Policy")) {
+    response.headers.set("Content-Security-Policy", csp);
+  }
   for (const [name, wert] of Object.entries(HEADER)) {
     // Routen, die eigene Regeln setzen — etwa die Sandbox für hochgeladene
     // Dateien —, sollen sie behalten.