Helmet Content Security Policy error for React Express app on Azure

Help
, , ,
1

I’m looking for guidance on Helmet Content Security Policy settings for a MERN application hosted on Azure web services.

Node- v12.14.0
express@4.17.1
react: ^16.13.1

We’re using this documentation to setup our React app: The Complete Guide to React User Authentication with Auth0

The application was working fine in local, Dev, and QA environments until we imported helmet as described Auth0 Express documentation here. Local works fine, but once the code is pushed into Azure we receive the following error during the Auth0 login redirect.

[Report Only] Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' ourAuth0domain.us.auth0.com". Either the 'unsafe-inline' keyword, a hash ('someSHAcode'), or a nonce ('nonce-...') is required to enable inline execution.

I believe this response is expected, but I’ve been unable to find further guidance in the community forums or official Auth0 docs on how Helmet and Auth0 need to work together in a production environment.

After reading through the Helmet documentation and StackOverflow, I’ve specified our contentSecurityPolicy as follows but still receiving the above error:

app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"], 
        scriptSrc: ["'self'", 'ourAuth0domain.us.auth0.com'],
        styleSrc: ["'self'", 'https://fonts.googleapis.com', "'unsafe-inline'"],
        imgSrc: ["'self'", 'https://ourAuth0domain.us.auth0.com', 'data:'],
        connectSrc: ["'self'", 'https://ourAuth0domain.us.auth0.com/oauth/token'],
        fontSrc: ["'self'", 'https://fonts.gstatic.com'],
        objectSrc: ["'self'"],
        mediaSrc: ["'self'"],
        frameSrc: ["'self'"]
      },
      reportOnly: true
    }
  })
);
app.disable("x-powered-by");

Current SDK’s and related dependencies:

"dependencies": {
    "@auth0/auth0-react": "^1.0.0",
    "@azure/identity": "^1.1.0",
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "express-jwt": "^6.0.0",
    "express-jwt-authz": "^2.4.1",
    "helmet": "^4.1.1",
    "jwks-rsa": "^1.9.0",
    "morgan": "^1.10.0",
  },

Do I need to configure Auth0 in a specific manner to get this to work or should I be looking elsewhere?

2

Found out that the issue is React specific. For anyone else experiencing this issue, see below. Would it make sense to mention this in the Auth0 React SDK documentation?

I found the answer on StackOverflow which references the Create-React_app documentation here.

This is how I solved the issue.

In the .env files you will need to add the following:

INLINE_RUNTIME_CHUNK=false

I still needed to configure the CSP policy in the server.js file as follows:

app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"], 
        scriptSrc: ["'self'"],
        styleSrc: ["'self'", 'https://fonts.googleapis.com', "'unsafe-inline'"],
        imgSrc: ["'self'", 'data:'],
        connectSrc: ["'self'", 'https://ourDomain.us.auth0.com/oauth/token', 'https://ourDomain.azure-api.net/fields/request/paths/invoke'],
        fontSrc: ["'self'", 'https://fonts.gstatic.com'],
        objectSrc: ["'self'"],
        mediaSrc: ["'self'"],
        frameSrc: ["'self'", "ourDomain.us.auth0.com"],
      },
    }
  })
);
2 Likes
3

Can you try suggesting that by directly opening a pull request on the Auth0 React SDK repo?

https://github.com/auth0/auth0-react/pulls

4

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.