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:

1. script-src - This value should include the host application's FAPI hostname, such as https://clerk.your-domain.com, as well as cloudflare's bot protection host, https://challenges.cloudflare.com.
2. connect-src - This value should also include the host application's FAPI hostname, such as https://clerk.your-domain.com.
3. img-src - This value should be https://img.clerk.com.
4. worker-src - Use the 'self' value to indicate that workers can be loaded from first-party scripts. The blob: schema value also needs to be included.
5. style-src - Due to Clerk's usage of runtime CSS-in-JS for styling, 'unsafe-inline' needs to be included.
6. frame-src - This value should also include cloudflare's bot protection host, https://challenges.cloudflare.com.

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.

const cspHeader = `
  default-src 'self';
  script-src 'self' 'unsafe-inline' 'unsafe-eval' https://YOUR_FRONTEND_API_URL https://challenges.cloudflare.com;
  connect-src 'self' https://YOUR_FRONTEND_API_URL;
  img-src 'self' https://img.clerk.com;
  worker-src 'self' blob:;
  style-src 'self' 'unsafe-inline';
  frame-src 'self' https://challenges.cloudflare.com;
`;

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Content-Security-Policy",
            value: cspHeader.replace(/\n/g, ""),
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

Usage of unsafe-eval and unsafe-inline directives in Next.js

• Within script-src, unsafe-eval is a requirement for Next.js to run in development mode. For production environment CSPs, it should be removed.
• Within script-src, unsafe-inline is a requirement for Next.js in both dev and prod environments if you're using the App Router. If you are using the Pages Router, it should be removed.
• Within style-src, unsafe-inline is a requirement for Clerk's components to inject their styles. Removing this requirement is on our roadmap - please reach out to support if you'd like to see this implemented sooner.