From 9b52a43784f314f1fcf5b5e4e6db1a0c190cc22e Mon Sep 17 00:00:00 2001
From: Jacek <jacek@clerk.dev>
Date: Thu, 12 Feb 2026 09:58:03 -0600
Subject: [PATCH 1/2] fix(nextjs): forward CSP nonce as request header in
 clerkMiddleware
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When using `clerkMiddleware({ contentSecurityPolicy: { strict: true } })`,
the generated nonce was only set as a response header but never forwarded
as a request header via `x-middleware-override-headers`. This meant
`headers()` in server components couldn't read the nonce, so
`ClerkProvider`'s `getNonceHeaders()` returned empty and Next.js couldn't
apply the nonce to its `<script>` tags — breaking `strict-dynamic` CSP.

Forward CSP headers (including `x-nonce`) as request headers using
`setRequestHeadersOnNextResponse` so server components can access them.
Also update the integration template to use the built-in CSP option.
---
 .../next-app-router/src/middleware.ts         | 36 ++++++-------
 .../server/__tests__/clerkMiddleware.test.ts  | 54 +++++++++++++++++++
 packages/nextjs/src/server/clerkMiddleware.ts |  6 +++
 3 files changed, 75 insertions(+), 21 deletions(-)

diff --git a/integration/templates/next-app-router/src/middleware.ts b/integration/templates/next-app-router/src/middleware.ts
index 7ccdcc1934b..800d730f3a7 100644
--- a/integration/templates/next-app-router/src/middleware.ts
+++ b/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: [
diff --git a/packages/nextjs/src/server/__tests__/clerkMiddleware.test.ts b/packages/nextjs/src/server/__tests__/clerkMiddleware.test.ts
index 9e82f19c75c..0160b7aac20 100644
--- a/packages/nextjs/src/server/__tests__/clerkMiddleware.test.ts
+++ b/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);
+  });
+});
diff --git a/packages/nextjs/src/server/clerkMiddleware.ts b/packages/nextjs/src/server/clerkMiddleware.ts
index 9c9763128c1..2953ff9beb8 100644
--- a/packages/nextjs/src/server/clerkMiddleware.ts
+++ b/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,
         }));

From acf04f81e0aa34337f392ed8efa237eef9e08749 Mon Sep 17 00:00:00 2001
From: Jacek <jacek@clerk.dev>
Date: Thu, 12 Feb 2026 10:03:07 -0600
Subject: [PATCH 2/2] chore: add changeset

---
 .changeset/fix-csp-nonce-request-headers.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fix-csp-nonce-request-headers.md

diff --git a/.changeset/fix-csp-nonce-request-headers.md b/.changeset/fix-csp-nonce-request-headers.md
new file mode 100644
index 00000000000..fd809f445ab
--- /dev/null
+++ b/.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.