Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a note that dynamic is required for the nonce prop #1685

Merged
merged 4 commits into from
Nov 12, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/components/clerk-provider.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@ The `<ClerkProvider>` component must be added to your React entrypoint.
- `nonce?`
- `string`

This nonce value will be passed through to the `@clerk/clerk-js` script tag. You can use this to implement [strict-dynamic CSP](/docs/security/clerk-csp#implementing-a-strict-dynamic-csp).
This nonce value will be passed to the `@clerk/clerk-js` script tag. Use it to implement a [strict-dynamic CSP](/docs/security/clerk-csp#implementing-a-strict-dynamic-csp). Requires the `dynamic` prop to also be set.

---

Expand Down
3 changes: 3 additions & 0 deletions docs/security/clerk-csp.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,9 @@ export const config = {

With this `strict-dynamic` configuration in place, **all script tags must be passed with a `nonce` value** or they will be blocked. This can be done by passing the nonce value as a `nonce` parameter to the script tag. For example, `<script src="https://example.com/script.js" nonce="<nonce_value>"></script>`. If you are using Next.js, any scripts loaded through next will automatically have the nonce value injected.

> [!NOTE]
> You must pass the [`dynamic` prop](/docs/components/clerk-provider#properties) to `<ClerkProvider>` for `strict-dynamic` CSPs to work correctly. This is because the nonce value is generated on the server and passed to the client, which requires dynamic rendering.

With the above middleware, the nonce value is made accessible via the `x-nonce` request header. An example is provided below on how to access this value within a Next.js page.

```tsx {{ filename: 'pages/index.tsx' }}
Expand Down
Loading