⚠️WARNING⚠️: This is pre-release for a reason!

These are the current 1.0 release blockers:

• CSP nonces are currently not implemented in SvelteKit, but but hopefully will be soon.

• Also, there's an upstream issue blocking the use of 'strict-dynamic' and default-src.

SvelteKit CSP Handler

Typed CSP handler for SvelteKit.

Installation

npm i -D svelte-kit-csp-handler

Usage

You simply import the hook and plop it into your hooks.js.

import { handleCSP } from 'svelte-kit-csp-handler';

const options = {
    directives: {
        csp: {
            'default-src': ['*'],
            'script-src': ['strict-dynamic'],
        },
        sendReportsTo: {
            group: "some-name",
            max_age: 604800,
            endpoints: [
                { url: 'csp.mydomain.com' },
                { url: 'https://examplePublicKey@o0.ingest.sentry.io/0'}
            ]
        },
        reportCsp: {
            'default-src': ['self']
        },
        referrerPolicy: 'strict-origin'
    },
}

export const handle = handleCSP(options)

Or, if you want to use multiple hooks, put it as part of a sequence:

import { handleCSP } from 'svelte-kit-csp-handler';
import { handleSomethingElse } from './handleSomethingElse';
import { sequence } from '@sveltejs/kit/hooks';

const options = {
    directives: {
        csp: {
            'default-src': ['*'],
            'script-src': ['strict-dynamic'],
        },
        sendReportsTo: {
            group: "some-name",
            max_age: 604800,
            endpoints: [
                { url: 'csp.mydomain.com' },
                { url: 'https://examplePublicKey@o0.ingest.sentry.io/0'}
            ]
        },
        reportCsp: {
            'default-src': ['self']
        },
        referrerPolicy: 'strict-origin'
    },
}

export const handle = sequence(handleCSP(options), handleSomethingElse)

Configuration

The handle function takes an 'options' argument:

export interface CSPHandlerOptions {
    directives: {
        csp?: DirectivesObj,
        sendReportsTo?: ReportToObj,
        reportCsp?: DirectivesObj,
        referrerPolicy?: ReferrerHeaderOptionsList,
    },
    html?: boolean,
    http?: boolean,
    transitionsWorkaround?: boolean,
}

directives is the typed CSP headers object. directives.csp are the regular Content Security Policy header, directives.sendReportsTo are the endpoints to send CSP reports to, directives.reportCsp are Policies which will generate reports but will not block resources, and referrerPolicy is the Referrer-Policy header.

See MDN Web Docs for a specification of the Content Security Policy headers and their effects.

html and http controls where the policy is inserted; as HTML meta tags, HTTP headers, both, or (though it would be weird to do so) neither. Default is to insert in HTTP headers only.

Note that HTML meta tags only supports 'Content-Security-Policy', so only directives.csp will have any effect. The report-uri, frame-ancestors and sandbox directives are also not supported. See https://content-security-policy.com/examples/meta/. In general, it is recommended to use HTTP headers when possible.

transitionsWorkaround (default: true) inserts a style-src hash for an empty tag. This is a workaround for a known issue in Svelte, which normally prevents some features (transitions and animations) from working without unsafe-inline.

handleCSP will automatically insert CSP nonces generated by SvelteKit into the CSP headers if you've enabled kit.cspNonce.