Refused to load the image 'blob:...' because it violates the following Content Security Policy

Question

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:">

Add 'img-src blob:' to the Content-Security-Policy value. Or else add 'blob:' to the existing 'default-src' value. — sideshowbarker, Dec 26 '19 at 05:37

Raz Buchnik · Accepted Answer · 2023-02-05T09:58:31.093

74

This is the fix for both 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:">

edited Feb 05 '23 at 09:58

answered Dec 26 '19 at 07:23

Raz Buchnik

7,753
14
53
96

6

What is the use of `data:` here? `img-src 'self' blob:` can be added instead right? – Jun 30 '21 at 11:05
1

yes, according to the spec, "data:" is a different schema than "blob:". https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs – filipe Dec 19 '22 at 13:01
1

'unsafe-inline' 'unsafe-eval' *may* not be preferable because of security reasons. – ozgurozkanakdemirci Jun 19 '23 at 14:24

score 2 · Answer 2 · answered Dec 26 '19 at 05:39

2

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.

answered Dec 26 '19 at 05:39

Trupti J

512
1
4
16

From the link: `*` "allows any URL except data: blob: filesystem: schemes." That's why it wasn't working in this case, since the fallback `default-src *` does not include blob. – cmbuckley Aug 29 '23 at 10:43

score 1 · Answer 3 · answered Feb 04 '23 at 07:02

1

Add in content security policy img-src 'self' 'unsafe-inline' blob: data: 'unsafe-eval';

answered Feb 04 '23 at 07:02

Bikash kumar

91
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 07 '23 at 16:50

score 0 · Answer 4 · answered Dec 21 '20 at 04:48

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.

answered Dec 21 '20 at 04:48

Jake Zhang

1

how to do in in Tomcat? – Vladimir B Jun 14 '23 at 14:06

score 0 · Answer 5 · answered Aug 29 '23 at 10:38

For Ghost + Nginx

I faced the same issue while setting up a ghost blog proxied via Nginx. To solve this I had to update the server block in nginx with the below headers:

add_header Content-Security-Policy "img-src 'self' blob: data:; default-src * data: 'unsafe-eval' 'unsafe-inline'" always;

This fix should generally apply to apps served via Nginx and not just limited to Ghost CMS.

Refused to load the image 'blob:...' because it violates the following Content Security Policy

5 Answers5

For Ghost + Nginx

Linked