Implement CSP support in Volto

[nileshgulia1]

Is your feature request related to a problem? Please describe.
Some JS scripts or third parties have unsafe-eval for their functionality. This is caused by the way webpack bundles the scripts, so it's not something that we can avoid. This impacts the security score of websites at EEA and in general.

Webpack provides a mechanism to mark scripts with a nonce string, which can then be added as a value in the CSP headers. This would properly identify the scripts to the browser and would get rid of this security vulneratiblity.

The task is to implement Webpack's CSP support in Volto, so that it can propagate to all Volto websites.

Deliverables
1 . We can generate nonces in Volto's SSR process and provide them to scripts and possibly styles too. That would mark them as "trusted" and potentially any other scripts loaded from those scripts as well.
2. Having a env var configuration something like:

config.settings.serverConfig.csp = {
      'script-src': `'self' {nonce}`,
    };

The nonce placeholder will be replaced by actual nonce at runtime. The CSP config will be then passed as Content-Security policy response header.

Assumptions:

Most websites already set these headers using a reverse proxy or HAProxy, which will override this setting. I suggest we handle it so that if the header contains a nonce placeholder, it gets replaced with the nonce generated by the express server.

[nileshgulia1]

Note: We already use a working solution for this on the EEA main portal. I’ll put together a PR and can discuss it with the Volto team.

[JeffersonBledsoe]

We've been using a solution we started working a little while ago. Might be something useful in here:

https://github.com/collective/volto-csp/tree/main

The current version creates a hash for each of the scripts generated in the Volto HTML and then allows you to use env variables to add additional CSP configuration as neccessary. It does use the <meta> tag rather than setting the header so it does lose some functionality, but its been working well.

[nileshgulia1]

We've been using a solution we started working a little while ago. Might be something useful in here:

https://github.com/collective/volto-csp/tree/main

The current version creates a hash for each of the scripts generated in the Volto HTML and then allows you to use env variables to add additional CSP configuration as neccessary. It does use the <meta> tag rather than setting the header so it does lose some functionality, but its been working well.

That looks really good. I went through the code. Personally, I don’t think having separate environments for each directive is the best idea. In EEA, we created a placeholder approach—it’s not the most convenient, but it does cover many cases and gives the user the flexibility to use whatever they want. We also need to think about how to handle style-src.