fix(nextjs): forward CSP nonce as request header in clerkMiddleware (#7828)

Author: jacekradko

.changeset/fix-csp-nonce-request-headers.md

@@ -0,0 +1,5 @@
+---
+'@clerk/nextjs': patch
+---
+
+Fixed an issue where the CSP nonce generated by `clerkMiddleware({ contentSecurityPolicy: { strict: true } })` was not forwarded as a request header. Server components can now access the nonce via `headers()`, allowing `ClerkProvider` and Next.js to apply it to `<script>` tags.

integration/templates/next-app-router/src/middleware.ts

@@ -1,30 +1,24 @@
 import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
 
-const csp = `default-src 'self';
-  script-src 'self' 'unsafe-inline' 'unsafe-eval' 'strict-dynamic' 'nonce-deadbeef';
-  img-src 'self' https://img.clerk.com;
-  worker-src 'self' blob:;
-  style-src 'self' 'unsafe-inline';
-  frame-src 'self' https://challenges.cloudflare.com;
-`;
-
 const isProtectedRoute = createRouteMatcher(['/protected(.*)', '/user(.*)', '/switcher(.*)']);
 const isAdminRoute = createRouteMatcher(['/only-admin(.*)']);
-const isCSPRoute = createRouteMatcher(['/csp']);
-
-export default clerkMiddleware(async (auth, req) => {
-  if (isProtectedRoute(req)) {
-    await auth.protect();
-  }
 
-  if (isAdminRoute(req)) {
-    await auth.protect({ role: 'org:admin' });
-  }
+export default clerkMiddleware(
+  async (auth, req) => {
+    if (isProtectedRoute(req)) {
+      await auth.protect();
+    }
 
-  if (isCSPRoute(req)) {
-    req.headers.set('Content-Security-Policy', csp.replace(/\n/g, ''));
-  }
-});
+    if (isAdminRoute(req)) {
+      await auth.protect({ role: 'org:admin' });
+    }
+  },
+  {
+    contentSecurityPolicy: {
+      strict: true,
+    },
+  },
+);
 
 export const config = {
   matcher: [

packages/nextjs/src/server/__tests__/clerkMiddleware.test.ts

@@ -962,3 +962,57 @@ describe('Dev Browser JWT when redirecting to cross origin for page requests', f
     expect((await clerkClient()).authenticateRequest).toBeCalled();
   });
 });
+
+describe('contentSecurityPolicy option', () => {
+  it('forwards CSP headers as request headers when strict mode is enabled', async () => {
+    const resp = await clerkMiddleware({
+      contentSecurityPolicy: { strict: true },
+    })(mockRequest({ url: '/test' }), {} as NextFetchEvent);
+
+    expect(resp?.status).toEqual(200);
+
+    // Verify CSP response header is set
+    const cspHeader = resp?.headers.get('content-security-policy');
+    expect(cspHeader).toBeTruthy();
+    expect(cspHeader).toContain("'strict-dynamic'");
+    expect(cspHeader).toContain("'nonce-");
+
+    // Verify nonce response header is set
+    const nonceHeader = resp?.headers.get('x-nonce');
+    expect(nonceHeader).toBeTruthy();
+
+    // Verify CSP headers are forwarded as request headers via x-middleware-override-headers
+    const overrideHeaders = resp?.headers.get('x-middleware-override-headers');
+    expect(overrideHeaders).toContain('content-security-policy');
+    expect(overrideHeaders).toContain('x-nonce');
+
+    // Verify the actual request header values are set
+    const requestCSP = resp?.headers.get('x-middleware-request-content-security-policy');
+    expect(requestCSP).toEqual(cspHeader);
+
+    const requestNonce = resp?.headers.get('x-middleware-request-x-nonce');
+    expect(requestNonce).toEqual(nonceHeader);
+  });
+
+  it('forwards CSP headers as request headers when not in strict mode', async () => {
+    const resp = await clerkMiddleware({
+      contentSecurityPolicy: {},
+    })(mockRequest({ url: '/test' }), {} as NextFetchEvent);
+
+    expect(resp?.status).toEqual(200);
+
+    // Verify CSP response header is set
+    const cspHeader = resp?.headers.get('content-security-policy');
+    expect(cspHeader).toBeTruthy();
+
+    // No nonce in non-strict mode
+    expect(resp?.headers.get('x-nonce')).toBeNull();
+
+    // Verify CSP header is forwarded as request header
+    const overrideHeaders = resp?.headers.get('x-middleware-override-headers');
+    expect(overrideHeaders).toContain('content-security-policy');
+
+    const requestCSP = resp?.headers.get('x-middleware-request-content-security-policy');
+    expect(requestCSP).toEqual(cspHeader);
+  });
+});

packages/nextjs/src/server/clerkMiddleware.ts

@@ -229,10 +229,16 @@ export const clerkMiddleware = ((...args: unknown[]): NextMiddleware | NextMiddl
           options.contentSecurityPolicy,
         );
 
+        const cspRequestHeaders: Record<string, string> = {};
         headers.forEach(([key, value]) => {
           setHeader(handlerResult, key, value);
+          cspRequestHeaders[key] = value;
         });
 
+        // Forward CSP headers as request headers so server components
+        // can access the nonce via headers()
+        setRequestHeadersOnNextResponse(handlerResult, clerkRequest, cspRequestHeaders);
+
         logger.debug('Clerk generated CSP', () => ({
           headers,
         }));