Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "img-src 'self' data:"

Question

after i uploaded my website on herokuy the images do not working and it gave me that error

Refused to load the image '' because it violates the following Content Security Policy directive: "img-src 'self' data:".

i have tried somethings like

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src data:" />

that but it does not work also

Answer 1

This disables the contentSecurityPolicy middleware but keeps the rest:

app.use(
  helmet({
    contentSecurityPolicy: false,
  })
);

Answer 2

Better practice instead of setting contentSecurityPolicy to false which should be the most last option. Using the Helmet documentation helps alot. I used this in my app and it solves the issue very well. My app is hosted here. Checkout my source code here.

app.use(
  helmet.contentSecurityPolicy({
    useDefaults: true,
    directives: {
      "img-src": ["'self'", "https: data:"]
    }
  })
)

Answer 3

app.use(helmet({ crossOriginEmbedderPolicy: false, originAgentCluster: true }));
app.use(
  helmet.contentSecurityPolicy({
    useDefaults: true,
    directives: {
      "img-src": ["'self'", "https: data: blob:"],
    },
  })
);