Fix the remaining CSP errors. The repeated hash was from Next’s generated <Image> markup: style="color:transparent".

apps/homepage/src/lib/security/csp.ts

@@ -10,6 +10,17 @@ export function buildContentSecurityPolicy(
   const scriptSources = ["'self'", `'nonce-${nonce}'`, "'strict-dynamic'"];
   if (development) scriptSources.push("'unsafe-eval'");
 
+  const styleSources = ["'self'"];
+  if (development) {
+    styleSources.push("'unsafe-inline'");
+  } else {
+    styleSources.push(
+      `'nonce-${nonce}'`,
+      "'unsafe-hashes'",
+      "'sha256-zlqnbDt84zf1iSefLU/ImC54isoprH/MRiVZGskwexk='",
+    );
+  }
+
   const connectSources = ["'self'"];
   if (development) connectSources.push('ws:', 'wss:');
   if (apiOrigin) connectSources.push(apiOrigin);
@@ -17,7 +28,7 @@ export function buildContentSecurityPolicy(
   const directives = [
     "default-src 'self'",
     `script-src ${scriptSources.join(' ')}`,
-    `style-src 'self'${development ? " 'unsafe-inline'" : ` 'nonce-${nonce}'`}`,
+    `style-src ${styleSources.join(' ')}`,
     "img-src 'self' data: blob:",
     "font-src 'self' data:",
     `connect-src ${connectSources.join(' ')}`,

apps/homepage/tests/unit/csp.test.ts

@@ -13,7 +13,9 @@ describe('CSP foundation', () => {
     expect(buildContentSecurityPolicy('abc', true)).toContain("'unsafe-eval'");
     expect(buildContentSecurityPolicy('abc', false)).not.toContain("'unsafe-eval'");
     expect(buildContentSecurityPolicy('abc', false)).toContain("'nonce-abc'");
-    expect(buildContentSecurityPolicy('abc', false)).toContain("style-src 'self' 'nonce-abc'");
+    expect(buildContentSecurityPolicy('abc', false)).toContain(
+      "style-src 'self' 'nonce-abc' 'unsafe-hashes' 'sha256-zlqnbDt84zf1iSefLU/ImC54isoprH/MRiVZGskwexk='",
+    );
     expect(buildContentSecurityPolicy('abc', false)).not.toContain("'unsafe-inline'");
     expect(buildContentSecurityPolicy('abc', false)).toContain("frame-ancestors 'none'");
   });