feat(nextjs): Add CSP in middleware #5472
Closed
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: a8e03f6 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Skipped Deployment
|
Member
Author
|
!snapshot |
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR introduces the ability to generate and inject a Clerk-compatible Content-Security-Policy header into Next.js middleware. Key changes include:
- Adding CSP header creation and parsing functions in utils.ts.
- Updating clerkMiddleware.ts to inject the generated CSP header.
- Creating tests to validate the behavior of the new CSP header logic.
- Documenting the change in a changeset file.
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/nextjs/src/server/utils.ts | Added types and functions (createCSPHeader, parseCSPHeader) for CSP |
| packages/nextjs/src/server/clerkMiddleware.ts | Updated middleware to inject and log the CSP header |
| packages/nextjs/src/server/tests/utils.test.ts | Added unit tests to cover CSP header generation and merging logic |
| .changeset/vast-clubs-speak.md | Documented the CSP header addition in the changeset |
Collaborator
|
Hey @jacekradko - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.0.17-snapshot.v20250328140311 --save-exact
npm i @clerk/astro@2.4.6-snapshot.v20250328140311 --save-exact
npm i @clerk/backend@1.25.9-snapshot.v20250328140311 --save-exact
npm i @clerk/chrome-extension@2.2.24-snapshot.v20250328140311 --save-exact
npm i @clerk/clerk-js@5.59.0-snapshot.v20250328140311 --save-exact
npm i @clerk/elements@0.23.9-snapshot.v20250328140311 --save-exact
npm i @clerk/clerk-expo@2.9.7-snapshot.v20250328140311 --save-exact
npm i @clerk/expo-passkeys@0.2.1-snapshot.v20250328140311 --save-exact
npm i @clerk/express@1.3.60-snapshot.v20250328140311 --save-exact
npm i @clerk/fastify@2.1.33-snapshot.v20250328140311 --save-exact
npm i @clerk/nextjs@6.12.13-snapshot.v20250328140311 --save-exact
npm i @clerk/nuxt@1.4.7-snapshot.v20250328140311 --save-exact
npm i @clerk/clerk-react@5.25.6-snapshot.v20250328140311 --save-exact
npm i @clerk/react-router@1.1.12-snapshot.v20250328140311 --save-exact
npm i @clerk/remix@4.5.12-snapshot.v20250328140311 --save-exact
npm i @clerk/shared@3.3.0-snapshot.v20250328140311 --save-exact
npm i @clerk/tanstack-react-start@0.12.3-snapshot.v20250328140311 --save-exact
npm i @clerk/testing@1.4.34-snapshot.v20250328140311 --save-exact
npm i @clerk/vue@1.4.6-snapshot.v20250328140311 --save-exact |
Member
Author
|
!snapshot |
Collaborator
|
Hey @jacekradko - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.0.17-snapshot.v20250328144410 --save-exact
npm i @clerk/astro@2.4.6-snapshot.v20250328144410 --save-exact
npm i @clerk/backend@1.25.9-snapshot.v20250328144410 --save-exact
npm i @clerk/chrome-extension@2.2.24-snapshot.v20250328144410 --save-exact
npm i @clerk/clerk-js@5.59.0-snapshot.v20250328144410 --save-exact
npm i @clerk/elements@0.23.9-snapshot.v20250328144410 --save-exact
npm i @clerk/clerk-expo@2.9.7-snapshot.v20250328144410 --save-exact
npm i @clerk/expo-passkeys@0.2.1-snapshot.v20250328144410 --save-exact
npm i @clerk/express@1.3.60-snapshot.v20250328144410 --save-exact
npm i @clerk/fastify@2.1.33-snapshot.v20250328144410 --save-exact
npm i @clerk/nextjs@6.12.13-snapshot.v20250328144410 --save-exact
npm i @clerk/nuxt@1.4.7-snapshot.v20250328144410 --save-exact
npm i @clerk/clerk-react@5.25.6-snapshot.v20250328144410 --save-exact
npm i @clerk/react-router@1.1.12-snapshot.v20250328144410 --save-exact
npm i @clerk/remix@4.5.12-snapshot.v20250328144410 --save-exact
npm i @clerk/shared@3.3.0-snapshot.v20250328144410 --save-exact
npm i @clerk/tanstack-react-start@0.12.3-snapshot.v20250328144410 --save-exact
npm i @clerk/testing@1.4.34-snapshot.v20250328144410 --save-exact
npm i @clerk/vue@1.4.6-snapshot.v20250328144410 --save-exact |
Member
Author
|
!snapshot |
Collaborator
|
Hey @jacekradko - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.0.17-snapshot.v20250328160021 --save-exact
npm i @clerk/astro@2.4.6-snapshot.v20250328160021 --save-exact
npm i @clerk/backend@1.25.9-snapshot.v20250328160021 --save-exact
npm i @clerk/chrome-extension@2.2.24-snapshot.v20250328160021 --save-exact
npm i @clerk/clerk-js@5.59.0-snapshot.v20250328160021 --save-exact
npm i @clerk/elements@0.23.9-snapshot.v20250328160021 --save-exact
npm i @clerk/clerk-expo@2.9.7-snapshot.v20250328160021 --save-exact
npm i @clerk/expo-passkeys@0.2.1-snapshot.v20250328160021 --save-exact
npm i @clerk/express@1.3.60-snapshot.v20250328160021 --save-exact
npm i @clerk/fastify@2.1.33-snapshot.v20250328160021 --save-exact
npm i @clerk/nextjs@6.12.13-snapshot.v20250328160021 --save-exact
npm i @clerk/nuxt@1.4.7-snapshot.v20250328160021 --save-exact
npm i @clerk/clerk-react@5.25.6-snapshot.v20250328160021 --save-exact
npm i @clerk/react-router@1.1.12-snapshot.v20250328160021 --save-exact
npm i @clerk/remix@4.5.12-snapshot.v20250328160021 --save-exact
npm i @clerk/shared@3.3.0-snapshot.v20250328160021 --save-exact
npm i @clerk/tanstack-react-start@0.12.3-snapshot.v20250328160021 --save-exact
npm i @clerk/testing@1.4.34-snapshot.v20250328160021 --save-exact
npm i @clerk/vue@1.4.6-snapshot.v20250328160021 --save-exact |
Member
Author
|
!snapshot |
Collaborator
|
Hey @jacekradko - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.0.17-snapshot.v20250328161303 --save-exact
npm i @clerk/astro@2.4.6-snapshot.v20250328161303 --save-exact
npm i @clerk/backend@1.25.9-snapshot.v20250328161303 --save-exact
npm i @clerk/chrome-extension@2.2.24-snapshot.v20250328161303 --save-exact
npm i @clerk/clerk-js@5.59.0-snapshot.v20250328161303 --save-exact
npm i @clerk/elements@0.23.9-snapshot.v20250328161303 --save-exact
npm i @clerk/clerk-expo@2.9.7-snapshot.v20250328161303 --save-exact
npm i @clerk/expo-passkeys@0.2.1-snapshot.v20250328161303 --save-exact
npm i @clerk/express@1.3.60-snapshot.v20250328161303 --save-exact
npm i @clerk/fastify@2.1.33-snapshot.v20250328161303 --save-exact
npm i @clerk/nextjs@6.12.13-snapshot.v20250328161303 --save-exact
npm i @clerk/nuxt@1.4.7-snapshot.v20250328161303 --save-exact
npm i @clerk/clerk-react@5.25.6-snapshot.v20250328161303 --save-exact
npm i @clerk/react-router@1.1.12-snapshot.v20250328161303 --save-exact
npm i @clerk/remix@4.5.12-snapshot.v20250328161303 --save-exact
npm i @clerk/shared@3.3.0-snapshot.v20250328161303 --save-exact
npm i @clerk/tanstack-react-start@0.12.3-snapshot.v20250328161303 --save-exact
npm i @clerk/testing@1.4.34-snapshot.v20250328161303 --save-exact
npm i @clerk/vue@1.4.6-snapshot.v20250328161303 --save-exact |
Member
Author
|
!snapshot |
Member
Author
|
!snapshot |
Collaborator
|
Hey @jacekradko - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.0.17-snapshot.v20250328211504 --save-exact
npm i @clerk/astro@2.4.6-snapshot.v20250328211504 --save-exact
npm i @clerk/backend@1.25.9-snapshot.v20250328211504 --save-exact
npm i @clerk/chrome-extension@2.2.24-snapshot.v20250328211504 --save-exact
npm i @clerk/clerk-js@5.59.0-snapshot.v20250328211504 --save-exact
npm i @clerk/elements@0.23.9-snapshot.v20250328211504 --save-exact
npm i @clerk/clerk-expo@2.9.7-snapshot.v20250328211504 --save-exact
npm i @clerk/expo-passkeys@0.2.1-snapshot.v20250328211504 --save-exact
npm i @clerk/express@1.3.60-snapshot.v20250328211504 --save-exact
npm i @clerk/fastify@2.1.33-snapshot.v20250328211504 --save-exact
npm i @clerk/nextjs@6.12.13-snapshot.v20250328211504 --save-exact
npm i @clerk/nuxt@1.4.7-snapshot.v20250328211504 --save-exact
npm i @clerk/clerk-react@5.25.6-snapshot.v20250328211504 --save-exact
npm i @clerk/react-router@1.1.12-snapshot.v20250328211504 --save-exact
npm i @clerk/remix@4.5.12-snapshot.v20250328211504 --save-exact
npm i @clerk/shared@3.3.0-snapshot.v20250328211504 --save-exact
npm i @clerk/tanstack-react-start@0.12.3-snapshot.v20250328211504 --save-exact
npm i @clerk/testing@1.4.34-snapshot.v20250328211504 --save-exact
npm i @clerk/vue@1.4.6-snapshot.v20250328211504 --save-exact |
Member
Author
|
!snapshot |
Collaborator
|
Hey @jacekradko - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.0.17-snapshot.v20250328213151 --save-exact
npm i @clerk/astro@2.4.6-snapshot.v20250328213151 --save-exact
npm i @clerk/backend@1.25.9-snapshot.v20250328213151 --save-exact
npm i @clerk/chrome-extension@2.2.24-snapshot.v20250328213151 --save-exact
npm i @clerk/clerk-js@5.59.0-snapshot.v20250328213151 --save-exact
npm i @clerk/elements@0.23.9-snapshot.v20250328213151 --save-exact
npm i @clerk/clerk-expo@2.9.7-snapshot.v20250328213151 --save-exact
npm i @clerk/expo-passkeys@0.2.1-snapshot.v20250328213151 --save-exact
npm i @clerk/express@1.3.60-snapshot.v20250328213151 --save-exact
npm i @clerk/fastify@2.1.33-snapshot.v20250328213151 --save-exact
npm i @clerk/nextjs@6.12.13-snapshot.v20250328213151 --save-exact
npm i @clerk/nuxt@1.4.7-snapshot.v20250328213151 --save-exact
npm i @clerk/clerk-react@5.25.6-snapshot.v20250328213151 --save-exact
npm i @clerk/react-router@1.1.12-snapshot.v20250328213151 --save-exact
npm i @clerk/remix@4.5.12-snapshot.v20250328213151 --save-exact
npm i @clerk/shared@3.3.0-snapshot.v20250328213151 --save-exact
npm i @clerk/tanstack-react-start@0.12.3-snapshot.v20250328213151 --save-exact
npm i @clerk/testing@1.4.34-snapshot.v20250328213151 --save-exact
npm i @clerk/vue@1.4.6-snapshot.v20250328213151 --save-exact |
Member
Author
|
!snapshot |
Collaborator
|
Hey @jacekradko - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.0.17-snapshot.v20250329015344 --save-exact
npm i @clerk/astro@2.4.6-snapshot.v20250329015344 --save-exact
npm i @clerk/backend@1.25.9-snapshot.v20250329015344 --save-exact
npm i @clerk/chrome-extension@2.2.24-snapshot.v20250329015344 --save-exact
npm i @clerk/clerk-js@5.59.0-snapshot.v20250329015344 --save-exact
npm i @clerk/elements@0.23.9-snapshot.v20250329015344 --save-exact
npm i @clerk/clerk-expo@2.9.7-snapshot.v20250329015344 --save-exact
npm i @clerk/expo-passkeys@0.2.1-snapshot.v20250329015344 --save-exact
npm i @clerk/express@1.3.60-snapshot.v20250329015344 --save-exact
npm i @clerk/fastify@2.1.33-snapshot.v20250329015344 --save-exact
npm i @clerk/nextjs@6.12.13-snapshot.v20250329015344 --save-exact
npm i @clerk/nuxt@1.4.7-snapshot.v20250329015344 --save-exact
npm i @clerk/clerk-react@5.25.6-snapshot.v20250329015344 --save-exact
npm i @clerk/react-router@1.1.12-snapshot.v20250329015344 --save-exact
npm i @clerk/remix@4.5.12-snapshot.v20250329015344 --save-exact
npm i @clerk/shared@3.3.0-snapshot.v20250329015344 --save-exact
npm i @clerk/tanstack-react-start@0.12.3-snapshot.v20250329015344 --save-exact
npm i @clerk/testing@1.4.34-snapshot.v20250329015344 --save-exact
npm i @clerk/vue@1.4.6-snapshot.v20250329015344 --save-exact |
jacekradko
force-pushed
the
feat/nextjs-middleware-csp
branch
from
567fd27 to
fe18c38
Compare
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a new Content Security Policy (CSP) middleware for Next.js that automatically generates and injects a Clerk-compatible CSP header. Key changes include:
- Implementation of a new CSP management module (content-security-policy.ts) to build, format, and merge CSP directives.
- Enhancements to the clerk middleware to inject the CSP header and handle nonce configuration.
- Comprehensive tests ensuring the correct generation of CSP headers and integration in the app router.
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 | New module for creating and managing CSP header directives |
| packages/nextjs/src/server/clerkMiddleware.ts | Middleware updated to inject the generated CSP header |
| packages/nextjs/src/server/tests/content-security-policy.test.ts | Added tests to cover CSP header generation and merging |
| packages/nextjs/src/app-router/server/ClerkProvider.ts | Updated to extract and use the nonce from the CSP header |
| .changeset/vast-clubs-speak.md | Changeset metadata documenting the new Clerk-compatible CSP header |
Member
Author
|
!snapshot |
Collaborator
|
Hey @jacekradko - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.0.17-snapshot.v20250331160008 --save-exact
npm i @clerk/astro@2.4.6-snapshot.v20250331160008 --save-exact
npm i @clerk/backend@1.26.0-snapshot.v20250331160008 --save-exact
npm i @clerk/chrome-extension@2.2.24-snapshot.v20250331160008 --save-exact
npm i @clerk/clerk-js@5.59.0-snapshot.v20250331160008 --save-exact
npm i @clerk/elements@0.23.9-snapshot.v20250331160008 --save-exact
npm i @clerk/clerk-expo@2.9.7-snapshot.v20250331160008 --save-exact
npm i @clerk/expo-passkeys@0.2.1-snapshot.v20250331160008 --save-exact
npm i @clerk/express@1.3.60-snapshot.v20250331160008 --save-exact
npm i @clerk/fastify@2.1.33-snapshot.v20250331160008 --save-exact
npm i @clerk/localizations@3.13.5-snapshot.v20250331160008 --save-exact
npm i @clerk/nextjs@6.12.13-snapshot.v20250331160008 --save-exact
npm i @clerk/nuxt@1.4.7-snapshot.v20250331160008 --save-exact
npm i @clerk/clerk-react@5.25.6-snapshot.v20250331160008 --save-exact
npm i @clerk/react-router@1.1.12-snapshot.v20250331160008 --save-exact
npm i @clerk/remix@4.5.12-snapshot.v20250331160008 --save-exact
npm i @clerk/shared@3.3.0-snapshot.v20250331160008 --save-exact
npm i @clerk/tanstack-react-start@0.12.3-snapshot.v20250331160008 --save-exact
npm i @clerk/testing@1.4.34-snapshot.v20250331160008 --save-exact
npm i @clerk/themes@2.2.27-snapshot.v20250331160008 --save-exact
npm i @clerk/types@4.50.2-snapshot.v20250331160008 --save-exact
npm i @clerk/vue@1.4.6-snapshot.v20250331160008 --save-exact |
Member
Author
|
!snapshot |
Collaborator
|
Hey @jacekradko - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.0.17-snapshot.v20250331163215 --save-exact
npm i @clerk/astro@2.4.6-snapshot.v20250331163215 --save-exact
npm i @clerk/backend@1.26.0-snapshot.v20250331163215 --save-exact
npm i @clerk/chrome-extension@2.2.24-snapshot.v20250331163215 --save-exact
npm i @clerk/clerk-js@5.59.0-snapshot.v20250331163215 --save-exact
npm i @clerk/elements@0.23.9-snapshot.v20250331163215 --save-exact
npm i @clerk/clerk-expo@2.9.7-snapshot.v20250331163215 --save-exact
npm i @clerk/expo-passkeys@0.2.1-snapshot.v20250331163215 --save-exact
npm i @clerk/express@1.3.60-snapshot.v20250331163215 --save-exact
npm i @clerk/fastify@2.1.33-snapshot.v20250331163215 --save-exact
npm i @clerk/localizations@3.13.5-snapshot.v20250331163215 --save-exact
npm i @clerk/nextjs@6.12.13-snapshot.v20250331163215 --save-exact
npm i @clerk/nuxt@1.4.7-snapshot.v20250331163215 --save-exact
npm i @clerk/clerk-react@5.25.6-snapshot.v20250331163215 --save-exact
npm i @clerk/react-router@1.1.12-snapshot.v20250331163215 --save-exact
npm i @clerk/remix@4.5.12-snapshot.v20250331163215 --save-exact
npm i @clerk/shared@3.3.0-snapshot.v20250331163215 --save-exact
npm i @clerk/tanstack-react-start@0.12.3-snapshot.v20250331163215 --save-exact
npm i @clerk/testing@1.4.34-snapshot.v20250331163215 --save-exact
npm i @clerk/themes@2.2.27-snapshot.v20250331163215 --save-exact
npm i @clerk/types@4.50.2-snapshot.v20250331163215 --save-exact
npm i @clerk/vue@1.4.6-snapshot.v20250331163215 --save-exact |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Adding the ability to automatically inject the CSP header through
@clerk/nextjsmiddleware.Closes: SDKI-913
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change