Setting up CSP

[carbonsoda]

Turns out, create-react-app takes liberties to embed a particular script into the page, which makes setting CSP tricky.

By default, Create React App will embed the runtime script into index.html during the production build. When set to false, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP.

(from Create React App > Documentation > Advanced Configuration)

So, we can have that set to false, and then set the directives appropriately.

// eslint-disable-next-line import/extensions
import { domain } from './env.dev.mjs';

app.use(helmet({
  contentSecurityPolicy: {
    useDefaults: true,
    directives: {
        "connect-src": [`https://${domain}`], // allow websocket connections to Auth0 domain
        "frame-src": ["'none'"], // don't allow this site to be framed
        "img-src": ["'self'", "data:", "https://s.gravatar.com", "https://i0.wp.com/", "https://i2.wp.com/"]
    },
  },
}));

Alternatively, it can just error out, but that doesn't seem as nice.

_Originally posted by @mcab in https://github.com/carbonsoda/scribbler/pull/12#discussion_r629828175_

[mcab]

@carbonsoda

[carbonsoda]

app.use(helmet({
  contentSecurityPolicy: {
    useDefaults: true,
    directives: {
      'connect-src': [`https://${clientOriginUrl}`, `https://${domain}`], // allow websocket connections to Auth0 domain
      'frame-src': [`https://${domain}`], // don't allow this site to be framed
      'img-src': ["'self'", 'data:', 'https://s.gravatar.com', 'https://i0.wp.com/', 'https://i2.wp.com/', 'https://avatars.githubusercontent.com/'],
    },
  },
}));

At the moment we found that while the above loads the page, it generates this error:

apiClient.js:38 Refused to connect to 'https://scribblering-wip.herokuapp.com/api/user/create' because it violates the following Content Security Policy directive: "connect-src https://undefined https://carbonsoda.us.auth0.com".

In the code it's referring to clientOriginUrl which in the auth0 setup guide they set it to the front-end client's port localhost:3000, and how it's worked before. For now I'll roll back to the initial CSP until we tease this out.