Menu
This is quite odd, and I've checked around and attempted many things to no avail.
I have a simple file upload, it displays the image prior to uploading it. This works fine in my local development environment, and it also works fine on the staging server.
On the production server, it doesn't work. This is what is showing in my console:
refused to load the image 'blob:https://example.com/a7ced718-483b-4bc2-9db0-f012c8c6af5a' because it violates the following Content Security Policy directive: "img-src 'self' data:
However, I have no CSP defined, and it works fine on an exact replica server utilized for staging to test for bugs.
Furthermore, I've tried to add a CSP in the meta tag at the head of the document, but it does not solve the problem either. This is the CSP I attempted to implement:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">
Can anyone shed some light into why this may not be working?
659
For the CSP violation error, here are a few things you could try, to fix: -Check if you have any plugins on the browser. -Try clearing the cache of the browser you are using. -Try logging in from a different browser.
Once the page source is shown, find out whether a CSP is present in a meta tag. Conduct a find (Ctrl-F on Windows, Cmd-F on Mac) and search for the term “Content-Security-Policy”. If “Content-Security-Policy” is found, the CSP will be the code that comes after that term.
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.
Check the response headers the server sends (using browser devtools or curl or whatever).
The production server must be sending a Content-Security-Policy response header.
If so, the reason your meta element has no effect is, the browser uses the most-restrictive CSP policy, wherever it’s specified—and the Content-Security-Policy header your production server is sending is more restrictive than the one you’re specifying with the meta element.
See the details on multiple polices at https://w3c.github.io/webappsec-csp/#multiple-policies and the details on the meta element at https://w3c.github.io/webappsec-csp/#meta-element —
A policy specified via a
metaelement will be enforced along with any other policies active for the protected resource, regardless of where they’re specified. The general impact of enforcing multiple policies is described in §8.1 The effect of multiple policies.8.1. The effect of multiple policies
The impact is that adding additional policies to the list of policies to enforce can only further restrict the capabilities of the protected resource.
So it seems that the Content-Security-Policy header your production server is sending has img-src 'self' data: but in order for your image URL to be allowed and to avoid the error you’re seeing, the Content-Security-Policy header your production server is sending needs to at least also include blob: in its source list: img-src 'self' data: blob:.
195
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
