Configure Clerk Content-Security-Policy headers
Content-Security-Policy (CSP) headers secure your document by preventing resources from being loaded from unexpected sources. This protects your apps from XSS attacks and data injections.
For Clerk to work correctly in your application, you'll need to configure the following CSP directives:
script-src
– This value should include the host application's FAPI hostname, such ashttps://clerk.your-domain.com
.connect-src
– This value should also include the host application's FAPI hostname, such ashttps://clerk.your-domain.com
.img-src
– This value should behttps://img.clerk.com
.worker-src
- Use the'self'
value to indicate that workers can be loaded from first-party scripts. Theblob:
schema value also needs to be included.style-src
- Due to Clerk's usage of runtime CSS-in-JS for styling,'unsafe-inline'
needs to be included.
The following example demonstrates a Next.js config file that sets the necessary directives for your application's assets and Clerk to load and function correctly. The values used apply to your currently selected instance, make sure to handle both your development instance and production instance hosts.
Feedback
Last updated on