Content Security Policy (CSP) in the Tanstack Start Supabase Turbo kit

The Tanstack Start Supabase Turbo kit provides a secure way to include CSP headers in your application. The strict, nonce-based CSP is built in apps/web/src/lib/csp.server.ts and emitted from the global request middleware in apps/web/src/start.ts.

How to enable a strict CSP

To enable a strict CSP, you need to set the following environment variable:

ENABLE_STRICT_CSP=true

By default, this setting is disabled due to the overhead required for development. While this is a bit advanced, it is recommended to enable it before going to production - or at some point in your development process.

Once enabled, the CSP headers will be automatically added to the response headers using the Tanstack Start middleware.

Making your application compliant with CSP

Enabling a strict CSP has a few consequences on your application - you will need to make sure your application is compliant with the CSP rules.

1. You will need to add the nonce to any third-party script tags or stylesheets you have in your application.
2. If you make external HTTP requests, you will need to add the domains to the default list of allowed domains (by default, only requests to your Supabase project are allowed).

Adding a nonce to your application

The per-request nonce is generated by the security-headers middleware and exposed on the global Start context. TanStack Start also emits it as a csp-nonce meta tag, so framework-injected scripts are tagged automatically. Inside a route component you can read the current nonce from the router options:

import { useRouter } from "@tanstack/react-router";
const nonce = useRouter().options.ssr?.nonce;

If you want to pass the nonce to a Script tag, you can do so by adding the nonce attribute to the script tag.

<script nonce={nonce} src="https://example.com/script.js"></script>

Modifying the default CSP configuration

To modify the CSP configuration, edit the apps/web/src/lib/csp.server.ts file. You may need to do this to allow safe external requests that your application makes.

Add the origins your application needs to the relevant arrays — for example CONNECT_SRC_ORIGINS for fetch/XHR/websocket endpoints, IMG_SRC_ORIGINS for external images, or FRAME_SRC_ORIGINS for embedded iframes. These are then merged into the directives built by buildContentSecurityPolicy.

/**
 * Additional origins allowed for `connect-src` (XHR/fetch/websocket). Add API,
 * analytics, or webhook origins here when the strict CSP is enabled.
 */
const CONNECT_SRC_ORIGINS: string[] = [
  // Turnstile verification requests.
  'https://challenges.cloudflare.com',
  // Supabase API (auth/PostgREST/Storage) + Realtime websocket.
  ...(SUPABASE_ORIGIN && SUPABASE_WEBSOCKET_ORIGIN
    ? [SUPABASE_ORIGIN, SUPABASE_WEBSOCKET_ORIGIN]
    : []),
];
/**
 * Additional origins allowed for `img-src`.
 */
const IMG_SRC_ORIGINS: string[] = [
  // Supabase Storage images.
  ...(SUPABASE_ORIGIN ? [SUPABASE_ORIGIN] : []),
];