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:">
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.
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.
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.
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:">
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With