Reporting API für Astro konfigurieren
Schritt-für-Schritt-Anleitung: Reporting-Endpoints per Middleware definieren -- CSP-Violations und Security-Reports sammeln und auswerten.
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.
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.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.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;
});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.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 });
};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 -- 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;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.
# 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"}}] 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.