Reporting API für Astro konfigurieren

Schritt-für-Schritt-Anleitung: Reporting-Endpoints per Middleware definieren -- CSP-Violations und Security-Reports sammeln und auswerten.

Astro · Fortgeschritten

Reporting API in Astro

Die Reporting API sammelt Browser-Berichte über Sicherheitsverletzungen -- CSP-Violations, Deprecations und Network Error Logging (NEL). Mit dem Reporting-Endpoints-Header definieren Sie, wohin der Browser Reports sendet. Die API ist mit 4 von 166 Punkten im Wolf-Agents Web Security Check relevant.

In Astro setzen Sie Reporting-Endpoints per Middleware und erstellen eine API-Route als Report-Empfänger. Wolf-Agents nutzt die Reporting API, um CSP-Violations in Echtzeit zu ueberwachen -- die Basis für das geplante CSP-Violation-Monitoring (Phase B).

Die Reporting API ist besonders wertvoll als Fruehwarnsystem: CSP-Violation-Reports können auf XSS-Versuche, kompromittierte Third-Party-Scripts oder Konfigurationsfehler hinweisen. Im Report-Only-Modus sammeln Sie Reports, ohne Ressourcen zu blockieren -- ideal zum Testen neuer CSP-Regeln.

1Schritt 1 von 5

Reporting-Endpoints per Middleware

Definieren Sie den Reporting-Endpoint in der Middleware und verknüpfen Sie ihn mit der CSP über report-to. Beginnen Sie mit Content-Security-Policy-Report-Only, um Violations zu sammeln, ohne Ressourcen zu blockieren.

src/middleware.tsSSR
// src/middleware.ts -- Reporting API (SSR)
import { defineMiddleware } from 'astro:middleware';

export const onRequest = defineMiddleware(async (context, next) => {
  const response = await next();

  // Reporting-Endpoints definieren
  response.headers.set('Reporting-Endpoints',
    'csp-endpoint="https://ihre-domain.de/api/csp-report"');

  // CSP mit report-to verknüpfen
  response.headers.set('Content-Security-Policy',
    "default-src 'self'; report-to csp-endpoint");

  return response;
});
src/middleware.tsReport-Only
// src/middleware.ts -- Report-Only-Modus (zum Testen)
export const onRequest = defineMiddleware(async (context, next) => {
  const response = await next();

  response.headers.set('Reporting-Endpoints',
    'csp-endpoint="https://ihre-domain.de/api/csp-report"');

  // Report-Only: Violations werden gemeldet, aber nicht blockiert
  response.headers.set('Content-Security-Policy-Report-Only',
    "default-src 'self'; script-src 'self'; report-to csp-endpoint");

  return response;
});
2Schritt 2 von 5

Report-Empfänger als API-Route

Erstellen Sie eine API-Route, die Reports empfaengt und speichert. Implementieren Sie Rate-Limiting, da ein fehlerhaftes CSP tausende Reports pro Minute generieren kann. Der Browser sendet Reports als JSON per POST.

src/pages/api/csp-report.tsAPI-Route
// src/pages/api/csp-report.ts -- Report-Empfänger mit Rate-Limiting
import type { APIRoute } from 'astro';

const reportCounts = new Map<string, number>();

export const POST: APIRoute = async ({ request, clientAddress }) => {
  // Rate-Limiting: max 100 Reports pro IP pro Minute
  const key = `${clientAddress}-${Math.floor(Date.now() / 60000)}`;
  const count = (reportCounts.get(key) || 0) + 1;
  reportCounts.set(key, count);

  if (count > 100) {
    return new Response(null, { status: 429 });
  }

  const report = await request.json();
  console.log('CSP Violation:', JSON.stringify(report));

  // In Datenbank speichern oder an Monitoring senden
  // await db.insert(cspReports).values(report);

  return new Response(null, { status: 204 });
};
3Schritt 3 von 5

SSG-Fallback per Nginx

Für statische Deployments setzen Sie Reporting-Endpoints auf dem Webserver. Der Report-Empfänger muss weiterhin eine dynamische Serverkomponente sein -- statische Dateien können keine POST-Requests empfangen.

nginx.confNginx
# Nginx -- Reporting-Endpoints (SSG)
add_header Reporting-Endpoints 'csp-endpoint="https://ihre-domain.de/api/csp-report"' always;

# CSP mit report-to
add_header Content-Security-Policy "default-src 'self'; report-to csp-endpoint" always;

# NEL (Network Error Logging) - optional
# add_header NEL '{"report_to":"csp-endpoint","max_age":86400}' always;
4Schritt 4 von 5

Verifizieren und Test-Violation auslösen

Prüfen Sie den Reporting-Endpoints-Header und loesen Sie eine Test-Violation aus. Öffnen Sie die Browser DevTools und fügen Sie ein Inline-Script ein, das gegen die CSP verstoesst -- der Browser sollte einen Report an den Endpoint senden.

TerminalVerifizieren
# Reporting-Endpoints prüfen
curl -sI https://ihre-domain.de | grep -i reporting-endpoints
# Reporting-Endpoints: csp-endpoint="https://ihre-domain.de/api/csp-report"

# Test-Report manuell senden
curl -X POST https://ihre-domain.de/api/csp-report \
  -H "Content-Type: application/json" \
  -d '[{"type":"csp-violation","body":{"blocked-uri":"eval"}}]'

# Server-Logs prüfen
# CSP Violation: [{"type":"csp-violation","body":{"blocked-uri":"eval"}}]
5Schritt 5 von 5

Von Reports zu Monitoring: Nächste Schritte

Der Report-Empfänger ist der erste Schritt. Für produktives CSP-Monitoring speichern Sie Reports in einer Datenbank, aggregieren nach Violation-Typ und erstellen Alerts bei ungewoehnlichen Mustern. Ein ploetzlicher Anstieg von CSP-Violations kann auf einen XSS-Angriff oder ein kompromittiertes Third-Party-Script hinweisen.

Wolf-Agents plant ein dediziertes CSP-Violation-Monitoring als Push-basiertes Feature (Phase B). Die Reporting API liefert die technische Grundlage: Browser senden Violations automatisch an den konfigurierten Endpoint, der die Reports in Echtzeit verarbeitet und bei Schwellenwertueberscbreitung Alerts auslöst.

Für den Einstieg genuegt die hier gezeigte API-Route mit console.log(). Verbinden Sie den Endpoint später mit einer Monitoring-Lösung wie dem Wolf-Agents Scan-Monitor oder einer eigenen Datenbank-Tabelle. Filtern Sie bekannte False Positives (Browser-Extensions, Ads) heraus, um die Signal-to-Noise-Ratio zu verbessern.

Häufige Fehler bei der Reporting API in Astro

report-uri statt report-to

report-uri ist veraltet und wird in modernen Browsern durch report-to in Kombination mit Reporting-Endpoints ersetzt. Für maximale Kompatibilität können Sie beide Direktiven setzen -- Chrome nutzt report-to, Firefox report-uri.

CORS blockiert Reports

Der Report-Empfänger muss CORS-Anfragen akzeptieren, wenn er auf einer anderen Domain liegt. Bevorzugen Sie einen Endpoint auf der gleichen Domain, um CORS-Probleme zu vermeiden. Die Astro-API-Route auf der gleichen Domain benötigt kein CORS.

Report-Flut ohne Rate-Limiting

Ein fehlerhaftes CSP kann tausende Reports pro Minute generieren. Ohne Rate-Limiting in der API-Route kann der Server überlastet werden. Implementieren Sie ein Limit von 100 Reports pro IP pro Minute.

prerender=true für Report-Endpoint

Die Report-Empfänger-Route darf nicht mit export const prerender = true markiert werden -- sie muss POST-Requests dynamisch verarbeiten können. Im Hybrid-Modus ist die API-Route automatisch SSR.

Compliance-Relevanz

Die Reporting API ermöglicht proaktives Security-Monitoring. NIS2 Artikel 21 fordert Incident-Detection-Fähigkeiten -- CSP-Violation-Reports sind ein frühes Warnsignal für XSS-Versuche und kompromittierte Third-Party-Scripts. PCI DSS 4.0 (Anforderung 11.6) erwartet die Überwachung von Script-Ausführungen auf Zahlungsseiten. Der Wolf-Agents Web Security Check bewertet Reporting-Endpoints mit bis zu 4 Punkten.

Wie steht Ihre Domain bei Reporting API?

Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.