img-src
img-src
img-src
The img-src directive specifies the sources from which images & favicons can be loaded.
Recommended Values
'self'
Allows images from the same origin
Allows images from the same origin
https://subdomain.domain.com
Allows images from a specific external site
Allows images from a specific external site
Explore detailed value definitions
Tips & Tricks
If img-src is not defined, the default-src directive will be used.
Do not use 'unsafe-inline' 'unsafe-eval' or 'unsafe-hashes' as it may introduce security vulnerabilities. Use with caution.
Do not use broad keywords like 'data:' 'blob:' 'http:' 'https:' is too permissive and may introduce security vulnerabilities. Use with caution.
Examples
Allows images from the same origin and a specific external site
Content-Security-Policy: img-src 'self' https://example.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'>
Frequently Asked Questions
What is img-src and how does it work?
The img-src directive controls which sources can be used to load images and favicons on your webpage. This includes <img> tags, favicon links, and any other image resources. It helps prevent unauthorized images from being loaded, which could be used for tracking, data exfiltration, or loading malicious content.
Default Behavior
If img-src is not specified, the browser will fall back to default-src for image loading policies.
Can I use data: URIs in img-src?
While data: URIs can be allowed in img-src, it is strongly discouraged from a security perspective. Data URIs allow embedding image data directly in the src attribute, but this creates significant security risks. Malicious actors can use data URIs to bypass CSP restrictions, potentially embedding harmful content or exfiltrating data through manipulated images.
Security Risk
Using data: URIs in img-src effectively bypasses the protections that CSP is meant to provide. If you must use data URIs, consider implementing additional security controls and carefully validate all image data.
What are common values for img-src?
Common values include 'self' for loading images from your own domain, specific URLs for trusted image hosts (like CDNs or media servers)
Security Note
Avoid using broad patterns like * or http:. Instead, explicitly list trusted domains to prevent loading of malicious images or tracking pixels.
Need to monitor CSP violations and maintain it easily?
Set up a reporting endpoint to monitor Content Security Policy violations in real-time to build and maintain your CSP easily.
Set up your endpoint nowLearn more about other topics
Content-Security-Policy
Learn more about the Content-Security-Policy, it's purpose and how to implement it.
Values
Values are specific to each directive and are used to define the resources that can be loaded by the browser. Learn more about the values that can be used in the directives.