5

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?

Tejogol
  • 670
  • 8
  • 24
  • Does this answer your question? [Chrome showing error as: Refused to execute inline script because of Content-Security-Policy](https://stackoverflow.com/questions/16145522/chrome-showing-error-as-refused-to-execute-inline-script-because-of-content-sec) – ShinaBR2 Aug 27 '20 at 03:14

3 Answers3

19

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.

Tejogol
  • 670
  • 8
  • 24
  • 5
    Where did you include the .env file? In my file structure, I have two folders: backend and frontend, and I have .env file in the root, but it didn't work! – BlackMath Mar 14 '21 at 02:33
0

Googletagmanager adds inline scripts to your page. You will not be able to enforce a strict script-src (without unsafe-inline) with googletagmanager unless you set this up as follows: https://developers.google.com/tag-manager/web/csp

There could also be other dynamically built scripts that you will also need to handle.

Halvor Sakshaug
  • 2,583
  • 1
  • 6
  • 9
  • 1
    Yes, I think that there are other dynamically built scripts that are generating the hash. Any ideas about how to handle them? – Tejogol Aug 27 '20 at 13:15
  • You'll first need to decide if you want to keep or modify calling of googletagmanager. If you are not going to provide a nonce you will need to allow unsafe-inline. Then you should identify inline scripts see where they come from. Then you will need to either fix them, insert nonce if possible or a hash dynamically. If it is an old framework creating the script tags you may be out of luck... – Halvor Sakshaug Aug 27 '20 at 18:14
0

For me the issue was script-src tag was supplied by my backend api that's service the react bundle. It's apparently included with the helmet middleware and I was using that. Once I removed it, it started working.

cigien
  • 57,834
  • 11
  • 73
  • 112
amitava mozumder
  • 788
  • 6
  • 17