Volto addon to provide Content Security Policy (CSP) headers to a volto site.
For more information on CSP see: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
This package sets the necessary <meta http-equiv="Content-Security-Policy"> tag in the head section of a rendered page.
It automtacially adds the hash values for inline scripts generated by volto, meaning unsafe-inline need not be used when hosting a volto site.
Add the following lines to your package.json:
"addons": [
"volto-csp"
],
and run yarn build
This addon is enabled by setting one or more of the RAZZLE_CSP_... headers.
E.g. to set the default-src directive to 'self' data: https: you would set:
RAZZLE_CSP_DEFAULT_SRC="'self' data: https:"
Every valid CSP header can be set this way.
CSP directives can be added to RAZZLE_CSP_ by taking the directive name, swappings hyphens (-) to underscores (_) and making it uppercase.
Some common values are:
| Directive | Environment Variable |
|---|---|
default-src |
RAZZLE_CSP_DEFAULT_SRC |
script-src |
RAZZLE_CSP_SCRIPT_SRC |
font-src |
RAZZLE_CSP_FONT_SRC |
The full list of environment variables is below.
Volto includes a number of inline scripts. Good practice is to not use the unsafe-inline source value for script-src. This package creates sha256 hashes of the inline scripts and includes those hash digests as sources in any script-src directive.
If RAZZLE_CSP_DEFAULT_SRC is set and no value for RAZZLE_CSP_SCRIPT_SRC is set. Then the addon will add the script-src directive as a duplicate of the default-src with the hashed inline scripts added.
Volto allows you to automatically include critical css as inline styles.
This addon will generate and add the necessary hashsum for the critical css to the style-src directive.
The addon has not been configured to work with single page critical css. If you are setting settings.serverConfig.readCricitalCss the checksum will likely not match. It may be possible to integrate this kind of config in future, please raise an issue if you need make use of it.
If you set RAZZLE_CSP_DEFAULT_SRC or RAZZLE_CSP_STYLE_SRC and are running in development mode, this addon will automatically include the 'unsafe-inline' to the style-src directive. This is because in development mode Volto adds a lot of inline styles which would otherwise be blocked.
Future versions of this addon may be able to generate and add the hashes for inline styles.
As this package adds the policy via meta http-equiv tags it has some limitations vs setting http headers:
- The following directives aren't supported:
- report-uri
- frame-ancestors
- sandbox
This means that if you wish to enable CSP reporting, you will not be able to use this addon. A workaround is to set the same policy via HTTP headers using Content-Security-Policy-Report-Only. This would give you error reporting as well as the additional script hashing provided by this package. In this scenario, you would need to enable unsafe-inline in the http headers for script-src (otherwise you would get reports every time a page is rendered).
RAZZLE_CSP_DEFAULT_SRC
RAZZLE_CSP_SCRIPT_SRC
RAZZLE_CSP_STYLE_SRC
RAZZLE_CSP_BASE_URI
RAZZLE_CSP_BLOCK_ALL_MIXED_CONTENT
RAZZLE_CSP_CHILD_SRC
RAZZLE_CSP_CONNECT_SRC
RAZZLE_CSP_FONT_SRC
RAZZLE_CSP_FORM_ACTION
RAZZLE_CSP_FRAME_SRC
RAZZLE_CSP_IMG_SRC
RAZZLE_CSP_MANIFEST_SRC
RAZZLE_CSP_MEDIA_SRC
RAZZLE_CSP_OBJECT_SRC
RAZZLE_CSP_REQUIRE_TRUSTED_TYPES_FOR
RAZZLE_CSP_SCRIPT_SRC_ATTR
RAZZLE_CSP_SCRIPT_SRC_ELEM
RAZZLE_CSP_STYLE_SRC_ATTR
RAZZLE_CSP_STYLE_SRC_ELEM
RAZZLE_CSP_TRUSTED_TYPES
RAZZLE_CSP_UPGRADE_INSECURE_REQUESTS
RAZZLE_CSP_WORKDER_SRC
A server side console warning will be displayed if the following are used. The headers will still be added to the meta tag.
RAZZLE_CSP_PLUGIN_TYPES
RAZZLE_CSP_PREFETCH_SRC
RAZZLE_CSP_REFERRER
These directives are not compatible with meta tag syntax and will not be added.
RAZZLE_CSP_FRAME_ANCESTORS
RAZZLE_CSP_SANDBOX
RAZZLE_CSP_REPORT_TO
RAZZLE_CSP_REPORT_URI
Jon Pentland, PretaGov Ltd
This addon is packaged under the MIT licence. See LICENCE.md.