@netlify/plugin-csp-nonce 1.0.1

package/README.md

@@ -0,0 +1,11 @@
+# @netlify/plugin-csp-nonce
+
+Use a nonce for the script-src and style-src directives of your Content Security Policy.
+
+This package deploys an edge function to add a header and transform the HTML response body, and a function to log CSP violations.
+
+## Configuration options
+
+- `reportOnly`: When true, uses the Content-Security-Policy-Report-Only header instead of the Content-Security-Policy header.
+- `path`: The glob expressions of path(s) that should invoke the CSP nonce edge function. Can be a string or array of strings.
+- `excludedPath`: The glob expressions of path(s) that _should not_ invoke the CSP nonce edge function. Must be an array of strings. This value gets spread with common non-html filetype extensions (_.css, _.js, \*.svg, etc)

package/index.js

@@ -0,0 +1,27 @@
+import fs, { copyFileSync } from "fs";
+
+/* eslint-disable no-console */
+export const onPreBuild = async ({ inputs, netlifyConfig, utils }) => {
+  console.log(`  Current working directory: ${process.cwd()}`);
+  const config = JSON.stringify(inputs, null, 2);
+
+  const functionsDir = netlifyConfig.build.functions || "./netlify/functions";
+  // make the directory in case it actually doesn't exist yet
+  await utils.run.command(`mkdir -p ${functionsDir}`);
+  console.log(`  Copying function to ${functionsDir}...`);
+  copyFileSync(
+    `./src/__csp-violations.ts`,
+    `${functionsDir}/__csp-violations.ts`
+  );
+
+  const edgeFunctionsDir =
+    netlifyConfig.build.edge_functions || "./netlify/edge-functions";
+  // make the directory in case it actually doesn't exist yet
+  await utils.run.command(`mkdir -p ${edgeFunctionsDir}`);
+  console.log(`  Copying edge function to ${edgeFunctionsDir}...`);
+  copyFileSync(`./src/__csp-nonce.ts`, `${edgeFunctionsDir}/__csp-nonce.ts`);
+  console.log(`  Copying config inputs to ${edgeFunctionsDir}...`);
+  fs.writeFileSync(`${edgeFunctionsDir}/__csp-nonce-inputs.json`, config);
+
+  console.log(`  Complete.`);
+};

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@netlify/plugin-csp-nonce",
+  "version": "1.0.1",
+  "description": "Use a nonce for the script-src and style-src directives of your Content Security Policy.",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/netlify/csp-nonce.git"
+  },
+  "author": "Jason Barry <jb@netlify.com>",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "index.js",
+    "manifest.yaml",
+    "src/*"
+  ],
+  "devDependencies": {
+    "prettier": "^2.8.8"
+  },
+  "bugs": {
+    "url": "https://github.com/netlify/csp-nonce/issues"
+  },
+  "homepage": "https://github.com/netlify/csp-nonce#readme",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/src/__csp-nonce-inputs.json

@@ -0,0 +1,5 @@
+{
+  "reportOnly": false,
+  "path": "/*",
+  "excludedPath": []
+}

package/src/__csp-nonce.ts

@@ -0,0 +1,145 @@
+/* eslint-disable import/extensions */
+/* eslint-disable import/no-unresolved */
+// @ts-expect-error
+import { cryptoRandomString } from "https://deno.land/x/crypto_random_string@1.0.0/mod.ts";
+// @ts-expect-error
+import type { Config, Context } from "netlify:edge";
+
+import inputs from "./__csp-nonce-inputs.json" assert { type: "json" };
+
+type Params = {
+  reportOnly: boolean;
+  path: string | string[];
+  excludedPath: string[];
+};
+const params = inputs as Params;
+
+const header = params.reportOnly
+  ? "content-security-policy-report-only"
+  : "content-security-policy";
+
+const handler = async (request: Request, context: Context) => {
+  const response = await context.next();
+
+  // for debugging which routes use this edge function
+  response.headers.set("x-debug-csp-nonce", "invoked");
+
+  // html only
+  if (
+    !request.headers.get("accept")?.startsWith("text/html") ||
+    !response.headers.get("content-type").startsWith("text/html")
+  ) {
+    return response;
+  }
+
+  const nonce = cryptoRandomString({ length: 16, type: "alphanumeric" });
+  // `'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' 'self' https: http:`;
+  const scriptSrc = `script-src ${rules}`;
+  const styleSrc = `style-src ${rules}`;
+  const reportUri = `report-uri /.netlify/functions/__csp-violations`;
+
+  const csp = response.headers.get(header);
+  if (csp) {
+    const directives = csp
+      .split(";")
+      .map((directive) => {
+        // prepend our rules for any existing directives
+        const d = directive.trim();
+        if (d.startsWith("script-src")) {
+          return d.replace("script-src", scriptSrc);
+        }
+        if (d.startsWith("style-src")) {
+          return d.replace("style-src", styleSrc);
+        }
+        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("style-src"))) {
+      directives.push(styleSrc);
+    }
+    const value = directives.join("; ");
+    response.headers.set(header, value);
+  } else {
+    // make a new ruleset of directives if no CSP present
+    const value = [scriptSrc, styleSrc, reportUri].join("; ");
+    response.headers.set(header, value);
+  }
+
+  // time to do some regex magic
+  const page = await response.text();
+  const rewrittenPage = page.replace(
+    /<(script|style)([^>]*)>/gi,
+    `<$1$2 nonce="${nonce}">`
+  );
+  return new Response(rewrittenPage, response);
+};
+
+const excludedExtensions = [
+  "aspx",
+  "avif",
+  "babylon",
+  "bak",
+  "cgi",
+  "com",
+  "css",
+  "ds",
+  "env",
+  "gif",
+  "gz",
+  "ico",
+  "ini",
+  "jpeg",
+  "jpg",
+  "js",
+  "json",
+  "jsp",
+  "log",
+  "m4a",
+  "map",
+  "md",
+  "mjs",
+  "mp3",
+  "mp4",
+  "ogg",
+  "otf",
+  "pdf",
+  "php",
+  "png",
+  "rar",
+  "sh",
+  "sql",
+  "svg",
+  "ttf",
+  "txt",
+  "wasm",
+  "wav",
+  "webm",
+  "webmanifest",
+  "webp",
+  "woff",
+  "woff2",
+  "xml",
+  "xsd",
+  "yaml",
+  "yml",
+  "zip",
+];
+
+export const config: Config = {
+  path: params.path,
+  excludedPath: [
+    ...params.excludedPath,
+    ...excludedExtensions.map((ext) => `**/*.${ext}`),
+  ],
+  handler,
+};
+
+export default handler;

package/src/__csp-violations.ts

@@ -0,0 +1,16 @@
+const handler = async (event) => {
+  try {
+    const { "csp-report": cspReport } = JSON.parse(event.body);
+    if (cspReport) {
+      // eslint-disable-next-line no-console
+      console.log(JSON.stringify(cspReport));
+    }
+  } catch (err) {
+    // ...the sound of silence
+  }
+  return {
+    statusCode: 200,
+  };
+};
+
+export { handler };