title |
---|
Security |
By default, Sapper does not add security headers to your app, but you may add them yourself using middleware such as Helmet.
Sapper generates inline <script>
s and <style>
s, which can fail to execute if Content Security Policy (CSP) headers disallow arbitrary script execution (unsafe-inline
) or style parsing (unsafe-inline
).
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.