feat(nextjs): Add CSP in middleware

.changeset/poor-singers-camp.md

@@ -0,0 +1,5 @@
+---
+'@clerk/backend': minor
+---
+
+Added constants.Headers.ContentSecurityPolicy and constants.Headers.Nonce

.changeset/vast-clubs-speak.md

@@ -0,0 +1,31 @@
+---
+'@clerk/nextjs': minor
+---
+
+Added Content Security Policy (CSP) header generation functionality to `clerkMiddleware` with support for both standard and strict-dynamic modes. Key features:
+
+- Automatic generation of CSP headers with default security policies compatible with Clerk requirements
+- Support for both standard and strict-dynamic CSP modes
+- Automatic nonce generation for strict-dynamic mode
+- Ability to add custom directives to match project requirements
+
+Example
+
+```
+export default clerkMiddleware(
+ async (auth, request) => {
+ if (!isPublicRoute(request)) {
+ await auth.protect();
+ }
+ },
+ {
+ contentSecurityPolicy: {
+ mode: "strict-dynamic",
+ directives: {
+ "connect-src": ["external.api.com"],
+ "script-src": ["external.scripts.com"]
+ }
+ }
+ }
+);
+```

packages/backend/src/constants.ts

@@ -36,29 +36,31 @@ const QueryParameters = {
 } as const;
 
 const Headers = {
- AuthToken: 'x-clerk-auth-token',
+ Accept: 'accept',
+ AuthMessage: 'x-clerk-auth-message',
+ Authorization: 'authorization',
+ AuthReason: 'x-clerk-auth-reason',
  AuthSignature: 'x-clerk-auth-signature',
  AuthStatus: 'x-clerk-auth-status',
- AuthReason: 'x-clerk-auth-reason',
- AuthMessage: 'x-clerk-auth-message',
- ClerkUrl: 'x-clerk-clerk-url',
- EnableDebug: 'x-clerk-debug',
- ClerkRequestData: 'x-clerk-request-data',
+ AuthToken: 'x-clerk-auth-token',
+ CacheControl: 'cache-control',
  ClerkRedirectTo: 'x-clerk-redirect-to',
+ ClerkRequestData: 'x-clerk-request-data',
+ ClerkUrl: 'x-clerk-clerk-url',
  CloudFrontForwardedProto: 'cloudfront-forwarded-proto',
- Authorization: 'authorization',
+ ContentType: 'content-type',
+ ContentSecurityPolicy: 'content-security-policy',
+ EnableDebug: 'x-clerk-debug',
+ ForwardedHost: 'x-forwarded-host',
  ForwardedPort: 'x-forwarded-port',
  ForwardedProto: 'x-forwarded-proto',
- ForwardedHost: 'x-forwarded-host',
- Accept: 'accept',
- Referrer: 'referer',
- UserAgent: 'user-agent',
- Origin: 'origin',
  Host: 'host',
- ContentType: 'content-type',
- SecFetchDest: 'sec-fetch-dest',
  Location: 'location',
- CacheControl: 'cache-control',
+ Nonce: 'x-nonce',
+ Origin: 'origin',
+ Referrer: 'referer',
+ SecFetchDest: 'sec-fetch-dest',
+ UserAgent: 'user-agent',
 } as const;
 
 const ContentTypes = {

packages/fastify/src/__tests__/__snapshots__/constants.test.ts.snap

@@ -4,39 +4,6 @@ exports[`constants from environment variables 1`] = `
 {
  "API_URL": "CLERK_API_URL",
  "API_VERSION": "CLERK_API_VERSION",
- "Cookies": {
- "ClientUat": "__client_uat",
- "DevBrowser": "__clerk_db_jwt",
- "Handshake": "__clerk_handshake",
- "RedirectCount": "__clerk_redirect_count",
- "Refresh": "__refresh",
- "Session": "__session",
- },
- "Headers": {
- "Accept": "accept",
- "AuthMessage": "x-clerk-auth-message",
- "AuthReason": "x-clerk-auth-reason",
- "AuthSignature": "x-clerk-auth-signature",
- "AuthStatus": "x-clerk-auth-status",
- "AuthToken": "x-clerk-auth-token",
- "Authorization": "authorization",
- "CacheControl": "cache-control",
- "ClerkRedirectTo": "x-clerk-redirect-to",
- "ClerkRequestData": "x-clerk-request-data",
- "ClerkUrl": "x-clerk-clerk-url",
- "CloudFrontForwardedProto": "cloudfront-forwarded-proto",
- "ContentType": "content-type",
- "EnableDebug": "x-clerk-debug",
- "ForwardedHost": "x-forwarded-host",
- "ForwardedPort": "x-forwarded-port",
- "ForwardedProto": "x-forwarded-proto",
- "Host": "host",
- "Location": "location",
- "Origin": "origin",
- "Referrer": "referer",
- "SecFetchDest": "sec-fetch-dest",
- "UserAgent": "user-agent",
- },
  "JWT_KEY": "CLERK_JWT_KEY",
  "PUBLISHABLE_KEY": "CLERK_PUBLISHABLE_KEY",
  "SDK_METADATA": {

packages/fastify/src/__tests__/constants.test.ts

@@ -21,6 +21,13 @@ describe('constants', () => {
 
  test('from environment variables', () => {
  jest.resetModules();
- expect(constants).toMatchSnapshot();
+ const { Headers, Cookies, ...localConstants } = constants;
+
+ // Verify imported constants exist but don't snapshot them
+ expect(Headers).toBeDefined();
+ expect(Cookies).toBeDefined();
+
+ // Only snapshot our local constants
+ expect(localConstants).toMatchSnapshot();
  });
 });

packages/nextjs/src/app-router/server/ClerkProvider.tsx

@@ -19,8 +19,13 @@ const getDynamicClerkState = React.cache(async function getDynamicClerkState() {
  return data;
 });
 
-const getNonceFromCSPHeader = React.cache(async function getNonceFromCSPHeader() {
- return getScriptNonceFromHeader((await headers()).get('Content-Security-Policy') || '') || '';
+const getNonceHeaders = React.cache(async function getNonceHeaders() {
+ const headersList = await headers();
+ const nonce = headersList.get('X-Nonce');
+ return nonce
+ ? nonce
+ : // Fallback to extracting from CSP header
+ getScriptNonceFromHeader(headersList.get('Content-Security-Policy') || '') || '';
 });
 
 export async function ClerkProvider(
@@ -51,9 +56,9 @@ export async function ClerkProvider(
  * For some reason, Next 13 requires that functions which call `headers()` are awaited where they are invoked.
  * Without the await here, Next will throw a DynamicServerError during build.
  */
- return Promise.resolve(await getNonceFromCSPHeader());
+ return Promise.resolve(await getNonceHeaders());
  }
- return getNonceFromCSPHeader();
+ return getNonceHeaders();
  }
 
  const propsWithEnvs = mergeNextClerkPropsWithEnv({

.changeset/poor-singers-camp.md

@@ -0,0 +1,5 @@
+---
+'@clerk/backend': minor
+---
+
+Added constants.Headers.ContentSecurityPolicy and constants.Headers.Nonce

.changeset/vast-clubs-speak.md

@@ -0,0 +1,31 @@
+---
+'@clerk/nextjs': minor
+---
+
+Added Content Security Policy (CSP) header generation functionality to `clerkMiddleware` with support for both standard and strict-dynamic modes. Key features:
+
+- Automatic generation of CSP headers with default security policies compatible with Clerk requirements
+- Support for both standard and strict-dynamic CSP modes
+- Automatic nonce generation for strict-dynamic mode
+- Ability to add custom directives to match project requirements
+
+Example
+
+```
+export default clerkMiddleware(
+ async (auth, request) => {
+ if (!isPublicRoute(request)) {
+ await auth.protect();
+ }
+ },
+ {
+ contentSecurityPolicy: {
+ mode: "strict-dynamic",
+ directives: {
+ "connect-src": ["external.api.com"],
+ "script-src": ["external.scripts.com"]
+ }
+ }
+ }
+);
+```

packages/backend/src/constants.ts

@@ -36,29 +36,31 @@ const QueryParameters = {
 } as const;
 
 const Headers = {
- AuthToken: 'x-clerk-auth-token',
+ Accept: 'accept',
+ AuthMessage: 'x-clerk-auth-message',
+ Authorization: 'authorization',
+ AuthReason: 'x-clerk-auth-reason',
  AuthSignature: 'x-clerk-auth-signature',
  AuthStatus: 'x-clerk-auth-status',
- AuthReason: 'x-clerk-auth-reason',
- AuthMessage: 'x-clerk-auth-message',
- ClerkUrl: 'x-clerk-clerk-url',
- EnableDebug: 'x-clerk-debug',
- ClerkRequestData: 'x-clerk-request-data',
+ AuthToken: 'x-clerk-auth-token',
+ CacheControl: 'cache-control',
  ClerkRedirectTo: 'x-clerk-redirect-to',
+ ClerkRequestData: 'x-clerk-request-data',
+ ClerkUrl: 'x-clerk-clerk-url',
  CloudFrontForwardedProto: 'cloudfront-forwarded-proto',
- Authorization: 'authorization',
+ ContentType: 'content-type',
+ ContentSecurityPolicy: 'content-security-policy',
+ EnableDebug: 'x-clerk-debug',
+ ForwardedHost: 'x-forwarded-host',
  ForwardedPort: 'x-forwarded-port',
  ForwardedProto: 'x-forwarded-proto',
- ForwardedHost: 'x-forwarded-host',
- Accept: 'accept',
- Referrer: 'referer',
- UserAgent: 'user-agent',
- Origin: 'origin',
  Host: 'host',
- ContentType: 'content-type',
- SecFetchDest: 'sec-fetch-dest',
  Location: 'location',
- CacheControl: 'cache-control',
+ Nonce: 'x-nonce',
+ Origin: 'origin',
+ Referrer: 'referer',
+ SecFetchDest: 'sec-fetch-dest',
+ UserAgent: 'user-agent',
 } as const;
 
 const ContentTypes = {

packages/fastify/src/__tests__/__snapshots__/constants.test.ts.snap

@@ -4,39 +4,6 @@ exports[`constants from environment variables 1`] = `
 {
  "API_URL": "CLERK_API_URL",
  "API_VERSION": "CLERK_API_VERSION",
- "Cookies": {
- "ClientUat": "__client_uat",
- "DevBrowser": "__clerk_db_jwt",
- "Handshake": "__clerk_handshake",
- "RedirectCount": "__clerk_redirect_count",
- "Refresh": "__refresh",
- "Session": "__session",
- },
- "Headers": {
- "Accept": "accept",
- "AuthMessage": "x-clerk-auth-message",
- "AuthReason": "x-clerk-auth-reason",
- "AuthSignature": "x-clerk-auth-signature",
- "AuthStatus": "x-clerk-auth-status",
- "AuthToken": "x-clerk-auth-token",
- "Authorization": "authorization",
- "CacheControl": "cache-control",
- "ClerkRedirectTo": "x-clerk-redirect-to",
- "ClerkRequestData": "x-clerk-request-data",
- "ClerkUrl": "x-clerk-clerk-url",
- "CloudFrontForwardedProto": "cloudfront-forwarded-proto",
- "ContentType": "content-type",
- "EnableDebug": "x-clerk-debug",
- "ForwardedHost": "x-forwarded-host",
- "ForwardedPort": "x-forwarded-port",
- "ForwardedProto": "x-forwarded-proto",
- "Host": "host",
- "Location": "location",
- "Origin": "origin",
- "Referrer": "referer",
- "SecFetchDest": "sec-fetch-dest",
- "UserAgent": "user-agent",
- },
  "JWT_KEY": "CLERK_JWT_KEY",
  "PUBLISHABLE_KEY": "CLERK_PUBLISHABLE_KEY",
  "SDK_METADATA": {

packages/fastify/src/__tests__/constants.test.ts

@@ -21,6 +21,13 @@ describe('constants', () => {
 
  test('from environment variables', () => {
  jest.resetModules();
- expect(constants).toMatchSnapshot();
+ const { Headers, Cookies, ...localConstants } = constants;
+
+ // Verify imported constants exist but don't snapshot them
+ expect(Headers).toBeDefined();
+ expect(Cookies).toBeDefined();
+
+ // Only snapshot our local constants
+ expect(localConstants).toMatchSnapshot();
  });
 });

packages/nextjs/src/app-router/server/ClerkProvider.tsx

@@ -19,8 +19,13 @@ const getDynamicClerkState = React.cache(async function getDynamicClerkState() {
  return data;
 });
 
-const getNonceFromCSPHeader = React.cache(async function getNonceFromCSPHeader() {
- return getScriptNonceFromHeader((await headers()).get('Content-Security-Policy') || '') || '';
+const getNonceHeaders = React.cache(async function getNonceHeaders() {
+ const headersList = await headers();
+ const nonce = headersList.get('X-Nonce');
+ return nonce
+ ? nonce
+ : // Fallback to extracting from CSP header
+ getScriptNonceFromHeader(headersList.get('Content-Security-Policy') || '') || '';
 });
 
 export async function ClerkProvider(
@@ -51,9 +56,9 @@ export async function ClerkProvider(
  * For some reason, Next 13 requires that functions which call `headers()` are awaited where they are invoked.
  * Without the await here, Next will throw a DynamicServerError during build.
  */
- return Promise.resolve(await getNonceFromCSPHeader());
+ return Promise.resolve(await getNonceHeaders());
  }
- return getNonceFromCSPHeader();
+ return getNonceHeaders();
  }
 
  const propsWithEnvs = mergeNextClerkPropsWithEnv({

.changeset/poor-singers-camp.md

@@ -0,0 +1,5 @@
+---
+'@clerk/backend': minor
+---
+
+Added constants.Headers.ContentSecurityPolicy and constants.Headers.Nonce

.changeset/vast-clubs-speak.md

@@ -0,0 +1,31 @@
+---
+'@clerk/nextjs': minor
+---
+
+Added Content Security Policy (CSP) header generation functionality to `clerkMiddleware` with support for both standard and strict-dynamic modes. Key features:
+
+- Automatic generation of CSP headers with default security policies compatible with Clerk requirements
+- Support for both standard and strict-dynamic CSP modes
+- Automatic nonce generation for strict-dynamic mode
+- Ability to add custom directives to match project requirements
+
+Example
+
+```
+export default clerkMiddleware(
+ async (auth, request) => {
+ if (!isPublicRoute(request)) {
+ await auth.protect();
+ }
+ },
+ {
+ contentSecurityPolicy: {
+ mode: "strict-dynamic",
+ directives: {
+ "connect-src": ["external.api.com"],
+ "script-src": ["external.scripts.com"]
+ }
+ }
+ }
+);
+```

packages/backend/src/constants.ts

@@ -36,29 +36,31 @@ const QueryParameters = {
 } as const;
 
 const Headers = {
- AuthToken: 'x-clerk-auth-token',
+ Accept: 'accept',
+ AuthMessage: 'x-clerk-auth-message',
+ Authorization: 'authorization',
+ AuthReason: 'x-clerk-auth-reason',
  AuthSignature: 'x-clerk-auth-signature',
  AuthStatus: 'x-clerk-auth-status',
- AuthReason: 'x-clerk-auth-reason',
- AuthMessage: 'x-clerk-auth-message',
- ClerkUrl: 'x-clerk-clerk-url',
- EnableDebug: 'x-clerk-debug',
- ClerkRequestData: 'x-clerk-request-data',
+ AuthToken: 'x-clerk-auth-token',
+ CacheControl: 'cache-control',
  ClerkRedirectTo: 'x-clerk-redirect-to',
+ ClerkRequestData: 'x-clerk-request-data',
+ ClerkUrl: 'x-clerk-clerk-url',
  CloudFrontForwardedProto: 'cloudfront-forwarded-proto',
- Authorization: 'authorization',
+ ContentType: 'content-type',
+ ContentSecurityPolicy: 'content-security-policy',
+ EnableDebug: 'x-clerk-debug',
+ ForwardedHost: 'x-forwarded-host',
  ForwardedPort: 'x-forwarded-port',
  ForwardedProto: 'x-forwarded-proto',
- ForwardedHost: 'x-forwarded-host',
- Accept: 'accept',
- Referrer: 'referer',
- UserAgent: 'user-agent',
- Origin: 'origin',
  Host: 'host',
- ContentType: 'content-type',
- SecFetchDest: 'sec-fetch-dest',
  Location: 'location',
- CacheControl: 'cache-control',
+ Nonce: 'x-nonce',
+ Origin: 'origin',
+ Referrer: 'referer',
+ SecFetchDest: 'sec-fetch-dest',
+ UserAgent: 'user-agent',
 } as const;
 
 const ContentTypes = {

packages/fastify/src/__tests__/__snapshots__/constants.test.ts.snap

@@ -4,39 +4,6 @@ exports[`constants from environment variables 1`] = `
 {
  "API_URL": "CLERK_API_URL",
  "API_VERSION": "CLERK_API_VERSION",
- "Cookies": {
- "ClientUat": "__client_uat",
- "DevBrowser": "__clerk_db_jwt",
- "Handshake": "__clerk_handshake",
- "RedirectCount": "__clerk_redirect_count",
- "Refresh": "__refresh",
- "Session": "__session",
- },
- "Headers": {
- "Accept": "accept",
- "AuthMessage": "x-clerk-auth-message",
- "AuthReason": "x-clerk-auth-reason",
- "AuthSignature": "x-clerk-auth-signature",
- "AuthStatus": "x-clerk-auth-status",
- "AuthToken": "x-clerk-auth-token",
- "Authorization": "authorization",
- "CacheControl": "cache-control",
- "ClerkRedirectTo": "x-clerk-redirect-to",
- "ClerkRequestData": "x-clerk-request-data",
- "ClerkUrl": "x-clerk-clerk-url",
- "CloudFrontForwardedProto": "cloudfront-forwarded-proto",
- "ContentType": "content-type",
- "EnableDebug": "x-clerk-debug",
- "ForwardedHost": "x-forwarded-host",
- "ForwardedPort": "x-forwarded-port",
- "ForwardedProto": "x-forwarded-proto",
- "Host": "host",
- "Location": "location",
- "Origin": "origin",
- "Referrer": "referer",
- "SecFetchDest": "sec-fetch-dest",
- "UserAgent": "user-agent",
- },
  "JWT_KEY": "CLERK_JWT_KEY",
  "PUBLISHABLE_KEY": "CLERK_PUBLISHABLE_KEY",
  "SDK_METADATA": {

packages/fastify/src/__tests__/constants.test.ts

@@ -21,6 +21,13 @@ describe('constants', () => {
 
  test('from environment variables', () => {
  jest.resetModules();
- expect(constants).toMatchSnapshot();
+ const { Headers, Cookies, ...localConstants } = constants;
+
+ // Verify imported constants exist but don't snapshot them
+ expect(Headers).toBeDefined();
+ expect(Cookies).toBeDefined();
+
+ // Only snapshot our local constants
+ expect(localConstants).toMatchSnapshot();
  });
 });

packages/nextjs/src/app-router/server/ClerkProvider.tsx

@@ -19,8 +19,13 @@ const getDynamicClerkState = React.cache(async function getDynamicClerkState() {
  return data;
 });
 
-const getNonceFromCSPHeader = React.cache(async function getNonceFromCSPHeader() {
- return getScriptNonceFromHeader((await headers()).get('Content-Security-Policy') || '') || '';
+const getNonceHeaders = React.cache(async function getNonceHeaders() {
+ const headersList = await headers();
+ const nonce = headersList.get('X-Nonce');
+ return nonce
+ ? nonce
+ : // Fallback to extracting from CSP header
+ getScriptNonceFromHeader(headersList.get('Content-Security-Policy') || '') || '';
 });
 
 export async function ClerkProvider(
@@ -51,9 +56,9 @@ export async function ClerkProvider(
  * For some reason, Next 13 requires that functions which call `headers()` are awaited where they are invoked.
  * Without the await here, Next will throw a DynamicServerError during build.
  */
- return Promise.resolve(await getNonceFromCSPHeader());
+ return Promise.resolve(await getNonceHeaders());
  }
- return getNonceFromCSPHeader();
+ return getNonceHeaders();
  }
 
  const propsWithEnvs = mergeNextClerkPropsWithEnv({

.changeset/poor-singers-camp.md

@@ -0,0 +1,5 @@
+---
+'@clerk/backend': minor
+---
+
+Added constants.Headers.ContentSecurityPolicy and constants.Headers.Nonce

.changeset/vast-clubs-speak.md

@@ -0,0 +1,31 @@
+---
+'@clerk/nextjs': minor
+---
+
+Added Content Security Policy (CSP) header generation functionality to `clerkMiddleware` with support for both standard and strict-dynamic modes. Key features:
+
+- Automatic generation of CSP headers with default security policies compatible with Clerk requirements
+- Support for both standard and strict-dynamic CSP modes
+- Automatic nonce generation for strict-dynamic mode
+- Ability to add custom directives to match project requirements
+
+Example
+
+```
+export default clerkMiddleware(
+ async (auth, request) => {
+ if (!isPublicRoute(request)) {
+ await auth.protect();
+ }
+ },
+ {
+ contentSecurityPolicy: {
+ mode: "strict-dynamic",
+ directives: {
+ "connect-src": ["external.api.com"],
+ "script-src": ["external.scripts.com"]
+ }
+ }
+ }
+);
+```

packages/backend/src/constants.ts

@@ -36,29 +36,31 @@ const QueryParameters = {
 } as const;
 
 const Headers = {
- AuthToken: 'x-clerk-auth-token',
+ Accept: 'accept',
+ AuthMessage: 'x-clerk-auth-message',
+ Authorization: 'authorization',
+ AuthReason: 'x-clerk-auth-reason',
  AuthSignature: 'x-clerk-auth-signature',
  AuthStatus: 'x-clerk-auth-status',
- AuthReason: 'x-clerk-auth-reason',
- AuthMessage: 'x-clerk-auth-message',
- ClerkUrl: 'x-clerk-clerk-url',
- EnableDebug: 'x-clerk-debug',
- ClerkRequestData: 'x-clerk-request-data',
+ AuthToken: 'x-clerk-auth-token',
+ CacheControl: 'cache-control',
  ClerkRedirectTo: 'x-clerk-redirect-to',
+ ClerkRequestData: 'x-clerk-request-data',
+ ClerkUrl: 'x-clerk-clerk-url',
  CloudFrontForwardedProto: 'cloudfront-forwarded-proto',
- Authorization: 'authorization',
+ ContentType: 'content-type',
+ ContentSecurityPolicy: 'content-security-policy',
+ EnableDebug: 'x-clerk-debug',
+ ForwardedHost: 'x-forwarded-host',
  ForwardedPort: 'x-forwarded-port',
  ForwardedProto: 'x-forwarded-proto',
- ForwardedHost: 'x-forwarded-host',
- Accept: 'accept',
- Referrer: 'referer',
- UserAgent: 'user-agent',
- Origin: 'origin',
  Host: 'host',
- ContentType: 'content-type',
- SecFetchDest: 'sec-fetch-dest',
  Location: 'location',
- CacheControl: 'cache-control',
+ Nonce: 'x-nonce',
+ Origin: 'origin',
+ Referrer: 'referer',
+ SecFetchDest: 'sec-fetch-dest',
+ UserAgent: 'user-agent',
 } as const;
 
 const ContentTypes = {

packages/fastify/src/__tests__/__snapshots__/constants.test.ts.snap

@@ -4,39 +4,6 @@ exports[`constants from environment variables 1`] = `
 {
  "API_URL": "CLERK_API_URL",
  "API_VERSION": "CLERK_API_VERSION",
- "Cookies": {
- "ClientUat": "__client_uat",
- "DevBrowser": "__clerk_db_jwt",
- "Handshake": "__clerk_handshake",
- "RedirectCount": "__clerk_redirect_count",
- "Refresh": "__refresh",
- "Session": "__session",
- },
- "Headers": {
- "Accept": "accept",
- "AuthMessage": "x-clerk-auth-message",
- "AuthReason": "x-clerk-auth-reason",
- "AuthSignature": "x-clerk-auth-signature",
- "AuthStatus": "x-clerk-auth-status",
- "AuthToken": "x-clerk-auth-token",
- "Authorization": "authorization",
- "CacheControl": "cache-control",
- "ClerkRedirectTo": "x-clerk-redirect-to",
- "ClerkRequestData": "x-clerk-request-data",
- "ClerkUrl": "x-clerk-clerk-url",
- "CloudFrontForwardedProto": "cloudfront-forwarded-proto",
- "ContentType": "content-type",
- "EnableDebug": "x-clerk-debug",
- "ForwardedHost": "x-forwarded-host",
- "ForwardedPort": "x-forwarded-port",
- "ForwardedProto": "x-forwarded-proto",
- "Host": "host",
- "Location": "location",
- "Origin": "origin",
- "Referrer": "referer",
- "SecFetchDest": "sec-fetch-dest",
- "UserAgent": "user-agent",
- },
  "JWT_KEY": "CLERK_JWT_KEY",
  "PUBLISHABLE_KEY": "CLERK_PUBLISHABLE_KEY",
  "SDK_METADATA": {

packages/fastify/src/__tests__/constants.test.ts

@@ -21,6 +21,13 @@ describe('constants', () => {
 
  test('from environment variables', () => {
  jest.resetModules();
- expect(constants).toMatchSnapshot();
+ const { Headers, Cookies, ...localConstants } = constants;
+
+ // Verify imported constants exist but don't snapshot them
+ expect(Headers).toBeDefined();
+ expect(Cookies).toBeDefined();
+
+ // Only snapshot our local constants
+ expect(localConstants).toMatchSnapshot();
  });
 });

packages/nextjs/src/app-router/server/ClerkProvider.tsx

@@ -19,8 +19,13 @@ const getDynamicClerkState = React.cache(async function getDynamicClerkState() {
  return data;
 });
 
-const getNonceFromCSPHeader = React.cache(async function getNonceFromCSPHeader() {
- return getScriptNonceFromHeader((await headers()).get('Content-Security-Policy') || '') || '';
+const getNonceHeaders = React.cache(async function getNonceHeaders() {
+ const headersList = await headers();
+ const nonce = headersList.get('X-Nonce');
+ return nonce
+ ? nonce
+ : // Fallback to extracting from CSP header
+ getScriptNonceFromHeader(headersList.get('Content-Security-Policy') || '') || '';
 });
 
 export async function ClerkProvider(
@@ -51,9 +56,9 @@ export async function ClerkProvider(
  * For some reason, Next 13 requires that functions which call `headers()` are awaited where they are invoked.
  * Without the await here, Next will throw a DynamicServerError during build.
  */
- return Promise.resolve(await getNonceFromCSPHeader());
+ return Promise.resolve(await getNonceHeaders());
  }
- return getNonceFromCSPHeader();
+ return getNonceHeaders();
  }
 
  const propsWithEnvs = mergeNextClerkPropsWithEnv({

.changeset/poor-singers-camp.md

@@ -0,0 +1,5 @@
+---
+'@clerk/backend': minor
+---
+
+Added constants.Headers.ContentSecurityPolicy and constants.Headers.Nonce

.changeset/vast-clubs-speak.md

@@ -0,0 +1,31 @@
+---
+'@clerk/nextjs': minor
+---
+
+Added Content Security Policy (CSP) header generation functionality to `clerkMiddleware` with support for both standard and strict-dynamic modes. Key features:
+
+- Automatic generation of CSP headers with default security policies compatible with Clerk requirements
+- Support for both standard and strict-dynamic CSP modes
+- Automatic nonce generation for strict-dynamic mode
+- Ability to add custom directives to match project requirements
+
+Example
+
+```
+export default clerkMiddleware(
+ async (auth, request) => {
+ if (!isPublicRoute(request)) {
+ await auth.protect();
+ }
+ },
+ {
+ contentSecurityPolicy: {
+ mode: "strict-dynamic",
+ directives: {
+ "connect-src": ["external.api.com"],
+ "script-src": ["external.scripts.com"]
+ }
+ }
+ }
+);
+```

packages/backend/src/constants.ts

@@ -36,29 +36,31 @@ const QueryParameters = {
 } as const;
 
 const Headers = {
- AuthToken: 'x-clerk-auth-token',
+ Accept: 'accept',
+ AuthMessage: 'x-clerk-auth-message',
+ Authorization: 'authorization',
+ AuthReason: 'x-clerk-auth-reason',
  AuthSignature: 'x-clerk-auth-signature',
  AuthStatus: 'x-clerk-auth-status',
- AuthReason: 'x-clerk-auth-reason',
- AuthMessage: 'x-clerk-auth-message',
- ClerkUrl: 'x-clerk-clerk-url',
- EnableDebug: 'x-clerk-debug',
- ClerkRequestData: 'x-clerk-request-data',
+ AuthToken: 'x-clerk-auth-token',
+ CacheControl: 'cache-control',
  ClerkRedirectTo: 'x-clerk-redirect-to',
+ ClerkRequestData: 'x-clerk-request-data',
+ ClerkUrl: 'x-clerk-clerk-url',
  CloudFrontForwardedProto: 'cloudfront-forwarded-proto',
- Authorization: 'authorization',
+ ContentType: 'content-type',
+ ContentSecurityPolicy: 'content-security-policy',
+ EnableDebug: 'x-clerk-debug',
+ ForwardedHost: 'x-forwarded-host',
  ForwardedPort: 'x-forwarded-port',
  ForwardedProto: 'x-forwarded-proto',
- ForwardedHost: 'x-forwarded-host',
- Accept: 'accept',
- Referrer: 'referer',
- UserAgent: 'user-agent',
- Origin: 'origin',
  Host: 'host',
- ContentType: 'content-type',
- SecFetchDest: 'sec-fetch-dest',
  Location: 'location',
- CacheControl: 'cache-control',
+ Nonce: 'x-nonce',
+ Origin: 'origin',
+ Referrer: 'referer',
+ SecFetchDest: 'sec-fetch-dest',
+ UserAgent: 'user-agent',
 } as const;
 
 const ContentTypes = {

packages/fastify/src/__tests__/__snapshots__/constants.test.ts.snap

@@ -4,39 +4,6 @@ exports[`constants from environment variables 1`] = `
 {
  "API_URL": "CLERK_API_URL",
  "API_VERSION": "CLERK_API_VERSION",
- "Cookies": {
- "ClientUat": "__client_uat",
- "DevBrowser": "__clerk_db_jwt",
- "Handshake": "__clerk_handshake",
- "RedirectCount": "__clerk_redirect_count",
- "Refresh": "__refresh",
- "Session": "__session",
- },
- "Headers": {
- "Accept": "accept",
- "AuthMessage": "x-clerk-auth-message",
- "AuthReason": "x-clerk-auth-reason",
- "AuthSignature": "x-clerk-auth-signature",
- "AuthStatus": "x-clerk-auth-status",
- "AuthToken": "x-clerk-auth-token",
- "Authorization": "authorization",
- "CacheControl": "cache-control",
- "ClerkRedirectTo": "x-clerk-redirect-to",
- "ClerkRequestData": "x-clerk-request-data",
- "ClerkUrl": "x-clerk-clerk-url",
- "CloudFrontForwardedProto": "cloudfront-forwarded-proto",
- "ContentType": "content-type",
- "EnableDebug": "x-clerk-debug",
- "ForwardedHost": "x-forwarded-host",
- "ForwardedPort": "x-forwarded-port",
- "ForwardedProto": "x-forwarded-proto",
- "Host": "host",
- "Location": "location",
- "Origin": "origin",
- "Referrer": "referer",
- "SecFetchDest": "sec-fetch-dest",
- "UserAgent": "user-agent",
- },
  "JWT_KEY": "CLERK_JWT_KEY",
  "PUBLISHABLE_KEY": "CLERK_PUBLISHABLE_KEY",
  "SDK_METADATA": {

packages/fastify/src/__tests__/constants.test.ts

@@ -21,6 +21,13 @@ describe('constants', () => {
 
  test('from environment variables', () => {
  jest.resetModules();
- expect(constants).toMatchSnapshot();
+ const { Headers, Cookies, ...localConstants } = constants;
+
+ // Verify imported constants exist but don't snapshot them
+ expect(Headers).toBeDefined();
+ expect(Cookies).toBeDefined();
+
+ // Only snapshot our local constants
+ expect(localConstants).toMatchSnapshot();
  });
 });

packages/nextjs/src/app-router/server/ClerkProvider.tsx

@@ -19,8 +19,13 @@ const getDynamicClerkState = React.cache(async function getDynamicClerkState() {
  return data;
 });
 
-const getNonceFromCSPHeader = React.cache(async function getNonceFromCSPHeader() {
- return getScriptNonceFromHeader((await headers()).get('Content-Security-Policy') || '') || '';
+const getNonceHeaders = React.cache(async function getNonceHeaders() {
+ const headersList = await headers();
+ const nonce = headersList.get('X-Nonce');
+ return nonce
+ ? nonce
+ : // Fallback to extracting from CSP header
+ getScriptNonceFromHeader(headersList.get('Content-Security-Policy') || '') || '';
 });
 
 export async function ClerkProvider(
@@ -51,9 +56,9 @@ export async function ClerkProvider(
  * For some reason, Next 13 requires that functions which call `headers()` are awaited where they are invoked.
  * Without the await here, Next will throw a DynamicServerError during build.
  */
- return Promise.resolve(await getNonceFromCSPHeader());
+ return Promise.resolve(await getNonceHeaders());
  }
- return getNonceFromCSPHeader();
+ return getNonceHeaders();
  }
 
  const propsWithEnvs = mergeNextClerkPropsWithEnv({

.changeset/poor-singers-camp.md

@@ -0,0 +1,5 @@
+---
+'@clerk/backend': minor
+---
+
+Added constants.Headers.ContentSecurityPolicy and constants.Headers.Nonce

.changeset/vast-clubs-speak.md

@@ -0,0 +1,31 @@
+---
+'@clerk/nextjs': minor
+---
+
+Added Content Security Policy (CSP) header generation functionality to `clerkMiddleware` with support for both standard and strict-dynamic modes. Key features:
+
+- Automatic generation of CSP headers with default security policies compatible with Clerk requirements
+- Support for both standard and strict-dynamic CSP modes
+- Automatic nonce generation for strict-dynamic mode
+- Ability to add custom directives to match project requirements
+
+Example
+
+```
+export default clerkMiddleware(
+ async (auth, request) => {
+ if (!isPublicRoute(request)) {
+ await auth.protect();
+ }
+ },
+ {
+ contentSecurityPolicy: {
+ mode: "strict-dynamic",
+ directives: {
+ "connect-src": ["external.api.com"],
+ "script-src": ["external.scripts.com"]
+ }
+ }
+ }
+);
+```

packages/backend/src/constants.ts

@@ -36,29 +36,31 @@ const QueryParameters = {
 } as const;
 
 const Headers = {
- AuthToken: 'x-clerk-auth-token',
+ Accept: 'accept',
+ AuthMessage: 'x-clerk-auth-message',
+ Authorization: 'authorization',
+ AuthReason: 'x-clerk-auth-reason',
  AuthSignature: 'x-clerk-auth-signature',
  AuthStatus: 'x-clerk-auth-status',
- AuthReason: 'x-clerk-auth-reason',
- AuthMessage: 'x-clerk-auth-message',
- ClerkUrl: 'x-clerk-clerk-url',
- EnableDebug: 'x-clerk-debug',
- ClerkRequestData: 'x-clerk-request-data',
+ AuthToken: 'x-clerk-auth-token',
+ CacheControl: 'cache-control',
  ClerkRedirectTo: 'x-clerk-redirect-to',
+ ClerkRequestData: 'x-clerk-request-data',
+ ClerkUrl: 'x-clerk-clerk-url',
  CloudFrontForwardedProto: 'cloudfront-forwarded-proto',
- Authorization: 'authorization',
+ ContentType: 'content-type',
+ ContentSecurityPolicy: 'content-security-policy',
+ EnableDebug: 'x-clerk-debug',
+ ForwardedHost: 'x-forwarded-host',
  ForwardedPort: 'x-forwarded-port',
  ForwardedProto: 'x-forwarded-proto',
- ForwardedHost: 'x-forwarded-host',
- Accept: 'accept',
- Referrer: 'referer',
- UserAgent: 'user-agent',
- Origin: 'origin',
  Host: 'host',
- ContentType: 'content-type',
- SecFetchDest: 'sec-fetch-dest',
  Location: 'location',
- CacheControl: 'cache-control',
+ Nonce: 'x-nonce',
+ Origin: 'origin',
+ Referrer: 'referer',
+ SecFetchDest: 'sec-fetch-dest',
+ UserAgent: 'user-agent',
 } as const;
 
 const ContentTypes = {

packages/fastify/src/__tests__/__snapshots__/constants.test.ts.snap

@@ -4,39 +4,6 @@ exports[`constants from environment variables 1`] = `
 {
  "API_URL": "CLERK_API_URL",
  "API_VERSION": "CLERK_API_VERSION",
- "Cookies": {
- "ClientUat": "__client_uat",
- "DevBrowser": "__clerk_db_jwt",
- "Handshake": "__clerk_handshake",
- "RedirectCount": "__clerk_redirect_count",
- "Refresh": "__refresh",
- "Session": "__session",
- },
- "Headers": {
- "Accept": "accept",
- "AuthMessage": "x-clerk-auth-message",
- "AuthReason": "x-clerk-auth-reason",
- "AuthSignature": "x-clerk-auth-signature",
- "AuthStatus": "x-clerk-auth-status",
- "AuthToken": "x-clerk-auth-token",
- "Authorization": "authorization",
- "CacheControl": "cache-control",
- "ClerkRedirectTo": "x-clerk-redirect-to",
- "ClerkRequestData": "x-clerk-request-data",
- "ClerkUrl": "x-clerk-clerk-url",
- "CloudFrontForwardedProto": "cloudfront-forwarded-proto",
- "ContentType": "content-type",
- "EnableDebug": "x-clerk-debug",
- "ForwardedHost": "x-forwarded-host",
- "ForwardedPort": "x-forwarded-port",
- "ForwardedProto": "x-forwarded-proto",
- "Host": "host",
- "Location": "location",
- "Origin": "origin",
- "Referrer": "referer",
- "SecFetchDest": "sec-fetch-dest",
- "UserAgent": "user-agent",
- },
  "JWT_KEY": "CLERK_JWT_KEY",
  "PUBLISHABLE_KEY": "CLERK_PUBLISHABLE_KEY",
  "SDK_METADATA": {

packages/fastify/src/__tests__/constants.test.ts

@@ -21,6 +21,13 @@ describe('constants', () => {
 
  test('from environment variables', () => {
  jest.resetModules();
- expect(constants).toMatchSnapshot();
+ const { Headers, Cookies, ...localConstants } = constants;
+
+ // Verify imported constants exist but don't snapshot them
+ expect(Headers).toBeDefined();
+ expect(Cookies).toBeDefined();
+
+ // Only snapshot our local constants
+ expect(localConstants).toMatchSnapshot();
  });
 });

packages/nextjs/src/app-router/server/ClerkProvider.tsx

@@ -19,8 +19,13 @@ const getDynamicClerkState = React.cache(async function getDynamicClerkState() {
  return data;
 });
 
-const getNonceFromCSPHeader = React.cache(async function getNonceFromCSPHeader() {
- return getScriptNonceFromHeader((await headers()).get('Content-Security-Policy') || '') || '';
+const getNonceHeaders = React.cache(async function getNonceHeaders() {
+ const headersList = await headers();
+ const nonce = headersList.get('X-Nonce');
+ return nonce
+ ? nonce
+ : // Fallback to extracting from CSP header
+ getScriptNonceFromHeader(headersList.get('Content-Security-Policy') || '') || '';
 });
 
 export async function ClerkProvider(
@@ -51,9 +56,9 @@ export async function ClerkProvider(
  * For some reason, Next 13 requires that functions which call `headers()` are awaited where they are invoked.
  * Without the await here, Next will throw a DynamicServerError during build.
  */
- return Promise.resolve(await getNonceFromCSPHeader());
+ return Promise.resolve(await getNonceHeaders());
  }
- return getNonceFromCSPHeader();
+ return getNonceHeaders();
  }
 
  const propsWithEnvs = mergeNextClerkPropsWithEnv({

.changeset/poor-singers-camp.md

@@ -0,0 +1,5 @@
+---
+'@clerk/backend': minor
+---
+
+Added constants.Headers.ContentSecurityPolicy and constants.Headers.Nonce

.changeset/vast-clubs-speak.md

@@ -0,0 +1,31 @@
+---
+'@clerk/nextjs': minor
+---
+
+Added Content Security Policy (CSP) header generation functionality to `clerkMiddleware` with support for both standard and strict-dynamic modes. Key features:
+
+- Automatic generation of CSP headers with default security policies compatible with Clerk requirements
+- Support for both standard and strict-dynamic CSP modes
+- Automatic nonce generation for strict-dynamic mode
+- Ability to add custom directives to match project requirements
+
+Example
+
+```
+export default clerkMiddleware(
+ async (auth, request) => {
+ if (!isPublicRoute(request)) {
+ await auth.protect();
+ }
+ },
+ {
+ contentSecurityPolicy: {
+ mode: "strict-dynamic",
+ directives: {
+ "connect-src": ["external.api.com"],
+ "script-src": ["external.scripts.com"]
+ }
+ }
+ }
+);
+```

packages/backend/src/constants.ts

@@ -36,29 +36,31 @@ const QueryParameters = {
 } as const;
 
 const Headers = {
- AuthToken: 'x-clerk-auth-token',
+ Accept: 'accept',
+ AuthMessage: 'x-clerk-auth-message',
+ Authorization: 'authorization',
+ AuthReason: 'x-clerk-auth-reason',
  AuthSignature: 'x-clerk-auth-signature',
  AuthStatus: 'x-clerk-auth-status',
- AuthReason: 'x-clerk-auth-reason',
- AuthMessage: 'x-clerk-auth-message',
- ClerkUrl: 'x-clerk-clerk-url',
- EnableDebug: 'x-clerk-debug',
- ClerkRequestData: 'x-clerk-request-data',
+ AuthToken: 'x-clerk-auth-token',
+ CacheControl: 'cache-control',
  ClerkRedirectTo: 'x-clerk-redirect-to',
+ ClerkRequestData: 'x-clerk-request-data',
+ ClerkUrl: 'x-clerk-clerk-url',
  CloudFrontForwardedProto: 'cloudfront-forwarded-proto',
- Authorization: 'authorization',
+ ContentType: 'content-type',
+ ContentSecurityPolicy: 'content-security-policy',
+ EnableDebug: 'x-clerk-debug',
+ ForwardedHost: 'x-forwarded-host',
  ForwardedPort: 'x-forwarded-port',
  ForwardedProto: 'x-forwarded-proto',
- ForwardedHost: 'x-forwarded-host',
- Accept: 'accept',
- Referrer: 'referer',
- UserAgent: 'user-agent',
- Origin: 'origin',
  Host: 'host',
- ContentType: 'content-type',
- SecFetchDest: 'sec-fetch-dest',
  Location: 'location',
- CacheControl: 'cache-control',
+ Nonce: 'x-nonce',
+ Origin: 'origin',
+ Referrer: 'referer',
+ SecFetchDest: 'sec-fetch-dest',
+ UserAgent: 'user-agent',
 } as const;
 
 const ContentTypes = {

packages/fastify/src/__tests__/__snapshots__/constants.test.ts.snap

@@ -4,39 +4,6 @@ exports[`constants from environment variables 1`] = `
 {
  "API_URL": "CLERK_API_URL",
  "API_VERSION": "CLERK_API_VERSION",
- "Cookies": {
- "ClientUat": "__client_uat",
- "DevBrowser": "__clerk_db_jwt",
- "Handshake": "__clerk_handshake",
- "RedirectCount": "__clerk_redirect_count",
- "Refresh": "__refresh",
- "Session": "__session",
- },
- "Headers": {
- "Accept": "accept",
- "AuthMessage": "x-clerk-auth-message",
- "AuthReason": "x-clerk-auth-reason",
- "AuthSignature": "x-clerk-auth-signature",
- "AuthStatus": "x-clerk-auth-status",
- "AuthToken": "x-clerk-auth-token",
- "Authorization": "authorization",
- "CacheControl": "cache-control",
- "ClerkRedirectTo": "x-clerk-redirect-to",
- "ClerkRequestData": "x-clerk-request-data",
- "ClerkUrl": "x-clerk-clerk-url",
- "CloudFrontForwardedProto": "cloudfront-forwarded-proto",
- "ContentType": "content-type",
- "EnableDebug": "x-clerk-debug",
- "ForwardedHost": "x-forwarded-host",
- "ForwardedPort": "x-forwarded-port",
- "ForwardedProto": "x-forwarded-proto",
- "Host": "host",
- "Location": "location",
- "Origin": "origin",
- "Referrer": "referer",
- "SecFetchDest": "sec-fetch-dest",
- "UserAgent": "user-agent",
- },
  "JWT_KEY": "CLERK_JWT_KEY",
  "PUBLISHABLE_KEY": "CLERK_PUBLISHABLE_KEY",
  "SDK_METADATA": {

packages/fastify/src/__tests__/constants.test.ts

@@ -21,6 +21,13 @@ describe('constants', () => {
 
  test('from environment variables', () => {
  jest.resetModules();
- expect(constants).toMatchSnapshot();
+ const { Headers, Cookies, ...localConstants } = constants;
+
+ // Verify imported constants exist but don't snapshot them
+ expect(Headers).toBeDefined();
+ expect(Cookies).toBeDefined();
+
+ // Only snapshot our local constants
+ expect(localConstants).toMatchSnapshot();
  });
 });

packages/nextjs/src/app-router/server/ClerkProvider.tsx

@@ -19,8 +19,13 @@ const getDynamicClerkState = React.cache(async function getDynamicClerkState() {
  return data;
 });
 
-const getNonceFromCSPHeader = React.cache(async function getNonceFromCSPHeader() {
- return getScriptNonceFromHeader((await headers()).get('Content-Security-Policy') || '') || '';
+const getNonceHeaders = React.cache(async function getNonceHeaders() {
+ const headersList = await headers();
+ const nonce = headersList.get('X-Nonce');
+ return nonce
+ ? nonce
+ : // Fallback to extracting from CSP header
+ getScriptNonceFromHeader(headersList.get('Content-Security-Policy') || '') || '';
 });
 
 export async function ClerkProvider(
@@ -51,9 +56,9 @@ export async function ClerkProvider(
  * For some reason, Next 13 requires that functions which call `headers()` are awaited where they are invoked.
  * Without the await here, Next will throw a DynamicServerError during build.
  */
- return Promise.resolve(await getNonceFromCSPHeader());
+ return Promise.resolve(await getNonceHeaders());
  }
- return getNonceFromCSPHeader();
+ return getNonceHeaders();
  }
 
  const propsWithEnvs = mergeNextClerkPropsWithEnv({

.changeset/poor-singers-camp.md

@@ -0,0 +1,5 @@
+---
+'@clerk/backend': minor
+---
+
+Added constants.Headers.ContentSecurityPolicy and constants.Headers.Nonce

.changeset/vast-clubs-speak.md

@@ -0,0 +1,31 @@
+---
+'@clerk/nextjs': minor
+---
+
+Added Content Security Policy (CSP) header generation functionality to `clerkMiddleware` with support for both standard and strict-dynamic modes. Key features:
+
+- Automatic generation of CSP headers with default security policies compatible with Clerk requirements
+- Support for both standard and strict-dynamic CSP modes
+- Automatic nonce generation for strict-dynamic mode
+- Ability to add custom directives to match project requirements
+
+Example
+
+```
+export default clerkMiddleware(
+ async (auth, request) => {
+ if (!isPublicRoute(request)) {
+ await auth.protect();
+ }
+ },
+ {
+ contentSecurityPolicy: {
+ mode: "strict-dynamic",
+ directives: {
+ "connect-src": ["external.api.com"],
+ "script-src": ["external.scripts.com"]
+ }
+ }
+ }
+);
+```

packages/backend/src/constants.ts

@@ -36,29 +36,31 @@ const QueryParameters = {
 } as const;
 
 const Headers = {
- AuthToken: 'x-clerk-auth-token',
+ Accept: 'accept',
+ AuthMessage: 'x-clerk-auth-message',
+ Authorization: 'authorization',
+ AuthReason: 'x-clerk-auth-reason',
  AuthSignature: 'x-clerk-auth-signature',
  AuthStatus: 'x-clerk-auth-status',
- AuthReason: 'x-clerk-auth-reason',
- AuthMessage: 'x-clerk-auth-message',
- ClerkUrl: 'x-clerk-clerk-url',
- EnableDebug: 'x-clerk-debug',
- ClerkRequestData: 'x-clerk-request-data',
+ AuthToken: 'x-clerk-auth-token',
+ CacheControl: 'cache-control',
  ClerkRedirectTo: 'x-clerk-redirect-to',
+ ClerkRequestData: 'x-clerk-request-data',
+ ClerkUrl: 'x-clerk-clerk-url',
  CloudFrontForwardedProto: 'cloudfront-forwarded-proto',
- Authorization: 'authorization',
+ ContentType: 'content-type',
+ ContentSecurityPolicy: 'content-security-policy',
+ EnableDebug: 'x-clerk-debug',
+ ForwardedHost: 'x-forwarded-host',
  ForwardedPort: 'x-forwarded-port',
  ForwardedProto: 'x-forwarded-proto',
- ForwardedHost: 'x-forwarded-host',
- Accept: 'accept',
- Referrer: 'referer',
- UserAgent: 'user-agent',
- Origin: 'origin',
  Host: 'host',
- ContentType: 'content-type',
- SecFetchDest: 'sec-fetch-dest',
  Location: 'location',
- CacheControl: 'cache-control',
+ Nonce: 'x-nonce',
+ Origin: 'origin',
+ Referrer: 'referer',
+ SecFetchDest: 'sec-fetch-dest',
+ UserAgent: 'user-agent',
 } as const;
 
 const ContentTypes = {

packages/fastify/src/__tests__/__snapshots__/constants.test.ts.snap

@@ -4,39 +4,6 @@ exports[`constants from environment variables 1`] = `
 {
  "API_URL": "CLERK_API_URL",
  "API_VERSION": "CLERK_API_VERSION",
- "Cookies": {
- "ClientUat": "__client_uat",
- "DevBrowser": "__clerk_db_jwt",
- "Handshake": "__clerk_handshake",
- "RedirectCount": "__clerk_redirect_count",
- "Refresh": "__refresh",
- "Session": "__session",
- },
- "Headers": {
- "Accept": "accept",
- "AuthMessage": "x-clerk-auth-message",
- "AuthReason": "x-clerk-auth-reason",
- "AuthSignature": "x-clerk-auth-signature",
- "AuthStatus": "x-clerk-auth-status",
- "AuthToken": "x-clerk-auth-token",
- "Authorization": "authorization",
- "CacheControl": "cache-control",
- "ClerkRedirectTo": "x-clerk-redirect-to",
- "ClerkRequestData": "x-clerk-request-data",
- "ClerkUrl": "x-clerk-clerk-url",
- "CloudFrontForwardedProto": "cloudfront-forwarded-proto",
- "ContentType": "content-type",
- "EnableDebug": "x-clerk-debug",
- "ForwardedHost": "x-forwarded-host",
- "ForwardedPort": "x-forwarded-port",
- "ForwardedProto": "x-forwarded-proto",
- "Host": "host",
- "Location": "location",
- "Origin": "origin",
- "Referrer": "referer",
- "SecFetchDest": "sec-fetch-dest",
- "UserAgent": "user-agent",
- },
  "JWT_KEY": "CLERK_JWT_KEY",
  "PUBLISHABLE_KEY": "CLERK_PUBLISHABLE_KEY",
  "SDK_METADATA": {

packages/fastify/src/__tests__/constants.test.ts

@@ -21,6 +21,13 @@ describe('constants', () => {
 
  test('from environment variables', () => {
  jest.resetModules();
- expect(constants).toMatchSnapshot();
+ const { Headers, Cookies, ...localConstants } = constants;
+
+ // Verify imported constants exist but don't snapshot them
+ expect(Headers).toBeDefined();
+ expect(Cookies).toBeDefined();
+
+ // Only snapshot our local constants
+ expect(localConstants).toMatchSnapshot();
  });
 });

packages/nextjs/src/app-router/server/ClerkProvider.tsx

@@ -19,8 +19,13 @@ const getDynamicClerkState = React.cache(async function getDynamicClerkState() {
  return data;
 });
 
-const getNonceFromCSPHeader = React.cache(async function getNonceFromCSPHeader() {
- return getScriptNonceFromHeader((await headers()).get('Content-Security-Policy') || '') || '';
+const getNonceHeaders = React.cache(async function getNonceHeaders() {
+ const headersList = await headers();
+ const nonce = headersList.get('X-Nonce');
+ return nonce
+ ? nonce
+ : // Fallback to extracting from CSP header
+ getScriptNonceFromHeader(headersList.get('Content-Security-Policy') || '') || '';
 });
 
 export async function ClerkProvider(
@@ -51,9 +56,9 @@ export async function ClerkProvider(
  * For some reason, Next 13 requires that functions which call `headers()` are awaited where they are invoked.
  * Without the await here, Next will throw a DynamicServerError during build.
  */
- return Promise.resolve(await getNonceFromCSPHeader());
+ return Promise.resolve(await getNonceHeaders());
  }
- return getNonceFromCSPHeader();
+ return getNonceHeaders();
  }
 
  const propsWithEnvs = mergeNextClerkPropsWithEnv({