12-security.md

title
Security

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

Content Security Policy (CSP)

Sapper generates 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.