@netlify/plugin-csp-nonce 1.2.13 → 1.3.1-alpha.1

package/index.js

@@ -1,7 +1,19 @@
 /* eslint-disable no-console */
-import fs, { copyFileSync } from "fs";
+import fs, { copyFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from 'node:url'
+import { getBuildInfo } from "@netlify/build-info/node";
 
-const SITE_ID = "321a7119-6008-49a8-9d2f-e20602b1b349";
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+async function projectUsesNextJS() {
+  for (const framework of (await getBuildInfo()).frameworks) {
+    if (framework.id === "next") {
+      return true;
+    }
+  }
+  return false;
+}
 
 export const onPreBuild = async ({
   inputs,
@@ -9,7 +21,6 @@ export const onPreBuild = async ({
   utils,
   constants,
 }) => {
-  const config = JSON.stringify(inputs, null, 2);
   const { build } = netlifyConfig;
 
   const { INTERNAL_EDGE_FUNCTIONS_SRC, INTERNAL_FUNCTIONS_SRC } = constants;
@@ -37,23 +48,30 @@ export const onPreBuild = async ({
   }
 
   console.log(`  Current working directory: ${process.cwd()}`);
-  const basePath =
-    build.environment.SITE_ID === SITE_ID
-      ? "./src"
-      : "./node_modules/@netlify/plugin-csp-nonce/src";
 
   // make the directory in case it actually doesn't exist yet
   await utils.run.command(`mkdir -p ${INTERNAL_EDGE_FUNCTIONS_SRC}`);
   console.log(
-    `  Writing nonce edge function to ${INTERNAL_EDGE_FUNCTIONS_SRC}...`,
+    `  Writing nonce edge function to ${INTERNAL_EDGE_FUNCTIONS_SRC}...`
   );
   copyFileSync(
-    `${basePath}/__csp-nonce.ts`,
-    `${INTERNAL_EDGE_FUNCTIONS_SRC}/__csp-nonce.ts`,
+    resolve(__dirname, `./src/__csp-nonce.ts`),
+    `${INTERNAL_EDGE_FUNCTIONS_SRC}/__csp-nonce.ts`
   );
+
+  const usesNext = await projectUsesNextJS();
+
+  // Do not invoke the CSP Edge Function for Netlify Image CDN requests.
+  inputs.excludedPath.push("/.netlify/images");
+
+  // If using NextJS, do not invoke the CSP Edge Function for NextJS Image requests.
+  if (usesNext) {
+    inputs.excludedPath.push("/_next/image");
+  }
+
   fs.writeFileSync(
     `${INTERNAL_EDGE_FUNCTIONS_SRC}/__csp-nonce-inputs.json`,
-    config,
+    JSON.stringify(inputs, null, 2)
   );
 
   // if no reportUri in config input, deploy function on site's behalf
@@ -61,11 +79,11 @@ export const onPreBuild = async ({
     // make the directory in case it actually doesn't exist yet
     await utils.run.command(`mkdir -p ${INTERNAL_FUNCTIONS_SRC}`);
     console.log(
-      `  Writing violations logging function to ${INTERNAL_FUNCTIONS_SRC}...`,
+      `  Writing violations logging function to ${INTERNAL_FUNCTIONS_SRC}...`
     );
     copyFileSync(
-      `${basePath}/__csp-violations.ts`,
-      `${INTERNAL_FUNCTIONS_SRC}/__csp-violations.ts`,
+      resolve(__dirname, `./src/__csp-violations.ts`),
+      `${INTERNAL_FUNCTIONS_SRC}/__csp-violations.ts`
     );
   } else {
     console.log(`  Using ${inputs.reportUri} as report-uri directive...`);
@@ -73,3 +91,5 @@ export const onPreBuild = async ({
 
   console.log(`  Done.`);
 };
+
+export const onPreDev = onPreBuild;

package/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@netlify/plugin-csp-nonce",
-  "version": "1.2.13",
+  "version": "1.3.1-alpha.1",
   "description": "Use a nonce for the script-src and style-src directives of your Content Security Policy.",
   "main": "index.js",
   "repository": {
@@ -17,14 +17,25 @@
     "src/*"
   ],
   "devDependencies": {
+    "@types/node": "^22.9.0",
+    "cheerio": "^1.0.0",
+    "content-security-policy-parser": "^0.6.0",
+    "execa": "^9.5.1",
+    "get-port": "^7.1.0",
     "prettier": "^2.8.8",
-    "typescript": "^5.2.2"
+    "strip-ansi": "^7.1.0",
+    "typescript": "^5.2.2",
+    "vitest": "^2.1.4"
   },
   "bugs": {
     "url": "https://github.com/netlify/plugin-csp-nonce/issues"
   },
   "homepage": "https://github.com/netlify/plugin-csp-nonce#readme",
   "scripts": {
-    "build": "tsc src/*.ts --noEmit --strict --lib es2018,dom"
+    "build": "tsc src/*.ts --noEmit --strict --lib es2018,dom",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "@netlify/build-info": "^7.15.2"
   }
 }

package/src/__csp-nonce.ts

@@ -2,10 +2,7 @@
 // @ts-ignore
 import type { Config, Context } from "netlify:edge";
 // @ts-ignore
-import { randomBytes } from "node:crypto";
-// @ts-ignore
-import { HTMLRewriter } from "https://ghuc.cc/worker-tools/html-rewriter@0.1.0-pre.19/index.ts";
-
+import { csp } from "https://deno.land/x/csp_nonce_html_transformer@v2.1.1/src/index.ts";
 // @ts-ignore
 import inputs from "./__csp-nonce-inputs.json" assert { type: "json" };
 
@@ -15,109 +12,30 @@ type Params = {
   unsafeEval: boolean;
   path: string | string[];
   excludedPath: string[];
+  distribution?: string;
+  strictDynamic?: boolean;
+  unsafeInline?: boolean;
+  self?: boolean;
+  https?: boolean;
+  http?: boolean;
 };
 const params = inputs as Params;
+params.reportUri = params.reportUri || "/.netlify/functions/__csp-violations";
+// @ts-ignore
+params.distribution = Netlify.env.get("CSP_NONCE_DISTRIBUTION");
+
+params.strictDynamic = true;
+params.unsafeInline = true;
+params.self = true;
+params.https = true;
+params.http = true;
 
 const handler = async (request: Request, context: Context) => {
   const response = await context.next(request);
 
   // for debugging which routes use this edge function
   response.headers.set("x-debug-csp-nonce", "invoked");
-
-  const isHTMLResponse = response.headers.get("content-type") === "text/html";
-  if (!isHTMLResponse) {
-    console.log(`Unnecessary invocation for ${request.url}`, {
-      method: request.method,
-      "content-type": response.headers.get("content-type"),
-    });
-    return response;
-  }
-
-  let header = params.reportOnly
-    ? "content-security-policy-report-only"
-    : "content-security-policy";
-
-  // CSP_NONCE_DISTRIBUTION is a number from 0 to 1,
-  // but 0 to 100 is also supported, along with a trailing %
-  // @ts-ignore
-  const distribution = Netlify.env.get("CSP_NONCE_DISTRIBUTION");
-  if (!!distribution) {
-    const threshold =
-      distribution.endsWith("%") || parseFloat(distribution) > 1
-        ? Math.max(parseFloat(distribution) / 100, 0)
-        : Math.max(parseFloat(distribution), 0);
-    const random = Math.random();
-    // if a roll of the dice is greater than our threshold...
-    if (random > threshold && threshold <= 1) {
-      if (header === "content-security-policy") {
-        // if the real CSP is set, then change to report only
-        header = "content-security-policy-report-only";
-      } else {
-        // if the CSP is set to report-only, return unadulterated response
-        return response;
-      }
-    }
-  }
-
-  const nonce = randomBytes(24).toString("base64");
-  // `'strict-dynamic'` allows scripts to be loaded from trusted scripts
-  // when `'strict-dynamic'` is present, `'unsafe-inline' 'self' https: http:` is ignored by browsers
-  // `'unsafe-inline' 'self' https: http:` is a compat check for browsers that don't support `strict-dynamic`
-  // https://content-security-policy.com/strict-dynamic/
-  const rules = [
-    `'nonce-${nonce}'`,
-    `'strict-dynamic'`,
-    `'unsafe-inline'`,
-    params.unsafeEval && `'unsafe-eval'`,
-    `'self'`,
-    `https:`,
-    `http:`,
-  ].filter(Boolean);
-  const scriptSrc = `script-src ${rules.join(" ")}`;
-  const reportUri = `report-uri ${
-    params.reportUri || "/.netlify/functions/__csp-violations"
-  }`;
-
-  const csp = response.headers.get(header) as string;
-  if (csp) {
-    const directives = csp
-      .split(";")
-      .map((directive) => {
-        // prepend our rules for any existing directives
-        const d = directive.trim();
-        // intentionally add trailing space to avoid mangling `script-src-elem`
-        if (d.startsWith("script-src ")) {
-          // append with trailing space to include any user-supplied values
-          // https://github.com/netlify/plugin-csp-nonce/issues/72
-          return d.replace("script-src ", `${scriptSrc} `).trim();
-        }
-        // intentionally omit report-uri: theirs should take precedence
-        return d;
-      })
-      .filter(Boolean);
-    // push our rules if the directives don't exist yet
-    if (!directives.find((d) => d.startsWith("script-src "))) {
-      directives.push(scriptSrc);
-    }
-    if (!directives.find((d) => d.startsWith("report-uri"))) {
-      directives.push(reportUri);
-    }
-    const value = directives.join("; ");
-    response.headers.set(header, value);
-  } else {
-    // make a new ruleset of directives if no CSP present
-    const value = [scriptSrc, reportUri].join("; ");
-    response.headers.set(header, value);
-  }
-
-  const querySelectors = ["script", 'link[rel="preload"][as="script"]'];
-  return new HTMLRewriter()
-    .on(querySelectors.join(","), {
-      element(element: HTMLElement) {
-        element.setAttribute("nonce", nonce);
-      },
-    })
-    .transform(response);
+  return csp(response, params)
 };
 
 // Top 50 most common extensions (minus .html and .htm) according to Humio
@@ -175,8 +93,8 @@ const excludedExtensions = [
 export const config: Config = {
   path: params.path,
   excludedPath: ["/.netlify*", `**/*.(${excludedExtensions.join("|")})`]
-  .concat(params.excludedPath)
-  .filter(Boolean),
+    .concat(params.excludedPath)
+    .filter(Boolean),
   handler,
   onError: "bypass",
   method: "GET",