Content security policy violation when previewing files
This is pretty weird and I have checked and tried a lot to no avail.
I have a simple file upload, it displays the image before uploading it. This works great in my local development environment and also works great on a staging server.
This doesn't work on a production server. This is what is displayed in my console:
refused to upload blob image: https://example.com/a7ced718-483b-4bc2-9db0-f012c8c6af5a 'because it violates the following content security policy directive: "img-src" self':
However, I don't have a CSP and it works fine on the exact replica server used for staging to test errors.
Also, I tried adding the CSP to the meta tag at the beginning of the document, but it also doesn't solve the problem. This is the CSP I tried to implement:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">
Can anyone shed some light on why this might not work?
source to share
Check the response headers sent by the server (using browser devtools or curl
or whatever).
The production server must send a response header Content-Security-Policy
.
If so, the reason your element meta
has no effect is the browser uses the most restrictive CSP policy wherever its specified - and the header Content-Security-Policy
that your production server sends is more restrictive than the one you specified the element meta
.
Details on using the element meta
at https://w3c.github.io/webappsec-csp/#multiple-policies as well as details on using the element meta
https://w3c.github.io/webappsec-csp/#meta-element "rel =" nofollow noreferrer "> https://w3c.github.io/webappsec-csp/#meta-element:
Note. The policy specified by the element
meta
will execute along with any other policies active for the protected resource, regardless of where theyre specified. The general impact of multi-policy enforcement 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 enforcement policies can only limit the capabilities of the protected resource .
So it seems like the header Content-Security-Policy
that your production server is sending has img-src 'self' data:
, but in order for your image url to resolve and to avoid the error you are seeing, the header Content-Security-Policy
that your production server handles at least as well to include blob:
in your list of sources img-src 'self' data: blob:
.
source to share