Minimal React Setup to run suomifi-ui-components in strict CSP with the help of nonce.
- To install required dependencies, build and serve it:
yarn start:fresh - Open your browser at
localhost:5000.
- Strict Content-Security-Policy
- suomifi-ui-components
- uuid, for generating nonce
- react-helmet, adding meta-tag which does contains generated nonce
Content-Security-Policy is set to be quite finicky and not allowing too much.
<meta
http-equiv="Content-Security-Policy"
content="default-src 'none'; base-uri 'self'; object-src 'none';
script-src 'self' 'nonce-xxx'; style-src 'self' 'nonce-xxx';
font-src 'self'; connect-src 'self'; img-src 'self';"
/>
In the meta-tag the nonce-xxx has the xxx replaced with the generated value.
You should handle the nonce generation based on your own setup. The simple example of this project is not maybe the way-to-go.
If you serve your application with node.js, you can e.g use helmet-csp You can read more about the CSP from their docs: https://helmetjs.github.io/docs/csp/
MIT LICENSE