It seems a strict CSP for style-src
will be unhappy when webpack's style-loader
tries to append inline CSS in a create-react-app (CRA):
I was wondering if I need to use a webpack dev server to take advantage of using a nonce token, or if CRA had a way of circumventing this style issue during development. The REACT_APP_INLINE_RUNTIME_CHUNK=false value doesn't seem to help in this case (in fact, I'm not seeing a difference in the resources that come over the wire between setting it to true vs. false). But I am running npm start
instead of npm build
, I think the latter properly builds with environmental variables, not sure about the CRA dev server.
From what I can tell, CRA doesn't really want you overriding things. But if you must, you can use something like react-app-rewired
, or eject (which is strongly advised against because it will derail package updates CRA uses to keep everything nice and neat and working).
There's also modifying the build files themselves in node_modules/react-scripts/config/webpack.config.prod.js, although what I'm currently doing is commenting-out the meta tag during development and uncommenting on submit, which is about the same amount of work I think if I have to rebuild/reinstall on updating the module anyway. Although I don't typically update it that often.