img-srcContent Security Policy (CSP) directive guards the loading of images (for example via an
Content-Security-Policy header is set with the following policy:
img-src 'self' https://images.example.com;
With the above CSP policy, images can be loaded from the same origin (via the 'self' source list value), or via URLs starting with:
<img src="/images/me.jpg"> <img src="https://images.example.com/photo.jpg">
The above policy will block any image not same origin or via
https://images.example.com, so the following would be blocked by CSP:
If you do not set the
img-src CSP directive, but you do have the
default-src CSP directive set, then that policy will be applied. You need to either make sure that your
src attribute values comply with the default-src policy, or you need to add a
img-src directive to your CSP policy.
Here are some example of what you might see in the console when images are blocked from loading by a CSP policy with a
default-src policy set:
refused to load the image because it violates the following content security policy directive: "default-src 'none'". note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
refused to load the image 'http://localhost:8080/favicon.ico' because it violates the following content security policy directive: "default-src 'none'". note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
img-src directive has been part of the Content Security Policy Specification since the first version of it (CSP Level 1).
Internet Explorer 11 and below do not support the CSP
img-src directive. This means that IE11 will simply ignore the policy and allow images to load from anywhere (as if a policy had not been set at all).