Reporting API für Vercel konfigurieren
Schritt-für-Schritt-Anleitung: Reporting-Endpoints auf Vercel einrichten — CSP-Violations und andere Security-Reports dauerhaft erfassen.
Reporting API auf Vercel
Die Reporting API ermöglicht es Browsern, Security-Violations (CSP, COEP, Deprecations) an einen konfigurierbaren Endpoint zu senden. Statt Violations nur in der Browser-Console zu sehen, erfassen Sie sie dauerhaft serverseitig — ideal für CSP-Rollouts und laufendes Monitoring. Reporting ist mit 4 von 166 Punkten im Wolf-Agents Web Security Check bewertet.
Auf Vercel setzen Sie Reporting-Endpoints per vercel.json und erstellen eine API Route als Report-Empfänger. Der Vorteil gegenüber externen Services: Ihre Reports bleiben auf Ihrer eigenen Infrastruktur — relevant für DSGVO-Compliance, da keine Violation-Daten an Drittanbieter fließen.
Tipp: Kombinieren Sie Reporting mit dem Wolf-Agents Web Security Check. Während der Check die statische Header-Konfiguration prüft, erfasst die Reporting API Violations im Produktivbetrieb — so erkennen Sie Probleme, die erst durch echte Nutzer-Interaktion entstehen.
Reporting-Endpoints per vercel.json
Setzen Sie den Reporting-Endpoints-Header in der vercel.json und verweisen Sie auf eine API Route als Empfänger. Verknüpfen Sie den Endpoint mit Ihrer CSP über die report-to-Direktive. Das Source-Pattern /(.*) stellt sicher, dass der Reporting-Header auf allen Seiten gesetzt wird — nicht nur auf statischen Seiten.
// vercel.json — Reporting-Endpoints
{
"headers": [
{
"source": "/(.*)",
"headers": [
{
"key": "Reporting-Endpoints",
"value": "csp-endpoint=\"/api/csp-report\""
},
{
"key": "Content-Security-Policy",
"value": "default-src 'self'; report-to csp-endpoint"
}
]
}
]
}report-to ist der moderne Standard (Reporting API v1). Das ältere report-uri wird von Safari noch benötigt. Für maximale Kompatibilität setzen Sie beide Direktiven in Ihrer CSP — report-uri als Fallback.
Report-Empfänger als API Route
Erstellen Sie eine API Route, die eingehende Reports entgegennimmt. In Next.js erstellen Sie eine POST-Handler-Funktion unter app/api/csp-report/route.ts. Die Route nimmt den JSON-Body entgegen und protokolliert ihn. In der Praxis speichern Sie die Reports in einer Datenbank oder leiten sie an einen Logging-Service weiter.
// app/api/csp-report/route.ts — Report-Empfänger
import { NextResponse } from 'next/server';
export async function POST(request: Request) {
const report = await request.json();
console.log('CSP Violation:', JSON.stringify(report));
// Optional: An Logging-Service weiterleiten
// await fetch('https://your-logging-service.com/csp', { ... });
return NextResponse.json({ received: true });
}Reporting verifizieren
Prüfen Sie den Reporting-Endpoints-Header mit curl und erzeugen Sie eine absichtliche CSP-Violation, um die Report-Zustellung zu testen. Öffnen Sie dazu die Browser DevTools und fügen Sie ein Inline-Script ein, das gegen Ihre CSP verstößt. Im Network-Tab sehen Sie dann den ausgehenden Report an Ihren Endpoint. Der Wolf-Agents Web Security Check erkennt konfigurierte Report-Endpoints automatisch.
# Reporting-Endpoints prüfen
curl -sI https://ihre-domain.de | grep -i reporting-endpoints
# Erwartete Ausgabe:
reporting-endpoints: csp-endpoint="/api/csp-report"
# CSP-Header mit report-to Direktive prüfen
curl -sI https://ihre-domain.de | grep -i content-security-policy
# Erwartete Ausgabe (Auszug):
content-security-policy: default-src 'self'; ... report-to csp-endpointHäufige Fehler
vercel.json-Header gelten nicht für API Routes
Der Reporting-Endpoints-Header aus vercel.json wird nicht an Serverless Functions unter /api/* gesendet. Setzen Sie den Header per Edge Middleware, wenn auch API-Responses Reports generieren sollen.
Report-Endpoint blockiert durch CSP
Wenn Ihre CSP connect-src restriktiv setzt, kann der Browser den Report nicht senden. Fügen Sie den Report-Endpoint zu connect-src hinzu oder verwenden Sie einen relativen Pfad.
Browser-Extensions erzeugen Noise
Browser-Extensions injizieren Scripts, die CSP-Violations auslösen. Filtern Sie Reports nach blocked-uri — Extensions verwenden chrome-extension:// oder moz-extension:// als Source.
Preview Deployment sendet Reports an Produktiv-Endpoint
Wenn Sie einen relativen Pfad wie /api/csp-report verwenden, sendet jedes Preview Deployment Reports an den eigenen Endpoint. Achten Sie auf unterschiedliche Datenbanken oder Logging-Ziele pro Environment.
Compliance-Relevanz
Reporting ist ein wichtiger Baustein für kontinuierliches Security-Monitoring. PCI DSS 4.0 fordert dokumentierte CSP-Implementierung mit Violation-Erfassung — die Reporting API liefert genau diese Nachweisbarkeit. NIS2 verlangt Prozesse zur Erkennung von Sicherheitsvorfällen. Der Wolf-Agents Web Security Check prüft, ob Report-Endpoints konfiguriert sind und ob die Reporting-Konfiguration korrekt mit der CSP verknüpft ist.
Wie steht Ihre Domain bei Reporting API?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.