Content Security Policy (CSP)
Quick Reference Guide


The CSP img-src Directive

The img-src Content Security Policy (CSP) directive guards the loading of images (for example via an <img> HTML tag.

Example Policy

Assume a Content-Security-Policy header is set with the following policy:

img-src 'self' https://images.example.com;

Allows

With the above CSP policy, images can be loaded from the same origin (via the 'self' source list value), or via URLs starting with: https://images.example.com

<img src="/images/me.jpg">
<img src="https://images.example.com/photo.jpg">

Blocks

The above policy will block any image not same origin or via https://images.example.com, so the following would be blocked by CSP:

<img src="https://other.example.com/photo.jpg">

What does 'img-src' was not explicitly set mean?

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 img 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.

Browser Support for img-src

CSP Level 1


Supported On:


Chrome 25+ (2013)
Firefox 23+ (2013)
Safari 7+ (2013)
Edge 12+ (2015)


Not Supported On:


Internet Explorer

The CSP 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).

CSP Developer Field Guide

CSP Developer Field Guide

Want to learn the ins and outs CSP? Grab a copy of the CSP Developer Field Guide. It's a short and sweet guide to help developers get up to speed quickly.

Grab a Copy

Struggling to stay on top of security advisories?

Advisory Week is a weekly roundup of all the security advisories published by the major software vendors.