---
description: SvelteKit's built-in Content Security Policy support, its hash, nonce and auto modes, and how to send violation reports to Report URI.
---

# SvelteKit

SvelteKit has the most complete built-in CSP support of any framework here. It is configuration rather than middleware, it handles hashes and nonces for the markup it generates, and report-only is a first-class flag rather than something you assemble yourself.

## What SvelteKit gives you

- A `csp` block in `svelte.config.js` with `directives`, `reportOnly` and `mode`.
- `mode: 'nonce'` - SvelteKit augments the specified directives with nonces for any inline scripts and styles it generates.
- `mode: 'hash'` - the same, using hashes instead.
- `mode: 'auto'` - nonces for dynamically rendered pages, hashes for prerendered ones. SvelteKit **forbids** nonces on prerendered pages because a nonce baked into a static file is not a nonce, which is a good default to have enforced for you.
- A `%sveltekit.nonce%` placeholder for scripts and links you have added manually in `src/app.html`.

## Setting the header

Report-only is a separate directive set, so you can run one while tuning. Your URL comes from the [Setup](https://report-uri.com/account/setup/) page:

```js
// svelte.config.js
export default {
  kit: {
    csp: {
      mode: 'auto',
      reportOnly: {
        'default-src': ['self'],
        'script-src': ['self'],
        'report-uri': ['https://abc123.report-uri.com/r/d/csp/reportOnly'],
      },
    },
  },
}
```

Move the same directives to `directives` and switch the endpoint to `enforce` when you are ready.

## Things to watch for

- **Prerendered pages deliver the policy as a `<meta http-equiv>` tag, and `frame-ancestors`, `report-uri` and `sandbox` are ignored there.** SvelteKit's own documentation says so. If your site is prerendered, the policy still applies but you will receive no reports from those pages - and that is silent. To get reports, the header has to come from whatever serves the files: see our [Nginx](/frameworks/nginx/), [Cloudflare](/platforms/cloudflare/) or [Netlify](/platforms/netlify/) pages.
- `mode: 'auto'` means a page's CSP mechanism changes when you change its prerender setting. A route that starts reporting fine and stops after being made prerenderable is this, not a bug.
- SvelteKit only manages hashes and nonces for markup it generates. Anything you add yourself in `app.html` needs `%sveltekit.nonce%`, and third-party scripts need their own entries.

## Official documentation

[SvelteKit - Configuration](https://svelte.dev/docs/kit/configuration)

## Start Monitoring with Report URI

**Already using us for CSP?** Find your report-uri value on [Setup](https://report-uri.com/account/setup/), or view your [CSP reports](https://report-uri.com/account/reports/csp/).

**New to Report URI?** Create an account and grab your report-uri value from the [Setup](https://report-uri.com/account/setup/) page.

[Start your free trial](https://report-uri.com/register/?plan=starter2025)