fix: policy string

.github/workflows/triage.yml

@@ -15,8 +15,11 @@ jobs:
         uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: "23"
+      - run: node -v
       - run: corepack enable
+      - run: corepack --version
+
       - run: pnpm install
       - name: Build Vite-Plugin-CSP-Guard
         run: pnpm p:build

package.json

@@ -5,6 +5,8 @@
     "build": "turbo build --filter=!docs --filter=!remix-spa --filter=!remix-app",
     "p:build": "turbo build --filter=vite-plugin-csp-guard --filter=csp-toolkit",
     "p:test": "turbo test --filter=vite-plugin-csp-guard --filter=csp-toolkit",
+    "csp:test": "turbo test --filter=vite-plugin-csp-guard",
+    "tk:test": "turbo test --filter=csp-toolkit",
     "dev": "turbo dev",
     "preview": "turbo preview",
     "r:dev": "turbo dev --filter=react-app",

packages/csp-toolkit/src/index.ts

@@ -59,7 +59,7 @@ export const policyToString = (policy: CSPPolicy): string => {
         })
         .join(" ");
         return `${acc} ${key} ${policyValueStr};`;
-    }, "");
+    }, "").trimStart();
 };
 
 

packages/csp-toolkit/src/node.ts

@@ -5,12 +5,21 @@ import crypto from "crypto";
  * Take a string and generate a hash
  * @param str - The string to hash
  * @param algorithm - The algorithm to use
- * @returns
+ * @returns A hash of your string
  */
 export const generateHash = (str: string, algorithm: HashAlgorithms) => {
     const hash = crypto.createHash(algorithm);
     hash.update(str);
     return hash.digest("base64");
 };
 
+/**
+ * Generates a nonce. To be used server side, generate one per request
+ * @returns A nonsensical string
+ */
+export const generateNonce = () => {
+    const nonce = crypto.randomBytes(32).toString("base64");
+    return nonce;
+}
+
 export * from "./types";

packages/csp-toolkit/tests/node-hashing.test.ts

@@ -0,0 +1,84 @@
+import { describe, expect, suite, test } from "vitest";
+import { APP_CSS, CHUNK_CSS, INDEX_CSS, TAILWIND_CSS } from "./mocks/strings";
+import { generateHash } from "../src/node";
+
+
+type Config = {
+  name: string;
+  content: string;
+  results: {
+    sha256: string;
+    sha384: string;
+    sha512: string;
+  };
+}
+
+const CONFIG: Config[] = [
+  {
+    name: "RAW CSS",
+    content: APP_CSS,
+    results: {
+      sha256: "oHFeCgntvQ+95lgWp14PoPyLMUxSYMB2jBm/OqwiYho=",
+      sha384: "rTtVSXyZ8IjCUcupdszeErvLxRAmtkiMCcdSNGiqDgoh+q29s+Y1ZLlq5y6q4QFu",
+      sha512: "mLuKA1/zg2CbjY4DN30RQJ0ZnDhU84g836kyqB45J+NBpOiKLmVko+tZpFbUS6VBobbUZTw8PyVDo+7FMselLg=="
+    }
+  },
+  {
+    name: "Boilerplate CSS",
+    content: INDEX_CSS,
+    results: {
+      sha256: "p5OBltPlKyHqPir3S9YLIBKtZi7Y65BbhvmELl+UvcQ=",
+      sha384: "scqJ7f83AuBLlZrg6RnJ0Sh5moLSwjjWGjfDTg/t9q/suOfa71Ljixdmhfmg+Pfx",
+      sha512: "d6WHoZS5CrQQOorXnGQAjFO55agllToneWi0lT8x3csaElD5roJbJtBRt8RDr9kJzsKlozd2marc7MhoNSgEEQ=="
+    }
+  },
+  {
+    name: "Compressed and Commented CSS",
+    content: TAILWIND_CSS,
+    results: {
+      sha256: "mOVp/ihEwO3hk0cZbCG190/lUPdu8zDouI4u4xrtezc=",
+      sha384: "wsbPlq1YnHiwdQ3Ax7ow73InJX6XwpSXi126p48NRkmnWYEG9GY/32TUrvB96tGO",
+      sha512: "oA7Q9xl81RnCypAtQ3oAzeYanmb6jR/eKBQSd1DrtSAzWTctTuIlY9rXPP0qAC3v4GA1JIkzDYqKgIL8dWZCuA=="
+    }
+  },
+  {
+    name: "Compressed CSS",
+    content: CHUNK_CSS,
+    results: {
+      sha256: "o22LaMaNL7OsoVecyuE7bIOCCdvBjkvxOCg2FJJMm5w=",
+      sha384: "aRHhBBwXUVe4fAAcgV/FpXkrpTIgSqLLa+8/ndVWSsc9snQBykxCNe/gxS5TCjFb",
+      sha512: "tYygGfs9qDQeEWwd1Amn86NOunVWkjFj06HtuF/yS5lTKB+2U6yisIUgWa2nrBuTTHCG6UTqepbbCs01n8+W3Q=="
+    }
+  }
+]
+
+suite("Hashing Tests", () => {
+
+  describe("Hash correctly in 256", () => {
+   CONFIG.forEach(item => {
+    test(item.name, () => {
+      const hash = generateHash(item.content, "sha256")
+      expect(hash).toEqual(item.results.sha256)
+    })
+   })
+  });
+
+  describe("Hash correctly in 384" , () => {
+    CONFIG.forEach(item => {
+      test(item.name, () => {
+        const hash = generateHash(item.content, "sha384")
+        console.log(hash);
+        expect(hash).toEqual(item.results.sha384)
+      })
+     })
+  })
+
+  describe("Hash correctly in 512" , () => {
+    CONFIG.forEach(item => {
+      test(item.name, () => {
+        const hash = generateHash(item.content, "sha512")
+        expect(hash).toEqual(item.results.sha512)
+      })
+     })
+  })
+});

packages/csp-toolkit/tests/policies.test.ts

@@ -53,7 +53,7 @@ describe("Policy Merging", () => {
   });
 });
 
-describe("Policy Creation", () => {
+describe("Policy to String", () => {
   test("Empty Policy", () => {
     const policy: CSPPolicy = {};
     const result = policyToString(policy);
@@ -65,31 +65,31 @@ describe("Policy Creation", () => {
       "default-src": ["'self'"],
     };
     const result = policyToString(policy);
-    expect(result).toBe(" default-src 'self';");
+    expect(result).toBe("default-src 'self';");
   });
 
   test("Policy with sha values", () => {
     const policy: CSPPolicy = {
       "script-src": ["'self'", "sha256-abc123"],
     };
     const result = policyToString(policy);
-    expect(result).toBe(" script-src 'self' 'sha256-abc123';");
+    expect(result).toBe("script-src 'self' 'sha256-abc123';");
   });
 
   test("Policy with wildcard", () => {
     const policy: CSPPolicy = {
       "default-src": ["*"],
     };
     const result = policyToString(policy);
-    expect(result).toBe(" default-src *;");
+    expect(result).toBe("default-src *;");
   });
 
   test("Policy with data URI", () => {
     const policy: CSPPolicy = {
       "img-src": ["data:"],
     };
     const result = policyToString(policy);
-    expect(result).toBe(" img-src data:;");
+    expect(result).toBe("img-src data:;");
   });
 
   test("Policy with multiple directives including wildcard and data URI", () => {
@@ -98,6 +98,7 @@ describe("Policy Creation", () => {
       "img-src": ["'self'", "data:"],
     };
     const result = policyToString(policy);
-    expect(result).toBe(" default-src 'self' *; img-src 'self' data:;");
+    expect(result).toBe("default-src 'self' *; img-src 'self' data:;");
   });
 });
+