@netlify/plugin-csp-nonce 1.1.4 → 1.2.1

package/README.md

@@ -90,12 +90,17 @@ Also, monitor the edge function logs in the Netlify UI. If the edge function is
 If your HTML does not contain the `nonce` attribute on the `<script>` tags that you expect, ensure that all of these criteria are met:
 
 - The request method is `GET`
-- The `accept` request header starts with `text/html`, or the `user-agent` request header starts with `curl/`
 - The `content-type` response header starts with `text/html`
 - The path of the request is satisfied by the `path` config option, and not included in the `excludedPath` config option
 
-### Quickly enabling and disabling
+### Controlling rollout
 
-You may want to quickly enable/disable the plugin while monitoring violation reports. You can do so without modifying code.
+You may want to gradually rollout the effects of this plugin while you monitor violation reports, without modifying code.
 
-Simply set the `DISABLE_CSP_NONCE` environment variable to `true`, and your next deploy will skip running the plugin. Setting to `false` will re-enable the plugin. The environment variable needs to be scoped to `Builds`.
+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 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/index.js

@@ -7,11 +7,28 @@ export const onPreBuild = async ({ inputs, netlifyConfig, utils }) => {
   const config = JSON.stringify(inputs, null, 2);
   const { build } = netlifyConfig;
 
+  // DISABLE_CSP_NONCE is undocumented (deprecated), but still supported
+  // -> superseded by CSP_NONCE_DISTRIBUTION
   if (build.environment.DISABLE_CSP_NONCE === "true") {
     console.log(`  DISABLE_CSP_NONCE environment variable is true, skipping.`);
     return;
   }
 
+  // CSP_NONCE_DISTRIBUTION is a number from 0 to 1,
+  // but 0 to 100 is also supported, along with a trailing %
+  const distribution = build.environment.CSP_NONCE_DISTRIBUTION;
+  if (!!distribution) {
+    const threshold =
+      distribution.endsWith("%") || parseFloat(distribution) > 1
+        ? Math.max(parseFloat(distribution) / 100, 0)
+        : Math.max(parseFloat(distribution), 0);
+    console.log(`  CSP_NONCE_DISTRIBUTION is set to ${threshold * 100}%`);
+    if (threshold === 0) {
+      console.log(`  Skipping.`);
+      return;
+    }
+  }
+
   console.log(`  Current working directory: ${process.cwd()}`);
   const basePath =
     build.environment.SITE_ID === SITE_ID

package/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@netlify/plugin-csp-nonce",
-  "version": "1.1.4",
+  "version": "1.2.1",
   "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

@@ -15,36 +15,52 @@ 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();
 
+  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");
 
-  // html/curl GETs only
+  // html GETs only
   const isGET = request.method?.toUpperCase() === "GET";
-  const isCurl = request.headers.get("user-agent")?.startsWith("curl/");
-  const isHTMLRequest =
-    request.headers.get("accept")?.includes("text/html") ||
-    request.headers.get("sec-fetch-dest") === "document" ||
-    isCurl;
   const isHTMLResponse = response.headers
     .get("content-type")
     ?.startsWith("text/html");
-  const shouldTransformResponse = isGET && isHTMLRequest && isHTMLResponse;
+  const shouldTransformResponse = isGET && isHTMLResponse;
   if (!shouldTransformResponse) {
     console.log(`Unnecessary invocation for ${request.url}`, {
       method: request.method,
-      accept: request.headers.get("accept"),
       "content-type": response.headers.get("content-type"),
     });
     return response;
   }
 
+  // CSP_NONCE_DISTRIBUTION is a number from 0 to 1,
+  // but 0 to 100 is also supported, along with a trailing %
+  // @ts-expect-error
+  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