Well, I think it is too late and many others have the solution so far.
But I hope this can Help:
I'm using react for an identity server so 'unsafe-inline' is not an option at all. If you look at your console and actually read the CSP docs, you might find that there are three options for solving the issue:
'unsafe-inline' as it says is unsafe if your project is using CSPs is for one reason and it is like throwing out the complete policy, will be the same to no have CSP policy at all
'sha-XXXCODE' this is good, safe but not optimal because there is a lot of manual work and every compilation the SHA might change so it will become easily a nightmare, use only when the script or style is unlikely to change and there are few references
Nonce. This is the winner!
Nonce works in the similar way as scripts
CSP HEADER
///csp stuff nonce-12331
<script nonce="12331">
//script content
</script>
Because the nonce in the csp is the same that the tag, the script will be executed
In the case of inline styles, the nonce also came in the form of attribute so the same rules apply.
so generate the nonce and put it on your inline scritps
If you are using webpack maybe you are using the style-loader
the following code will do the trick
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: 'style-loader',
options: {
attributes: {
nonce: '12345678',
},
},
},
'css-loader',
],
},
],
},
};