Skip to content

Conversation

@jescalan
Copy link
Contributor

@jescalan jescalan commented Jul 31, 2024

Description

When using a strict-dynamic content security policy, Clerk currently will not work, as we do not pass a nonce to the hotloaded clerk-js script. This PR adds a nonce prop to ClerkProvider that can be used to thread the nonce value through to the clerk-js script load. It also includes an extra feature for next.js where the nonce will be automatically pulled from the CSP header and threaded through without needing any props so long as the provider is server-rendered.

Checklist

  • npm test runs as expected.
  • npm run 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

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@jescalan jescalan requested review from brkalow and nikosdouvlis July 31, 2024 21:53
@changeset-bot
Copy link

changeset-bot bot commented Jul 31, 2024

🦋 Changeset detected

Latest commit: 07a0c76

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

This PR includes changesets to release 15 packages
Name Type
@clerk/nextjs Minor
@clerk/shared Minor
@clerk/clerk-react Minor
@clerk/clerk-js Minor
@clerk/astro Patch
@clerk/backend Patch
@clerk/chrome-extension Patch
@clerk/elements Patch
@clerk/clerk-expo Patch
@clerk/express Patch
@clerk/fastify Patch
@clerk/remix Patch
@clerk/clerk-sdk-node Patch
@clerk/tanstack-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

@brkalow brkalow changed the title Add 'nonce' prop to ClerkProvider feat(clerk-react): Add 'nonce' prop to ClerkProvider Jul 31, 2024
Copy link
Member

@brkalow brkalow left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Needs a changeset!

// extra layer.
if (/[&><\u2028\u2029]/g.test(nonce)) {
throw new Error(
'Nonce value from Content-Security-Policy contained HTML escape characters.\nLearn more: https://nextjs.org/docs/messages/nonce-contained-invalid-characters',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's expand the error message and change the link here 👀

@nikosdouvlis
Copy link
Member

Added a changeset to let the tests run :)

@jescalan jescalan requested a review from brkalow August 5, 2024 14:21
Copy link
Member

@brkalow brkalow left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏

@brkalow brkalow merged commit 59d5f19 into main Aug 6, 2024
@brkalow brkalow deleted the je.add-nonce-to-clerkprovider branch August 6, 2024 21:47
wobsoriano pushed a commit that referenced this pull request Aug 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants