CSP report endpoint generator

Generate a working report-to / Reporting-Endpoints header plus sample wiring for Next.js, Express, and Cloudflare Workers.

The modern way to receive Content-Security-Policy violations is the Reporting-Endpoints header plus a report-to directive. Older browsers still honour the deprecated report-uri directive, so most sites ship both. This tool prints both headers, a CSP that wires them up, and a working route handler for whichever runtime you use — ready to paste in.

Endpoint URL

Endpoint group name

Report-only mode(sends violations without blocking)Include legacy report-uri

Generated headers

paste into your edge / origin

Reporting-Endpoints: csp-endpoint="https://your-app.example.com/api/csp-report"

Report-To: {"group":"csp-endpoint","max_age":10886400,"endpoints":[{"url":"https://your-app.example.com/api/csp-report"}]}

Content-Security-Policy: default-src 'self'; report-to csp-endpoint; report-uri https://your-app.example.com/api/csp-report

Sample server wiring

Set the headers

// middleware.ts
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(_req: NextRequest) {
  const res = NextResponse.next();
  res.headers.set("Reporting-Endpoints", `csp-endpoint="https://your-app.example.com/api/csp-report"`);
  res.headers.set("Report-To", `{"group":"csp-endpoint","max_age":10886400,"endpoints":[{"url":"https://your-app.example.com/api/csp-report"}]}`);
  res.headers.set(
    "Content-Security-Policy",
    "default-src 'self'; report-to csp-endpoint; report-uri https://your-app.example.com/api/csp-report",
  );
  return res;
}

export const config = { matcher: "/:path*" };

Receive violation reports

// app/api/csp-report/route.ts
import { NextResponse } from "next/server";

export async function POST(req: Request) {
  const ct = req.headers.get("content-type") || "";
  let body: unknown = null;
  try {
    body = await req.json();
  } catch {
    body = await req.text();
  }
  // Both content-types arrive here:
  //  - application/csp-report  (legacy)
  //  - application/reports+json (modern, an array)
  console.log(JSON.stringify({
    type: "csp-violation",
    contentType: ct,
    body,
  }));
  return NextResponse.json({ ok: true }, { status: 204 });
}

export const runtime = "edge"; // optional

Tip

If you're using GlitchReplay, point the endpoint at your project's CSP report URL — we'll classify each violation as attack pattern vs misconfiguration and link it back to the affected session replay. Otherwise, our CSP violation decoder can help you read what comes in.

Want this on every error automatically?

GlitchReplay does this on every event you capture. Sentry-SDK compatible, flat-rate pricing, session replay included — built on Cloudflare so a bad deploy will never blow up your bill.

Get started — free Read the docs