Content-Security-Policy img-src for External Placeholder APIs

How CSP blocks images

Why img-src violations prevent fallback images from loading

A Content-Security-Policy header tells the browser which sources are trusted for each resource type. The img-src directive governs image requests. If your policy includes img-src 'self' only, any image from an external domain — including fallback.pics — is blocked before the network request is made.

The block is silent from the user's perspective: the img element shows a broken-image icon, the same as a 404. But the browser console shows a CSP violation: Refused to load the image 'https://fallback.pics/...' because it violates the following Content Security Policy directive. Your onerror handler fires, tries to load the fallback URL, and that request is also blocked.

The fix is to add fallback.pics to the img-src allowlist. Do this with the minimum required scope — hostname only, not wildcard subdomain — to maintain a tight policy.

Syntax

Adding fallback.pics to your img-src directive

CSP host sources support scheme, hostname, and path. Use https://fallback.pics to allow any path under that domain over HTTPS only. Avoid using https://*.fallback.pics unless you specifically need subdomain support — the API lives on the apex domain.

If your policy is delivered via a meta tag rather than an HTTP header, the same syntax applies. However, meta tags cannot set certain directives; for image sources, both delivery methods work.

# HTTP header (Apache / nginx / Cloudflare Worker)
Content-Security-Policy: default-src 'self'; img-src 'self' data: https://fallback.pics; script-src 'self'; style-src 'self' 'unsafe-inline';

# nginx
add_header Content-Security-Policy "default-src 'self'; img-src 'self' data: https://fallback.pics;" always;

# Cloudflare Worker (TypeScript)
response.headers.set(
  'Content-Security-Policy',
  "default-src 'self'; img-src 'self' data: https://fallback.pics;"
);

# Astro (astro.config.mjs)
export default defineConfig({
  server: {
    headers: {
      'Content-Security-Policy': "default-src 'self'; img-src 'self' data: https://fallback.pics;",
    },
  },
});

Report-only

Using Content-Security-Policy-Report-Only to test before enforcing

Deploy Content-Security-Policy-Report-Only alongside your existing policy to identify which image domains you're loading before switching to enforcement mode. Violations are reported to the report-uri endpoint without blocking the request.

Use a CSP reporting endpoint (your own server or a service like report-uri.com) to collect violations during QA. Every image domain that appears in the violation reports needs an explicit img-src entry.

# Test mode — reports violations but doesn't block
Content-Security-Policy-Report-Only: default-src 'self'; img-src 'self' data: https://fallback.pics; report-uri /csp-reports;

# Your /csp-reports endpoint (Express example)
app.post('/csp-reports', express.json({ type: 'application/csp-report' }), (req, res) => {
  const report = req.body['csp-report'];
  console.log('CSP violation:', report['blocked-uri'], 'on', report['document-uri']);
  res.status(204).send();
});

Nonces

Nonce-based policies and inline img elements

If your policy uses nonces for script-src and style-src, you don't need nonces for img elements — the img-src directive controls image sources by hostname, not by nonce. Inline img elements with src attributes are governed by img-src regardless of whether a nonce is present on the element.

Background images set via inline style attributes fall under style-src, not img-src. If you reference fallback.pics URLs in CSS background-image properties, ensure your style-src also allows the domain.

/* background-image in CSS — requires style-src, not img-src */
.card-placeholder {
  background-image: url('https://fallback.pics/api/v1/400x300/E5E7EB/71717A');
  /* Requires: style-src 'self' https://fallback.pics; in your CSP */
}

Other image APIs

Adding multiple image API domains to img-src

If your app loads images from multiple external sources — Cloudinary, your own CDN, and fallback.pics — list each domain separately in the img-src directive. Use the minimum required specificity: prefer https://cdn.yourapp.com over https:// to avoid unintentionally allowing all HTTPS image sources.

Separate domains with spaces. There is no limit on the number of entries, but policies longer than 8KB may be truncated by some HTTP servers.

# Multiple image domains
Content-Security-Policy: 
  default-src 'self';
  img-src 'self' 
          data: 
          blob:
          https://fallback.pics
          https://cdn.yourapp.com
          https://res.cloudinary.com;

Resources

Security documentation and fallback.pics headers

The fallback.pics API responds with appropriate CORS and cache headers but does not set CSP headers — configure CSP in your own application.

// Verify fallback.pics allows your origin
curl -I "https://fallback.pics/api/v1/400x300/7C3AED/FFFFFF?text=Test"
# Look for: Access-Control-Allow-Origin: *

https://fallback.pics/docs/
https://fallback.pics/placeholder-image-api/
https://fallback.pics/blog/referrer-policy-placeholder-urls/
https://fallback.pics/blog/gdpr-safe-image-url-parameters/