22

I got this error:

Refused to load the image 'blob:file:///cf368042-bf23-42b6-b07c-54189d3b0e01' because it violates the following Content Security Policy directive: "default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

While trying to load a mapboxGL map. This is my CSP tag:

<meta http-equiv="Content-Security-Policy" 
    content="
      worker-src blob:; 
      child-src blob: gap:;
      default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
Raz Buchnik
  • 6,203
  • 9
  • 41
  • 78

3 Answers3

44

This is the fix for either image and base64.

Need to add img-src 'self' blob: data:; As follow:

<meta http-equiv="Content-Security-Policy" 
    content="
      worker-src blob:; 
      child-src blob: gap:;
      img-src 'self' blob: data:;
      default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
Raz Buchnik
  • 6,203
  • 9
  • 41
  • 78
  • 1
    What is the use of `data:` here? `img-src 'self' blob:` can be added instead right? –  Jun 30 '21 at 11:05
1

You need to add img-src blob: in your CSP value. Since img-src is absent, it is using default-src. You can set img-src * also. Please take a look at https://content-security-policy.com/ to check how to add CSP for image.

Trupti J
  • 474
  • 4
  • 16
0

Normally,set img-src policy will fix the problem, but if you still get the same error. Note that if you use the "helmet" middleware at the same time, your problem may come from it, and you need to configure it separately.

Jake Zhang
  • 1