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 URLs come from the Setup page:

// svelte.config.js
export default {
  kit: {
    csp: {
      mode: 'auto',
      reportOnly: {
        'default-src': ['self'],
        // SvelteKit only adds quotes to the keywords it knows, so this one carries its own.
        'script-src': ['self', "'report-sha256'"],
        'report-uri': ['https://abc123.report-uri.com/r/d/csp/reportOnly'],
        'report-to': ['default'],
      },
    },
  },
}

SvelteKit's CSP config does not set the two Reporting API headers, so add them in a server hook:

// src/hooks.server.js
export async function handle({ event, resolve }) {
  const response = await resolve(event)
  response.headers.set('Reporting-Endpoints', 'default="https://abc123.report-uri.com/a/d/g"')
  response.headers.set('Report-To', JSON.stringify({
    group: 'default',
    max_age: 31536000,
    endpoints: [{ url: 'https://abc123.report-uri.com/a/d/g' }],
    include_subdomains: true,
  }))
  return response
}

The Reporting-Endpoints and Report-To headers tell the browser where report-to default sends reports, including the CSP Integrity reports that 'report-sha256' turns on.

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 CSP reporting directives on Setup, or view your CSP reports.

New to Report URI? Create an account and grab your CSP reporting directives from the Setup page.

Start your free trial