svelte-kit-csp-handler v0.1.1
⚠️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'
anddefault-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
.