Hello security-minded developers! Have you struggled in the past to maintain a Content Security Policy for your site? We feel your pain – that’s why today we are open-sourcing our new CSP Integration that injects a dynamic nonce at request-time into the script-src directive of your CSP. As a result, you will no longer need to manually maintain an allowlist of domains for this directive!
Search in the Netlify UI for CSP Integration. This lets you configure the integration entirely in the UI, with just a couple of clicks! If you prefer a configuration-as-code approach, you can install the npm package directly.
After setting up, trigger a new deploy. You can test in a Deploy Preview too, before going live. By default, this will inject a Content-Security-Policy-Report-Only header, so that you can test and monitor against production traffic, without actually blocking resources. When all looks good, you can flip this to be the real deal Content-Security-Policy header, to stop potential client-side attackers in their tracks.
Check the output of your built HTML to confirm: you’ll notice a nonce attribute on every <script> tag. This gets dynamically generated on every request!
We use this ourselves on app.netlify.com – inspect our DOM to see for yourself!
Read How I learned to stop worrying and love the Content Security Policy on our blog to learn more about this integration and the importance of a CSP!
Head to the integration repo to file any feature requests or bug reports.
Let us know what you think here in the comments!