sapper/site/content/docs/12-security.md

title

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, which can fail to execute if Content Security Policy (CSP) headers disallow arbitrary script execution (unsafe-inline).

To work around this, Sapper can inject a nonce which can be configured with middleware to emit the proper CSP headers. 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.