Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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:">
like image 884
Raz Buchnik Avatar asked Dec 26 '19 05:12

Raz Buchnik


People also ask

What is blocked by content security policy?

Content Security Policy blocks all resources that don't match it's policy. To view the policy for a specific website use the CSP Evaluator.

How do I fix the content security policy of your site blocks the use of eval in JavaScript?

The Content Security Policy (CSP) prevents the evaluation of arbitrary strings as JavaScript to make it more difficult for an attacker to inject unauthorized code on your site. To solve this issue, avoid using eval() , new Function() , setTimeout([string], ...) and setInterval([string], ...) for evaluating strings.

How do I fix content security policy blocks inline execution of scripts and stylesheets?

The Content Security Policy (CSP) prevents cross-site scripting attacks by blocking inline execution of scripts and style sheets. To solve this, move all inline scripts (e.g. onclick=[JS code]) and styles into external files. adding the hash or nonce of the inline script to your CSP header.


2 Answers

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:">
like image 132
Raz Buchnik Avatar answered Sep 18 '22 17:09

Raz Buchnik


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.

like image 39
Trupti J Avatar answered Sep 17 '22 17:09

Trupti J