fix(csp): use 'unsafe-inline' for style-src (match cloud-portal) to stop Safari refusing stylesheets

Strict nonce-based style-src made Safari refuse the <style>/<link> stylesheets
that CSS-in-JS libraries (sonner toasts, Radix UI) inject without a nonce
("Refused to apply a stylesheet because its hash, its nonce, or 'unsafe-inline'
does not appear in the style-src directive"), breaking styling. Inline style
attributes and injected stylesheets cannot carry a nonce, and per CSP3 a nonce
in the directive disables 'unsafe-inline' — so the nonce is dropped from
style-src and 'unsafe-inline' is used in dev and prod.

Mirrors datum cloud-portal (app/server/entry.ts: strict script-src nonce +
"Allow inline styles for third-party widgets"). script-src stays strict
(NONCE + 'strict-dynamic'), which is the real XSS boundary; style-based
injection is low-risk.

Supersedes the earlier revert (3e4c6a3): that kept the strict policy assuming
the violations were cosmetic, but Safari refusing stylesheets is a real visual
break. Tests assert the new style-src policy and the script-src nonce invariant.

Author: yahyafakhroji

app/server/edge/__tests__/edge-home.test.ts

@@ -5,7 +5,7 @@ describe('server/edge home (request-bound Hono code)', () => {
   it('exposes cspDirectives from the new edge path', async () => {
     const mod = await import('@/server/edge/secure-headers');
     expect(typeof mod.cspDirectives).toBe('function');
-    expect(mod.cspDirectives(false).styleSrc).toContain(NONCE); // CSP nonce invariant survives the move
+    expect(mod.cspDirectives(false).scriptSrc).toContain(NONCE); // CSP nonce invariant survives the move (script-src; style-src uses 'unsafe-inline')
   });
   it('the old middleware path still resolves (shim)', async () => {
     const mod = await import('@/server/middleware/secure-headers');

app/server/edge/secure-headers.ts

@@ -54,9 +54,15 @@ export function cspDirectives(isDev: boolean, frameAncestors: readonly string[]
     scriptSrc: isDev
       ? ["'self'", "'unsafe-inline'", "'unsafe-eval'"]
       : ["'self'", NONCE, "'strict-dynamic'"],
-    // Production drops 'unsafe-inline' and uses the per-request nonce
-    // (mirrors scriptSrc); dev keeps 'unsafe-inline' for HMR-injected styles.
-    styleSrc: isDev ? ["'self'", "'unsafe-inline'"] : ["'self'", NONCE],
+    // style-src uses 'unsafe-inline' in dev AND prod (no nonce). CSS-in-JS libs
+    // (sonner toasts, Radix UI) inject <style>/<link> stylesheets and element.style
+    // attributes that cannot carry a nonce — Safari *refuses the stylesheet outright*
+    // ("Refused to apply a stylesheet... nonce... or 'unsafe-inline'..."), so styling
+    // breaks. Per CSP3 a nonce in the directive disables 'unsafe-inline', so the nonce
+    // is intentionally dropped here. Mirrors datum cloud-portal (app/server/entry.ts:
+    // "Allow inline styles for third-party widgets"). script-src stays strict
+    // (NONCE + 'strict-dynamic') — that is the real XSS boundary; style injection is low-risk.
+    styleSrc: ["'self'", "'unsafe-inline'"],
     imgSrc: ["'self'", 'data:', 'https:'],
     // Fathom analytics beacons POST to https://cdn.usefathom.com — without this
     // connect-src entry the browser blocks them. script-src needs no change:

app/server/middleware/__tests__/secure-headers.test.ts

@@ -28,11 +28,18 @@ describe('cspDirectives', () => {
   });
 });
 
-describe('CSP style-src hardening', () => {
-  it('production style-src uses the nonce and drops unsafe-inline', () => {
+describe('CSP style-src policy', () => {
+  // style-src intentionally uses 'unsafe-inline' (no nonce) in dev AND prod so the
+  // <style>/<link> stylesheets and element.style writes that CSS-in-JS libs (sonner,
+  // Radix) emit are not refused by the browser. Per CSP3 a nonce would disable
+  // 'unsafe-inline', so it must be absent. Mirrors datum cloud-portal. The real XSS
+  // defense — script-src nonce — is unaffected.
+  it('production style-src uses unsafe-inline and drops the nonce', () => {
     const prod = cspDirectives(false);
-    expect(prod.styleSrc).toContain(NONCE);
-    expect(prod.styleSrc).not.toContain("'unsafe-inline'");
+    expect(prod.styleSrc).toContain("'unsafe-inline'");
+    expect(prod.styleSrc).not.toContain(NONCE);
+    // script-src stays strict — the load-bearing invariant
+    expect(prod.scriptSrc).toContain(NONCE);
   });
 
   it('dev style-src keeps unsafe-inline for HMR', () => {