feat(nextjs): Add CSP in middleware #5493

jacekradko · 2025-03-31T16:38:19Z

Description

Adding the ability to automatically inject the CSP header through @clerk/nextjs middleware.

You can now configure clerkMiddleware with an optional param contentSecurityPolicy like the following example:

export default clerkMiddleware(
  async (auth, request) => {
    if (!isPublicRoute(request)) {
      await auth.protect();
    }
  },
  {
    debug: process.env.NODE_ENV !== "production",
    contentSecurityPolicy: {
      mode: "strict-dynamic",
      directives: {
        "connect-src": ["sub.domain.com"],
      }
    }
  }
);

Closes: SDKI-913

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2025-03-31T16:38:22Z

🦋 Changeset detected

Latest commit: d822452

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 11 packages

Name	Type
@clerk/backend	Minor
@clerk/nextjs	Minor
@clerk/agent-toolkit	Patch
@clerk/astro	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/nuxt	Patch
@clerk/react-router	Patch
@clerk/remix	Patch
@clerk/tanstack-react-start	Patch
@clerk/testing	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2025-03-31T16:38:23Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	⬜️ Skipped (Inspect)			Apr 4, 2025 7:35pm

Copilot

Pull Request Overview

This PR introduces a new CSP header utility to automatically inject a Clerk‐compatible Content Security Policy header, including support for nonce generation in strict-dynamic mode.

Adds a new file (content-security-policy.ts) with functions to create, merge, and format CSP headers.
Updates clerkMiddleware.ts to integrate the CSP header injection into the middleware flow and adjusts ClerkProvider.tsx to use a dedicated nonce header.
Enhances test coverage by adding comprehensive tests for the new CSP functionality.

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/nextjs/src/server/content-security-policy.ts	Introduces CSP header creation and processing functions, including nonce support.
packages/nextjs/src/server/clerkMiddleware.ts	Integrates CSP header injection into the middleware and logs CSP details in debug mode.
packages/nextjs/src/server/tests/content-security-policy.test.ts	Provides extensive tests for various CSP header scenarios and edge cases.
packages/nextjs/src/app-router/server/ClerkProvider.tsx	Adjusts nonce extraction by adding support for a dedicated X-Nonce header.
.changeset/vast-clubs-speak.md	Updates the changelog to record the addition of Clerk-compatible CSP header support.

Comments suppressed due to low confidence (2)

packages/nextjs/src/server/content-security-policy.ts:200

[nitpick] Consider pre-formatting the directive values into an array once before sorting to avoid redundant calls to CSPDirectiveManager.formatValue; this could improve performance and ensure consistent ordering.

const sortedValues = Array.from(values).sort((a, b) => {

packages/nextjs/src/server/clerkMiddleware.ts:196

[nitpick] Ensure that the CSP header injection logic properly validates and sanitizes input values (both the host and any existing CSP header) to avoid potential header conflicts or injection issues, especially as the feature evolves.

if (options.injectCSP) {

jacekradko · 2025-04-03T20:19:48Z

!snapshot

clerk-cookie · 2025-04-03T20:21:52Z

Hey @jacekradko - the snapshot version command generated the following package versions:

Package	Version
@clerk/agent-toolkit	0.0.18-snapshot.v20250403202028
@clerk/astro	2.5.1-snapshot.v20250403202028
@clerk/backend	1.26.1-snapshot.v20250403202028
@clerk/chrome-extension	2.2.25-snapshot.v20250403202028
@clerk/clerk-js	5.59.1-snapshot.v20250403202028
@clerk/elements	0.23.10-snapshot.v20250403202028
@clerk/clerk-expo	2.9.8-snapshot.v20250403202028
@clerk/expo-passkeys	0.2.2-snapshot.v20250403202028
@clerk/express	1.4.1-snapshot.v20250403202028
@clerk/fastify	2.2.1-snapshot.v20250403202028
@clerk/localizations	3.13.6-snapshot.v20250403202028
@clerk/nextjs	6.14.0-snapshot.v20250403202028
@clerk/nuxt	1.5.1-snapshot.v20250403202028
@clerk/clerk-react	5.25.7-snapshot.v20250403202028
@clerk/react-router	1.2.1-snapshot.v20250403202028
@clerk/remix	4.5.13-snapshot.v20250403202028
@clerk/shared	3.3.1-snapshot.v20250403202028
@clerk/tanstack-react-start	0.13.1-snapshot.v20250403202028
@clerk/testing	1.4.35-snapshot.v20250403202028
@clerk/themes	2.2.28-snapshot.v20250403202028
@clerk/types	4.50.3-snapshot.v20250403202028
@clerk/vue	1.4.7-snapshot.v20250403202028

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/[email protected] --save-exact

@clerk/astro

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/elements

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/expo-passkeys

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

@clerk/localizations

npm i @clerk/[email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/nuxt

npm i @clerk/[email protected] --save-exact

@clerk/clerk-react

npm i @clerk/[email protected] --save-exact

@clerk/react-router

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/shared

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-react-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

@clerk/themes

npm i @clerk/[email protected] --save-exact

@clerk/types

npm i @clerk/[email protected] --save-exact

@clerk/vue

npm i @clerk/[email protected] --save-exact

nikosdouvlis · 2025-04-04T15:32:20Z

packages/nextjs/src/server/clerkMiddleware.ts


      // TODO @nikos: we need to make this more generic
      // and move the logic in clerk/backend
      if (requestState.headers) {
        requestState.headers.forEach((value, key) => {
+          if (key === 'Content-Security-Policy') {


Minor: we can replace this string this with the constants import from @clerk/backend

.changeset/vast-clubs-speak.md

brkalow

👏

clerk-cookie added the nextjs label Mar 31, 2025

jacekradko requested review from Copilot and a team March 31, 2025 16:41

Copilot AI reviewed Mar 31, 2025

View reviewed changes

vercel bot temporarily deployed to Preview March 31, 2025 16:47 Inactive

vercel bot temporarily deployed to Preview March 31, 2025 16:49 Inactive

This comment was marked as outdated.

Sign in to view

vercel bot temporarily deployed to Preview March 31, 2025 17:21 Inactive

This comment was marked as outdated.

Sign in to view

vercel bot temporarily deployed to Preview April 1, 2025 02:26 Inactive

This comment was marked as outdated.

Sign in to view

vercel bot temporarily deployed to Preview April 1, 2025 14:12 Inactive

This comment was marked as outdated.

Sign in to view

vercel bot temporarily deployed to Preview April 1, 2025 14:29 Inactive

feat(nextjs): Add CSP in middleware

76e237b

jacekradko force-pushed the feat/nextjs-inject-csp-in-middleware branch from c5b6e27 to 76e237b Compare April 1, 2025 14:30

vercel bot deployed to Preview April 1, 2025 14:31 View deployment

wip

ecc5dd8

vercel bot temporarily deployed to Preview April 1, 2025 14:34 Inactive

wip

4cddb2d

vercel bot temporarily deployed to Preview April 1, 2025 14:35 Inactive

This comment was marked as outdated.

Sign in to view

added clerk-telemetry.com to connect-src

3755c15

vercel bot temporarily deployed to Preview April 3, 2025 18:27 Inactive

Merge branch 'main' into feat/nextjs-inject-csp-in-middleware

f234644

vercel bot deployed to Preview April 3, 2025 18:29 View deployment

This comment was marked as outdated.

Sign in to view

jacekradko added 2 commits April 3, 2025 14:32

Improve typings

3fc526c

wip

46eadd5

vercel bot temporarily deployed to Preview April 3, 2025 19:36 Inactive

Merge branch 'main' into feat/nextjs-inject-csp-in-middleware

e613894

vercel bot deployed to Preview April 4, 2025 13:13 View deployment

nikosdouvlis approved these changes Apr 4, 2025

View reviewed changes

brkalow reviewed Apr 4, 2025

View reviewed changes

.changeset/vast-clubs-speak.md Outdated Show resolved Hide resolved

Update .changeset/vast-clubs-speak.md

b79f414

vercel bot deployed to Preview April 4, 2025 15:37 View deployment

brkalow approved these changes Apr 4, 2025

View reviewed changes

jacekradko added 2 commits April 4, 2025 11:40

use Headers const

c094d6c

export const

3202669

clerk-cookie added the backend label Apr 4, 2025

vercel bot deployed to Preview April 4, 2025 16:42 View deployment

changeset

b60616e

vercel bot deployed to Preview April 4, 2025 16:43 View deployment

update fastify test to ignore changes in @clerk/backend

d822452

vercel bot temporarily deployed to Preview April 4, 2025 19:35 Inactive

clerk-cookie added the fastify label Apr 4, 2025

jacekradko merged commit 2cceeba into main Apr 4, 2025
30 checks passed

jacekradko deleted the feat/nextjs-inject-csp-in-middleware branch April 4, 2025 20:25

clerk-cookie mentioned this pull request Apr 4, 2025

ci(repo): Version packages #5524

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(nextjs): Add CSP in middleware #5493

feat(nextjs): Add CSP in middleware #5493

jacekradko commented Mar 31, 2025 •

edited

Loading

changeset-bot bot commented Mar 31, 2025 •

edited

Loading

vercel bot commented Mar 31, 2025 •

edited

Loading

Copilot AI left a comment

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

jacekradko commented Apr 3, 2025

clerk-cookie commented Apr 3, 2025

nikosdouvlis Apr 4, 2025

brkalow left a comment

feat(nextjs): Add CSP in middleware #5493

feat(nextjs): Add CSP in middleware #5493

Conversation

jacekradko commented Mar 31, 2025 • edited Loading

Description

Checklist

Type of change

changeset-bot bot commented Mar 31, 2025 • edited Loading

🦋 Changeset detected

vercel bot commented Mar 31, 2025 • edited Loading

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

jacekradko commented Apr 3, 2025

clerk-cookie commented Apr 3, 2025

nikosdouvlis Apr 4, 2025

Choose a reason for hiding this comment

brkalow left a comment

Choose a reason for hiding this comment

jacekradko commented Mar 31, 2025 •

edited

Loading

changeset-bot bot commented Mar 31, 2025 •

edited

Loading

vercel bot commented Mar 31, 2025 •

edited

Loading