CSP error while serving with express (with helmet) an app created with create-react-app

Question

I\'m struggling with serving a build created with "create-react-app" using Express with Helmet. I\'m getting several errors in the explorer console related to Content

Answer 1

Got here via google with the same question. I didn't want to lower any of the security settings in helmet so I changed my react build config. Simply add the line

INLINE_RUNTIME_CHUNK=false

to your .env in the react app root directory. Then when you run npm run build to build the app, all inlined scripts will be removed and will no longer violate the CSP. This does add one extra initial HTTP GET request when first loading the site but seems to be worth the security benefits in my opinion.

Answer 2

Helmet maintainer here.

This is happening because of something called Content Security Policy, which Helmet sets by default. To solve your problem, you will need to configure Helmet's CSP.

MDN has a good documentation about CSP which I would recommend reading for background. After that, take a look at Helmet's README to see how to configure its CSP component.

To give some help specific to this question, let's take a look at one error you're seeing:

Content Security Policy: This page's settings blocked the loading of a resource at inline ("script-src").

This error is telling you that the script-src directive of your CSP does not allow inline JavaScript, and so it was blocked.

This is considered "inline" JavaScript:

<script>console.log('hello world!')</script>

This, however, is not:

<script src="/foo.js"></script>

There are several ways to fix this:

1. Add a hash or nonce to the inline <script> and use that in your CSP. See this example on MDN for help.

2. Refactor your app to avoid inline scripts entirely.

3. Update your CSP to allow unsafe inline scripts. You'd do something like this:

   app.use(
     helmet({
       contentSecurityPolicy: {
         directives: {
           ...helmet.contentSecurityPolicy.getDefaultDirectives(),
           "script-src": ["'self'", "'unsafe-inline'", "example.com"],
         },
       },
     })
   );
   

   Note that this is considered unsafe.

4. Disable CSP. This is the most dangerous option so I don't recommend it.

   app.use(
     helmet({
       contentSecurityPolicy: false,
     })
   );
   

Your other errors, such as the fonts.googleapis.com error, refer to default-src, which is the fallback if a directive is not specified.

In summary: to solve your problem, you will need to tell Helmet to configure your CSP.