img-src
Theimg-src directive controls which sources can be used to load images in your web application. It's an important CSP directive that helps prevent image-based attacks and ensures that only trusted image sources are loaded in your application.
Recommended Values
'self' Allows the resource to be loaded and executed
https://subdomain.domain.com/path Allows the resource to be loaded and executed
Recommended img-src configuration
Content-Security-Policy: img-src 'self' https://trusted-cdn.com;Tips & Tricks
Using 'self' restricts images to the same origin, which is a good security baseline.
For third-party images, explicitly whitelist their domains instead of using broad permissions.
Using 'data:' allows inline images but can introduce security risks. Use only when necessary.
Using broad keywords like 'http:', 'https:', 'data:', 'mediastream:', 'filesystem:', 'blob:', 'link:' is too permissive and may introduce security vulnerabilities.
Possible Values
'none': No images are allowed'self': Only images from the same origin are allowed- URLs: Specific domains (e.g.,
https://trusted-cdn.com) - Schemes: Protocol schemes (e.g.,
https:,http:,wss:,ws:) - Wildcards:
*for subdomains (e.g.,*.example.com) - ⚠️
*: Allows all origins - ⚠️
blob:: Allow blob: URIs - ⚠️
data:Allow data: URIs
Example Configurations
Example policy with multiple sources
CSP Header with multiple allowed domains
Content-Security-Policy: img-src 'self' https://trusted-cdn.com ;Allowed
<!-- allowed by 'self' -->
<img src="/images/logo.png">
<!-- allowed by 'self' -->
<link rel="icon" href="/favicon.ico">
<!-- allowed by https://example.com -->
<link rel="icon" href="https://example.com/favicon.ico">Blocked
<!-- blocked as the domain is not authorized -->
<img src='https://malicious.file.com/logo.png'>
<!-- blocked as the domain is not authorized -->
<link rel='icon' href='https://malicious.file.com/favicon.ico'>Additional Information
- The
img-srcdirective is important for preventing image-based attacks - If
img-srcis not specified, the browser falls back to thedefault-srcdirective - Consider using Subresource Integrity (SRI) for third-party images when possible
- Be cautious with allowing
data:URIs as they can be used for certain types of attacks
Related Resources
External Articles
- MDN Web Docs: img-src
- OWASP: Content Security Policy Cheat Sheet
- Google Web Fundamentals: Content Security Policy