I have a React+Node.js app that works fine on localhost but runs into errors when deployed to Heroku, resulting in a 404 response status.
These are the console errors I get when loading the app on Chrome:
Refused to load the script 'https://ssl.google-analytics.com/ga.js' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
(anonymous) @ 1:3
Refused to load the script 'https://www.pagespeed-mod.com/v1/taas?id=cs&ak=55c85bbdd6e4d21e7278fbbbb89a9502&si=fb4741a02e044f61940836e20590e7f6&tag=1005&rand=7e511f5336f16d2e87e9ac560e754a19&ord=7220108846457940' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
(anonymous) @ 1:3
myapp.herokuapp.com/:1 Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Lato:300,400,700,900' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
DevTools failed to load source map: Could not load content for chrome-extension://mihdfbecejheednfigjpdacgeilhlmnf/react-draggable.js.map: System error: net::ERR_BLOCKED_BY_CLIENT
myapp.herokuapp.com/:1 (warning)
Failed to load resource: the server responded with a status of 404 (Not Found)
I have tried adding fixes for script-src and style-src in public/index.html, public/manifest.json, src/server/index.js, and App.js, but I always see the same errors.
Frontend attempted fix:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src-elem 'self' 'unsafe-inline' https://ssl.google-analytics.com https://www.pagespeed-mod.com; style-src-elem 'self' 'unsafe-inline' https://fonts.googleapis.com; object-src 'self'" />
Backend attempted fix:
const helmet = require("helmet")
...
app.use(
helmet({
contentSecurityPolicy: false,
})
)
The policy "default-src 'none'" is set somewhere and even though you try to add another policy, this policy always applies and blocks all content. You will need to identify where existing policy is set, then modify it.