fix: replace assert syntax to be forwards compatible (#133)

* fix: replace assert syntax with eval to be forwards compatible

* test: update syntax to new cli output

* chore: auto format test file

* chore: ts ignore annotations and cleanup

* chore: inline comment explaining approach

Author: mrstork

src/__csp-nonce.ts

@@ -1,10 +1,16 @@
-/* eslint-disable */
-// @ts-ignore
+// @ts-ignore cannot find module
 import type { Config, Context } from "netlify:edge";
-// @ts-ignore
+// @ts-ignore cannot find module
 import { csp } from "https://deno.land/x/[email protected]/src/index-embedded-wasm.ts";
-// @ts-ignore
-import inputs from "./__csp-nonce-inputs.json" assert { type: "json" };
+
+// Using `import ... with ...` syntax directly fails due to the node 18 type-checking we're running on this file,
+// but this syntax works fine in deno 1.46.3 and 2.x which is what the functions are bundled and run with.
+// We're able to sneak by the node syntax issues by using this `await import(...)` syntax instead of a direct import statement.
+// @ts-ignore top-level await
+const { default: inputs } = await import("./__csp-nonce-inputs.json", {
+  // @ts-ignore 'with' syntax
+  with: { type: "json" },
+});
 
 type Params = {
   reportOnly: boolean;
@@ -21,7 +27,7 @@ type Params = {
 };
 const params = inputs as Params;
 params.reportUri = params.reportUri || "/.netlify/functions/__csp-violations";
-// @ts-ignore
+// @ts-ignore Netlify
 params.distribution = Netlify.env.get("CSP_NONCE_DISTRIBUTION");
 
 params.strictDynamic = params.strictDynamic ?? true;

src/__csp-violations.ts

@@ -1,12 +1,11 @@
-/* eslint-disable */
-// @ts-ignore
+// @ts-ignore async missing await
 const handler = async (event) => {
   try {
     const { "csp-report": cspReport } = JSON.parse(event.body);
     if (cspReport) {
       console.log(JSON.stringify(cspReport));
     }
-  } catch (err) {
+  } catch {
     // ...the sound of silence
   }
   return {

tests/integration/helpers.ts

@@ -50,15 +50,15 @@ export const serve = async ({
 
         if (
           message.includes(
-            `◈ Server now ready on http://localhost:${port.toString()}`
+            `Local dev server ready: http://localhost:${port.toString()}`
           )
         ) {
           hasServerStarted = true;
         }
 
-        if (message.includes("◈ Loaded edge function ")) {
+        if (message.includes("Loaded edge function ")) {
           const match =
-            /◈ Loaded edge function (?<name>[\w-]+)/.exec(message)?.groups
+            /Loaded edge function (?<name>[\w-]+)/.exec(message)?.groups
               ?.name ?? null;
 
           if (match !== null && functionsReady.has(match)) {

tests/integration/test.test.ts

@@ -5,9 +5,21 @@ import { readFile } from "node:fs/promises";
 import { afterAll, beforeAll, expect, it, describe, beforeEach } from "vitest";
 import { serve } from "./helpers";
 
-
 function isCheerioAPIShape(val) {
-  const props = ['contains', 'extract', 'html', 'merge', 'parseHTML', 'root', 'text', 'xml', 'load', '_root', '_options', 'fn'];
+  const props = [
+    "contains",
+    "extract",
+    "html",
+    "merge",
+    "parseHTML",
+    "root",
+    "text",
+    "xml",
+    "load",
+    "_root",
+    "_options",
+    "fn",
+  ];
   for (const prop of props) {
     if (!Object.hasOwn(val, prop)) {
       return false;
@@ -17,16 +29,18 @@ function isCheerioAPIShape(val) {
 }
 expect.addSnapshotSerializer({
   serialize($, config, indentation, depth, refs, printer) {
-    const elements = $('script[nonce]:not([nonce=""]),link[rel="preload"][as="script"][nonce]:not([nonce=""])');
+    const elements = $(
+      'script[nonce]:not([nonce=""]),link[rel="preload"][as="script"][nonce]:not([nonce=""])'
+    );
     for (const element of elements) {
-      element.attribs.nonce = "<placeholder_for_snapshop_test>"
+      element.attribs.nonce = "<placeholder_for_snapshop_test>";
     }
-    return $.html()
+    return $.html();
   },
   test(val) {
-    return isCheerioAPIShape(val)
+    return isCheerioAPIShape(val);
   },
-})
+});
 
 let baseURL: string;
 
@@ -39,7 +53,7 @@ beforeAll(async () => {
 });
 
 afterAll(async () => {
-  await cleanup()
+  await cleanup();
 });
 
 describe("GET /", function () {
@@ -122,16 +136,16 @@ describe("GET /", function () {
         ?.find((v) => v.startsWith("'nonce-"))
         ?.slice("'nonce-".length, -1)!;
 
-      const elements = $("link[rel=\"preload\"][as=\"script\"]");
+      const elements = $('link[rel="preload"][as="script"]');
       for (const element of elements) {
         expect(element.attribs.nonce).to.eql(nonce);
       }
     });
   });
 
-  it('html snapshot with filtered nonce', async () => {
-    expect(cheerio.load(await response.text())).toMatchSnapshot()
-  })
+  it("html snapshot with filtered nonce", async () => {
+    expect(cheerio.load(await response.text())).toMatchSnapshot();
+  });
 });
 
 describe("POST /", function () {
@@ -141,11 +155,11 @@ describe("POST /", function () {
       method: "POST",
     });
   });
-  
+
   it("__csp-nonce edge function was not invoked", () => {
     expect(response.headers.has("x-debug-csp-nonce")).to.eql(false);
   });
-  
+
   it("responds with original content-security-policy header", () => {
     expect(response.headers.get("content-security-policy")).to.eql(
       "img-src 'self' blob: data:; script-src 'sha256-/Cb4VxgL2aVP0MVDvbP0DgEOUv+MeNQmZX4yXHkn/c0='"
@@ -158,74 +172,75 @@ describe("GET /main.css", function () {
   beforeAll(async () => {
     response = await fetch(new URL(`/main.css`, baseURL));
   });
-  
+
   it("__csp-nonce edge function was not invoked", () => {
     expect(response.headers.has("x-debug-csp-nonce")).to.eql(false);
   });
-  
+
   it("responds with a 200 status", () => {
     expect(response.status).to.eql(200);
   });
-  
+
   it("responds without a content-security-policy header", () => {
     expect(response.headers.has("content-security-policy")).to.eql(false);
   });
 });
 
-
 describe("Origin response has non-html content-type", () => {
   let response: Response;
   beforeAll(async () => {
     response = await fetch(new URL(`/hello`, baseURL));
   });
-  
+
   it("__csp-nonce edge function was invoked", () => {
     expect(response.headers.get("x-debug-csp-nonce")).to.eql("invoked");
   });
-  
+
   it("responds with a 200 status", () => {
     expect(response.status).to.eql(200);
   });
-  
+
   it("responds without a content-security-policy header", () => {
     expect(response.headers.has("content-security-policy")).to.eql(false);
   });
-  
+
   describe("body", () => {
     it("has has the original response body unmodified", async () => {
-      const actual = Buffer.from(await response.arrayBuffer())
-      const expected = await readFile(new URL("../../site/hello", import.meta.url))
-      expect(actual).to.eql(expected)
+      const actual = Buffer.from(await response.arrayBuffer());
+      const expected = await readFile(
+        new URL("../../site/hello", import.meta.url)
+      );
+      expect(actual).to.eql(expected);
     });
   });
-})
+});
 
 describe("Origin response has html content-type but binary contents in body", () => {
   let response: Response;
   beforeAll(async () => {
     response = await fetch(new URL(`/i-am-really-a-png-file.html`, baseURL));
   });
-  
+
   it("__csp-nonce edge function was invoked", () => {
     expect(response.headers.get("x-debug-csp-nonce")).to.eql("invoked");
   });
-  
+
   it("responds with a 200 status", () => {
     expect(response.status).to.eql(200);
   });
-  
+
   it("responds with a content-security-policy header", () => {
     expect(response.headers.has("content-security-policy")).to.eql(true);
   });
-  
+
   describe("content-security-policy header", () => {
     let csp: Map<string, string[]>;
     beforeAll(async () => {
       csp = parseContentSecurityPolicy(
         response.headers.get("content-security-policy") || ""
       );
     });
-    
+
     it("has correct img-src directive", () => {
       expect(csp.get("img-src")).to.eql(["'self'", "blob:", "data:"]);
     });
@@ -249,42 +264,44 @@ describe("Origin response has html content-type but binary contents in body", ()
       ]);
     });
   });
-  
+
   describe("body", () => {
     it("has has the original response body unmodified", async () => {
-      const actual = Buffer.from(await response.arrayBuffer())
-      const expected = await readFile(new URL("../../site/i-am-really-a-png-file.html", import.meta.url))
-      expect(actual).to.eql(expected)
+      const actual = Buffer.from(await response.arrayBuffer());
+      const expected = await readFile(
+        new URL("../../site/i-am-really-a-png-file.html", import.meta.url)
+      );
+      expect(actual).to.eql(expected);
     });
   });
-})
+});
 
 describe("Origin response has html content-type but non-html text contents in body", () => {
   let response: Response;
   beforeAll(async () => {
     response = await fetch(new URL(`/i-am-really-a-json-file.html`, baseURL));
   }, 15000);
-  
+
   it("__csp-nonce edge function was invoked", () => {
     expect(response.headers.get("x-debug-csp-nonce")).to.eql("invoked");
   });
-  
+
   it("responds with a 200 status", () => {
     expect(response.status).to.eql(200);
   });
-  
+
   it("responds with a content-security-policy header", () => {
     expect(response.headers.has("content-security-policy")).to.eql(true);
   });
-  
+
   describe("content-security-policy header", () => {
     let csp: Map<string, string[]>;
     beforeAll(async () => {
       csp = parseContentSecurityPolicy(
         response.headers.get("content-security-policy") || ""
       );
     });
-    
+
     it("has correct img-src directive", () => {
       expect(csp.get("img-src")).to.eql(["'self'", "blob:", "data:"]);
     });
@@ -308,15 +325,17 @@ describe("Origin response has html content-type but non-html text contents in bo
       ]);
     });
   });
-  
+
   describe("body", () => {
     it("has has the original response body unmodified", async () => {
-      const actual = Buffer.from(await response.arrayBuffer())
-      const expected = await readFile(new URL("../../site/i-am-really-a-json-file.html", import.meta.url))
-      expect(actual).to.eql(expected)
+      const actual = Buffer.from(await response.arrayBuffer());
+      const expected = await readFile(
+        new URL("../../site/i-am-really-a-json-file.html", import.meta.url)
+      );
+      expect(actual).to.eql(expected);
     });
   });
-})
+});
 
 // Really large HTML file
 describe("GET /whatwg", function () {
@@ -393,14 +412,14 @@ describe("GET /whatwg", function () {
         ?.find((v) => v.startsWith("'nonce-"))
         ?.slice("'nonce-".length, -1)!;
 
-      const elements = $("link[rel=\"preload\"][as=\"script\"]");
+      const elements = $('link[rel="preload"][as="script"]');
       for (const element of elements) {
         expect(element.attribs.nonce).to.eql(nonce);
       }
     });
   });
 
-  it('html snapshot with filtered nonce', async () => {
-    expect(cheerio.load(await response.text())).toMatchSnapshot()
-  })
-});
+  it("html snapshot with filtered nonce", async () => {
+    expect(cheerio.load(await response.text())).toMatchSnapshot();
+  });
+});