You may be seeing
blocked:csp in Chrome developer tools when the browser is trying to load a resource. It might show up in the status column as
Here's a very simple CSP policy that uses the
Content-Security-Policy: default-src 'self'
'self' value here tells CSP that the browser should only fetch resources from the same origin as the page that set the policy. So if we put that CSP policy on a page located at:
https://example.com/page.html then with this policy we can load resources (images, js, css, etc) from
So if we had an image loading from a url like:
That image would be blocked by CSP, and we may see
blocked:csp in the Network tab of Chrome Developer tools. You would also see a message like this output in the Chrome Developer Tools Console:
Refused to load the image 'https://images.example.com/logo.png' because it violates the following Content Security Policy directive: "default-src 'self'"
In FireFox the image request blocked by CSP doesn't show up in the Network tab, but it will output a message to the developer tool console, such as:
Content Security Policy: The page’s settings blocked the loading of a resource at https://images.example.com/logo.png (“default-src”).
So if we wanted to load such an image, we would have to alter the policy to something like this:
Content-Security-Policy: default-src 'self'; img-src https://images.example.com 'self';
There are CSP directives for each of the types of resource you want to load (for example
style-src, etc). Check out this CSP reference for a full list of all the directives and values you can use.
You can see a similar example of CSP blocking an image in our CSP Browser Test.
Not all browsers support CSP, for example Internet Explorer doesn't support it. Firefox, Chrome and Edge all have very good support for CSP. Safari support is pretty good, but it may not support the latest features of CSP. So you may see CSP blocking a resource due to differences in implementation, or browser support as well.