React CRA with CSP: Refused to execute inline script

Question

I have set up a new website using the Material UI Create React Template.

I added a Content Security Policy, built successfully and deployed, however the page doesn't display in the browser and I receive the following error:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-mB4hl8euSw00eXDUIRf8KeqpMfBXgg0FILGScPTo+n0='), or a nonce ('nonce-...') is required to enable inline execution.

I don't have any inline scripts.

When I add the specified hash to my Content Security Policy, the website works, but if I deploy again, the hash changes and I need to update my Content Security Policy with the new hash.

Where does the hash comes from and is it possible to avoid needing to update the hash manually each time during deployment?

Answer 1

Thanks for your help so far. I have found the answer to the issue so I'll share it in the hope that it helps someone else.

According to the Advanced Configuration section in the Create React App docs:

By default, Create React App will embed the runtime script into index.html during the production build.

This appears to be the source of the dynamically built scripts.

The documents go further to suggest that the INLINE_RUNTIME_CHUNK=false flag should be included in an .env file to avoid the embedding of scripts.

By including the INLINE_RUNTIME_CHUNK=false flag in an .env file, rebuilding and deploying, I was able to resolve the issue.