diff --git a/docs/components/clerk-provider.mdx b/docs/components/clerk-provider.mdx index 7d723c8bc5..ecd5a10ecc 100644 --- a/docs/components/clerk-provider.mdx +++ b/docs/components/clerk-provider.mdx @@ -226,7 +226,7 @@ The `` 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. --- diff --git a/docs/security/clerk-csp.mdx b/docs/security/clerk-csp.mdx index a0b503183e..b5e81c0f2c 100644 --- a/docs/security/clerk-csp.mdx +++ b/docs/security/clerk-csp.mdx @@ -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, ``. 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 `` 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' }}