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 page:

// 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, Cloudflare or 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

Start Monitoring with Report URI

Already using us for CSP? Find your report-uri value on Setup, or view your CSP reports.

New to Report URI? Create an account and grab your report-uri value from the Setup page.

Start your free trial