Getting content security policy error after deploying react/express app

问题

I deployed a react/express app to heroku and when going to here I get this error 'Refused to load the image 'https://nameless-sands-37753.herokuapp.com/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.'. Here's what I tried:

Added this to manifest.json: "content_security_policy": "default-src 'self' https://nameless-sands-37753.herokuapp.com/"
Added this to my server.js

if (process.env.NODE_ENV === "production") {
  app.use("/voleo/", express.static("client/build"));
  app.use(helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: ["'self'"],
      styleSrc: ["'self'"],
      imgSrc: ["'self"]
    }
  }))

  app.get("*", (req, res) => {
    res.sendfile(path.resolve(__dirname, "client", "build", "index.html"));
  });
}

Removed the faveicon.ico
Added this tag: <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' https://* 'unsafe-inline'; script-src 'self' https://* 'unsafe-inline' 'unsafe-eval'; img-src 'self' https://*" />

Still not sure what I'm doing wrong. Advice much appreciated.

回答1:

I had the same problem and it had to do with path.resolve. I added this at the top of the file:

const path = require('path')

and it worked after that.

回答2:

The more general answer to the problem would be to check heroku logs in terminal as follows:

heroku logs -n 500

(choose the number of lines to log) OR

heroku logs --tail

(for live logs, but I found the 1st command to be more effective)

In there you will see the exact error that prevents the app from properly rendering.

来源：https://stackoverflow.com/questions/56822165/getting-content-security-policy-error-after-deploying-react-express-app

标签

html

content-security-policy