xx-security.md

title
Security

By default, SvelteKit does not add security headers to your app, but you may add them yourself using middleware such as Helmet.

Content Security Policy (CSP)

SvelteKit does not yet support CSP.

Sapper supported CSP by generating inline <script>s and <style>s, which can fail to execute if Content Security Policy (CSP) headers do not allow javascript or stylesheets sourced from inline resources.

To work around this, Sapper can inject a nonce which can be configured with middleware to emit the proper CSP headers. The nonce will be applied to the inline <script>s and <style>s. Here is an example using Express and Helmet:

// server.js
import uuidv4 from 'uuid/v4';
import helmet from 'helmet';

app.use((req, res, next) => {
	res.locals.nonce = uuidv4();
	next();
});
app.use(helmet({
	contentSecurityPolicy: {
		directives: {
			scriptSrc: [
				"'self'",
				(req, res) => `'nonce-${res.locals.nonce}'`
			]
		}
	}
}));
app.use(sapper.middleware());

Using res.locals.nonce in this way follows the convention set by Helmet's CSP docs.

If a CSP nonce is set via res.locals.nonce, you can refer to that value via tag %sapper.cspnonce% in src/template.html. For instance:

<script nonce="%sapper.cspnonce%" src="..."></script>