The Content-Security-Policy
header mitigates a large number of attacks, such as [cross-site scripting][XSS]. See MDN's introductory article on Content Security Policy.
This header is powerful but likely requires some configuration for your specific app.
To configure this header, pass an object with a nested directives
object. Each key is a directive name in camel case (such as defaultSrc
) or kebab case (such as default-src
). Each value is an array (or other iterable) of strings or functions for that directive. If a function appears in the array, it will be called with the request and response objects.
const contentSecurityPolicy = require("helmet-csp");
// Sets all of the defaults, but overrides `script-src`
// and disables the default `style-src`.
app.use(
contentSecurityPolicy({
directives: {
"script-src": ["'self'", "example.com"],
"style-src": null,
},
}),
);
// Sets the `script-src` directive to
// "'self' 'nonce-e33cc...'"
// (or similar)
app.use((req, res, next) => {
res.locals.cspNonce = crypto.randomBytes(32).toString("hex");
next();
});
app.use(
contentSecurityPolicy({
directives: {
scriptSrc: ["'self'", (req, res) => `'nonce-${res.locals.cspNonce}'`],
},
}),
);
These directives are merged into a default policy, which you can disable by setting useDefaults
to false
.
// Sets "Content-Security-Policy: default-src 'self';
// script-src 'self' example.com;object-src 'none';
// upgrade-insecure-requests"
app.use(
contentSecurityPolicy({
useDefaults: false,
directives: {
defaultSrc: ["'self'"],
scriptSrc: ["'self'", "example.com"],
objectSrc: ["'none'"],
upgradeInsecureRequests: [],
},
}),
);
You can get the default directives object with contentSecurityPolicy.getDefaultDirectives()
. Here is the default policy (formatted for readability):
default-src 'self';
base-uri 'self';
font-src 'self' https: data:;
form-action 'self';
frame-ancestors 'self';
img-src 'self' data:;
object-src 'none';
script-src 'self';
script-src-attr 'none';
style-src 'self' https: 'unsafe-inline';
upgrade-insecure-requests
The default-src
directive can be explicitly disabled by setting its value to contentSecurityPolicy.dangerouslyDisableDefaultSrc
, but this is not recommended.
You can set the Content-Security-Policy-Report-Only
instead:
// Sets the Content-Security-Policy-Report-Only header
app.use(
contentSecurityPolicy({
directives: {
/* ... */
},
reportOnly: true,
}),
);
This module performs very little validation on your CSP. You should rely on CSP checkers like CSP Evaluator instead.