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

user_13135340 0
Viewed 4723

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

cloudinary content-security-policy mongoose vue.js node.js
3 Answers

This disables the contentSecurityPolicy middleware but keeps the rest:

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

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:"]
    }
  })
)
user_94973460
Related