From 6d5d0fd7a400a7ffa4c83a315c67d88e064078d3 Mon Sep 17 00:00:00 2001
From: Kaj Kowalski <dev@kajkowalski.nl>
Date: Sun, 13 Jul 2025 22:23:40 +0200
Subject: [PATCH] fix: resolve CSP violations and React hydration issues

- Fix Permissions-Policy header: change ambient-light-sensor to ambient-light
- Add Google Fonts domain to font-src CSP for Leaflet map tiles
- Allow unsafe-inline for style-src to support third-party libraries (Sonner, Leaflet)
- Fix React hydration mismatch by conditionally adding nonce attribute
- Add debug logging for nonce retrieval issues

These changes resolve all CSP violations while maintaining security best practices.
---
 app/layout.tsx     |  2 +-
 lib/csp-server.ts  | 13 ++++++++-----
 lib/nonce-utils.ts | 16 ++++++++++++++--
 middleware.ts      |  2 +-
 4 files changed, 24 insertions(+), 9 deletions(-)
diff --git a/app/layout.tsx b/app/layout.tsx
index ddce888..71bd50f 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -134,7 +134,7 @@ export default async function RootLayout({
       <head>
         <script
           type="application/ld+json"
-          nonce={nonce}
+          {...(nonce ? { nonce } : {})}
           // biome-ignore lint/security/noDangerouslySetInnerHtml: Safe use for JSON-LD structured data with CSP nonce
           dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
         />
diff --git a/lib/csp-server.ts b/lib/csp-server.ts
index 6b99543..2813bc0 100644
--- a/lib/csp-server.ts
+++ b/lib/csp-server.ts
@@ -52,9 +52,12 @@ export function buildCSP(config: CSPConfig = {}): string {
       : ["'self'"];
 
   // Style sources - use nonce in production when available
-  const styleSrc = nonce
-    ? ["'self'", `'nonce-${nonce}'`]
-    : ["'self'", "'unsafe-inline'"]; // Fallback for TailwindCSS
+  // Note: We need 'unsafe-inline' for third-party libraries like Sonner that inject styles dynamically
+  const styleSrc = isDevelopment
+    ? ["'self'", "'unsafe-inline'"]
+    : nonce
+      ? ["'self'", `'nonce-${nonce}'`, "'unsafe-inline'"] // Need unsafe-inline for Sonner/Leaflet
+      : ["'self'", "'unsafe-inline'"]; // Fallback for TailwindCSS
 
   // Image sources - allow self, data URIs, and specific trusted domains
   const imgSrc = [
@@ -69,8 +72,8 @@ export function buildCSP(config: CSPConfig = {}): string {
       .map((domain) => domain),
   ].filter(Boolean);
 
-  // Font sources - restrict to self and data URIs
-  const fontSrc = ["'self'", "data:"];
+  // Font sources - restrict to self, data URIs, and Google Fonts (for Leaflet)
+  const fontSrc = ["'self'", "data:", "https://fonts.gstatic.com"];
 
   // Connect sources - API endpoints and trusted domains
   const connectSrc = isDevelopment
diff --git a/lib/nonce-utils.ts b/lib/nonce-utils.ts
index 6115711..6c98c41 100644
--- a/lib/nonce-utils.ts
+++ b/lib/nonce-utils.ts
@@ -6,9 +6,21 @@ import { headers } from "next/headers";
 export async function getNonce(): Promise<string | undefined> {
   try {
     const headersList = await headers();
-    return headersList.get("X-Nonce") || undefined;
-  } catch {
+    const nonce = headersList.get("X-Nonce");
+
+    // Log for debugging hydration issues
+    if (!nonce && process.env.NODE_ENV === "development") {
+      console.warn(
+        "No nonce found in headers - this may cause hydration mismatches"
+      );
+    }
+
+    return nonce || undefined;
+  } catch (error) {
     // Headers not available (e.g., in client-side code)
+    if (process.env.NODE_ENV === "development") {
+      console.warn("Failed to get headers for nonce:", error);
+    }
     return undefined;
   }
 }
diff --git a/middleware.ts b/middleware.ts
index e3e5e00..ec65d46 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -78,7 +78,7 @@ export function middleware(request: NextRequest) {
       "accelerometer=()",
       "gyroscope=()",
       "magnetometer=()",
-      "ambient-light-sensor=()",
+      "ambient-light=()",
       "encrypted-media=()",
       "autoplay=(self)",
     ].join(", ")
