test: update e2e app with new capabilites

- add req.nextUrl.origin to connect-src (makes reporting work for every domain)
- reporting endpoint with reporting type extraction and status codes

Author: nibtime

apps/e2e/pages/_middleware.ts

@@ -2,42 +2,40 @@ import {
   chain,
   nextSafe,
   strictDynamic,
-  reporting
+  reporting,
 } from "@next-safe/middleware";
 
 const isDev = process.env.NODE_ENV === "development";
+const reportOnly = !!process.env.CSP_REPORT_ONLY;
 
-const nextSafeMiddleware = nextSafe((req, res) => {
+const nextSafeMiddleware = nextSafe((req) => {
   return {
     isDev,
     contentSecurityPolicy: {
+      reportOnly,
       "style-src": `'unsafe-inline'`,
+      "connect-src": `'self' ${req.nextUrl.origin}`,
     },
     // customize as you need: https://trezy.gitbook.io/next-safe/usage/configuration
   };
 });
 
-const vercelUrl = process.env.VERCEL_URL
-const reportEndpoint = vercelUrl ? `https://${vercelUrl}/api/reporting` : ""
-
-const reportingMiddleware = reporting({
-  csp: {
-    reportUri: process.env.CSP_REPORT_URI || reportEndpoint || "https://example.com/csp-report-uri",
-    reportSample: true
-  },
-  reportTo: {
-    max_age: 1800,
-    endpoints: [
-      {
-        url: process.env.CSP_REPORT_TO || reportEndpoint || "https://example.com/reporting-api",
-      },
-    ],
-  },
-
+const reportingMiddleware = reporting((req) => {
+  const nextApiReportEndpoint = `${req.nextUrl.origin}/api/reporting`;
+  return {
+    csp: {
+      reportUri: process.env.CSP_REPORT_URI || nextApiReportEndpoint,
+      reportSample: true,
+    },
+    reportTo: {
+      max_age: 1800,
+      endpoints: [
+        {
+          url: process.env.REPORT_TO_ENDPOINT_DEFAULT || nextApiReportEndpoint,
+        },
+      ],
+    },
+  };
 });
 
-export default chain(
-  nextSafeMiddleware,
-  strictDynamic(),
-  reportingMiddleware
-);
+export default chain(nextSafeMiddleware, strictDynamic(), reportingMiddleware);

apps/e2e/pages/api/reporting.ts

@@ -1,7 +1,16 @@
-import type { NextApiHandler } from 'next';
+import type { NextApiHandler } from "next";
+import { extractReportingData } from "types/reporting";
 
 const handler: NextApiHandler = (req, res) => {
-    console.log('Reporting API data', { body: req.body, method: req.method })
-    res.status(200).json({ message: 'logged reporting data'})
-}
-export default handler;
+  const reportingData = extractReportingData(req.body);
+  if (reportingData) {
+    console.log(JSON.stringify(reportingData));
+    // Accepted: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/202
+    res.status(202).end();
+    return;
+  }
+  // Unprocessable Entity: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/422
+  res.status(422).end();
+};
+
+export default handler;

apps/e2e/types/reporting.ts

@@ -57,12 +57,12 @@ export type ReportingData = ReportToData | CspReportUriData;
 
 // TODO: find out what's required and what's optional
 export const isReportToItem = (x: any): x is ReportToItem => {
-  const requiredKeys = ["age", "type", "body"];
-  return (
-    typeof x === "object" &&
-    Object.keys(x).filter((key) => key in requiredKeys).length ===
-      requiredKeys.length
-  );
+  if (typeof x !== "object") {
+    return false;
+  }
+  const requiredKeys = ["type", "body"];
+  const itemKeys = Object.keys(x);
+  return requiredKeys.every((key) => itemKeys.includes(key));
 };
 
 export const isReportToPayload = (x: any): x is ReportToPayload => {
@@ -73,21 +73,43 @@ export const isCspReportUriPayload = (x: any): x is CspReportUriPayload => {
   return typeof x === "object" && !!x["csp-report"];
 };
 
-export const extractReportingData = (
-  data: unknown
-): ReportingData | undefined => {
-  if (isReportToPayload(data)) {
-    return {
-      kind: "report-to",
-      data,
-    };
+const maybeArr = (x: string) => x.startsWith("[");
+const maybeObj = (x: string) => x.startsWith("{");
+
+const deepJsonParse = (x: unknown) => {
+  if (typeof x === "string" && (maybeArr(x) || maybeObj(x))) {
+    try {
+      return JSON.parse(x);
+    } catch {
+      return x;
+    }
+  }
+  if (typeof x === "object") {
+    return Object.fromEntries(
+      Object.entries(x).map(([k, v]) => [k, deepJsonParse(v)])
+    );
+  }
+  if (Array.isArray(x)) {
+    return x.map(deepJsonParse);
   }
+  return x;
+};
+
+export const extractReportingData = (x: unknown): ReportingData | undefined => {
+  const data = deepJsonParse(x);
   if (isCspReportUriPayload(data)) {
     const kind = "csp-report";
     return {
       kind,
       data: data[kind],
     };
   }
+  if (isReportToPayload(data)) {
+    return {
+      kind: "report-to",
+      data,
+    };
+  }
+
   return undefined;
 };