From e4d6f05ba39f3d5ac84ac4d17034db7640bf70e1 Mon Sep 17 00:00:00 2001
From: Joseph-1-Duro <joseph123duro@gmail.com>
Date: Mon, 29 Jun 2026 18:01:32 +0100
Subject: [PATCH] feat: add CSP nonce-based script allowlist to block injected
 scripts

---
 src/app/layout.tsx    | 10 ++++++----
 src/middleware.ts     |  5 ++++-
 src/middleware/csp.ts | 14 +++++---------
 3 files changed, 15 insertions(+), 14 deletions(-)
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 9eca3786..c07702de 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from 'next';
-import { cookies } from 'next/headers';
+import { cookies, headers } from 'next/headers';
 import { Geist, Geist_Mono } from 'next/font/google';
 import Script from 'next/script';
 import './globals.css';
@@ -49,9 +49,10 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const cookieStore = await cookies();
+  const [cookieStore, headersList] = await Promise.all([cookies(), headers()]);
   const themeCookie = cookieStore.get('theme');
   const defaultTheme = themeCookie ? themeCookie.value : 'system';
+  const cspNonce = headersList.get('x-csp-nonce') ?? '';
 
   // Read persisted locale to server-render the correct lang/dir on <html> —
   // avoids a hydration flash for RTL users.
@@ -80,7 +81,7 @@ export default async function RootLayout({
   return (
     <html lang={locale} dir={dir} suppressHydrationWarning>
       <head>
-        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+        <script nonce={cspNonce} dangerouslySetInnerHTML={{ __html: themeScript }} />
       </head>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased bg-white text-gray-900 transition-colors duration-200 dark:bg-gray-950 dark:text-gray-50 flex flex-col min-h-screen`}
@@ -96,10 +97,11 @@ export default async function RootLayout({
           <Script
             src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_ANALYTICS_ID}`}
             strategy="lazyOnload"
+            nonce={cspNonce}
           />
         )}
         {process.env.NEXT_PUBLIC_ANALYTICS_ID && (
-          <Script id="analytics-init" strategy="lazyOnload">
+          <Script id="analytics-init" strategy="lazyOnload" nonce={cspNonce}>
             {`
               window.dataLayer = window.dataLayer || [];
               function gtag(){dataLayer.push(arguments);}
diff --git a/src/middleware.ts b/src/middleware.ts
index 61f4cb46..185353c9 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -19,6 +19,9 @@ export function middleware(request: NextRequest) {
   const traceId = crypto.randomUUID();
   request.headers.set('x-trace-id', traceId);
 
+  const cspNonce = crypto.randomUUID();
+  request.headers.set('x-csp-nonce', cspNonce);
+
   // Handle redirects first (early in the chain)
   const redirectResponse = handleRedirects(request);
   if (redirectResponse) {
@@ -33,7 +36,7 @@ export function middleware(request: NextRequest) {
   const withHeaders = (response: NextResponse) => {
     response.headers.set('x-trace-id', traceId);
     const withSecurity = applySecurityHeaders(response, request);
-    return applyCspHeaders(withSecurity, request);
+    return applyCspHeaders(withSecurity, request, cspNonce);
   };
 
   const permissionResponse = checkRoutePermission(request, userRole);
diff --git a/src/middleware/csp.ts b/src/middleware/csp.ts
index 6655d63d..c2ad7641 100644
--- a/src/middleware/csp.ts
+++ b/src/middleware/csp.ts
@@ -1,11 +1,7 @@
 import { type NextResponse, type NextRequest } from 'next/server';
 
-const NONCE_BYTES = 16;
-
 export function generateNonce(): string {
-  const bytes = new Uint8Array(NONCE_BYTES);
-  crypto.getRandomValues(bytes);
-  return Buffer.from(bytes).toString('base64');
+  return crypto.randomUUID();
 }
 
 export interface CspOptions {
@@ -43,12 +39,12 @@ export function buildCspHeader(options: CspOptions): string {
     .join('; ');
 }
 
-export function applyCspHeaders(response: NextResponse, request: NextRequest): NextResponse {
-  const nonce = generateNonce();
-  const csp = buildCspHeader({ nonce, strict: true });
+export function applyCspHeaders(response: NextResponse, _request: NextRequest, nonce?: string): NextResponse {
+  const cspNonce = nonce ?? generateNonce();
+  const csp = buildCspHeader({ nonce: cspNonce, strict: true });
 
   response.headers.set('Content-Security-Policy', csp);
-  response.headers.set('X-Nonce', nonce);
+  response.headers.set('X-Nonce', cspNonce);
 
   return response;
 }
