@netlify/plugin-csp-nonce 1.2.0 → 1.2.2

package/README.md

@@ -97,10 +97,10 @@ If your HTML does not contain the `nonce` attribute on the `<script>` tags that
 
 You may want to gradually rollout the effects of this plugin while you monitor violation reports, without modifying code.
 
-You can ramp up or ramp down the inclusion of the headers this plugin enforces by setting the `CSP_NONCE_DISTRIBUTION` environment variable to a value between `0` and `1`.
+You can ramp up or ramp down the inclusion of the `Content-Security-Policy` header by setting the `CSP_NONCE_DISTRIBUTION` environment variable to a value between `0` and `1`.
 
 - If `0`, the plugin is completely skipped at build time, and no extra functions or edge functions get deployed. Functionally, this acts the same as if the plugin isn't installed at all.
 - If `1`, 100% of traffic for all matching paths will include the nonce. Functionally, this acts the same as if the `CSP_NONCE_DISTRIBUTION` environment variable was not defined.
-- Any value in between `0` and `1` will include the nonce in randomly distributed traffic. For example, a value of `0.25` will include the nonce 25% of the time for matching paths.
+- Any value in between `0` and `1` will include the nonce in randomly distributed traffic. For example, a value of `0.25` will put the nonce in the `Content-Security-Policy` header 25% of requests for matching paths. The other 75% of matching requests will have the nonce in the `Content-Security-Policy-Report-Only` header.
 
 The `CSP_NONCE_DISTRIBUTION` environment variable needs to be scoped to both `Builds` and `Functions`.

package/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@netlify/plugin-csp-nonce",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Use a nonce for the script-src and style-src directives of your Content Security Policy.",
   "main": "index.js",
   "repository": {

package/src/__csp-nonce.ts

@@ -3,6 +3,8 @@
 import type { Config, Context } from "netlify:edge";
 // @ts-expect-error
 import { randomBytes } from "node:crypto";
+// @ts-expect-error
+import { HTMLRewriter } from "https://ghuc.cc/worker-tools/html-rewriter@0.1.0-pre.17/index.ts";
 
 import inputs from "./__csp-nonce-inputs.json" assert { type: "json" };
 
@@ -15,12 +17,12 @@ type Params = {
 };
 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();
+  const response = await context.next(request);
+
+  let header = params.reportOnly
+    ? "content-security-policy-report-only"
+    : "content-security-policy";
 
   // for debugging which routes use this edge function
   response.headers.set("x-debug-csp-nonce", "invoked");
@@ -48,10 +50,16 @@ const handler = async (request: Request, context: Context) => {
       distribution.endsWith("%") || parseFloat(distribution) > 1
         ? Math.max(parseFloat(distribution) / 100, 0)
         : Math.max(parseFloat(distribution), 0);
-    // if a roll of the dice is greater than our threshold, skip
     const random = Math.random();
+    // if a roll of the dice is greater than our threshold...
     if (random > threshold && threshold <= 1) {
-      return response;
+      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;
+      }
     }
   }
 
@@ -103,13 +111,13 @@ const handler = async (request: Request, context: Context) => {
     response.headers.set(header, value);
   }
 
-  // time to do some regex magic
-  const page = await response.text();
-  const rewrittenPage = page.replace(
-    /<script([^>]*)>/gi,
-    `<script$1 nonce="${nonce}">`
-  );
-  return new Response(rewrittenPage, response);
+  return new HTMLRewriter()
+    .on("script", {
+      element(element) {
+        element.setAttribute("nonce", nonce);
+      },
+    })
+    .transform(response);
 };
 
 // Top 50 most common extensions (minus .html and .htm) according to Humio
@@ -169,7 +177,7 @@ export const config: Config = {
   excludedPath: [
     ...params.excludedPath,
     "/.netlify/*",
-    ...excludedExtensions.map((ext) => `**/*.${ext}`),
+    `**/*.(${excludedExtensions.join("|")})`,
   ],
   handler,
   onError: "bypass",