Fix CSP Img-Src Violations for Blocked Images

In this tutorial, you'll learn about Fix CSP Img. We cover key concepts, practical examples, and best practices.

Images from external CDNs, data URIs (base64), and blob URLs are blocked by the browser when img-src is too restrictive. The page shows broken image placeholders. Every image source scheme and domain must be explicitly listed in the CSP directive.

Wrong

The CSP only allows images from the same origin.

Content-Security-Policy: img-src 'self'

<img src="https://images.example.com/photo.jpg">
<img src="data:image/png;base64,iVBOR...">
<img src="blob:https://app.example.com/uuid">

Refused to load the image 'https://images.example.com/photo.jpg' because it
violates the following Content Security Policy directive: "img-src 'self'".

Refused to load the image 'data:image/png;base64,iVBOR...' because it
violates the following Content Security Policy directive: "img-src 'self'".

Refused to load the image 'blob:https://app.example.com/uuid' because it
violates the following Content Security Policy directive: "img-src 'self'".

Right

Add the external image domain and the required URI schemes.

Content-Security-Policy: img-src 'self' https://images.example.com data: blob:

<img src="https://images.example.com/photo.jpg">
<img src="data:image/png;base64,iVBOR...">
<img src="blob:https://app.example.com/uuid">

In Express with helmet:

app.use(helmet.contentSecurityPolicy({
  directives: {
    imgSrc: ["'self'", 'https://images.example.com', 'data:', 'blob:'],
  },
}));

All images now load. The data: scheme allows inline base64 images, and blob: allows dynamically generated images from JavaScript APIs like canvas.toBlob().

Prevention

• List each external image CDN domain explicitly in img-src.
• Add data: to img-src if your application uses base64-encoded images inline.
• Add blob: to img-src if your application creates images from canvas, fetch, or file APIs.
• Add https: to img-src only if you need to allow all HTTPS image sources (less secure but simpler).
• Use img-src 'self' as a base and add domains only as needed for each third-party image service.
• Monitor CSP violation reports to discover images you forgot to allow.

DodaTech Tools

Doda Browser shows a visual indicator on the page for each blocked image with the CSP directive that prevented its load. DodaZIP's asset inventory tracks all external image origins used across the site. Durga Antivirus Pro loads threat indicator images from its CDN using explicit domain allowlisting in img-src.

FAQ