HTTP CSP img-src Directive

Die Content-Security-Policy img-src Direktive kontrolliert erlaubte Quellen für Bilder die über <img>, <picture>, <source>, CSS background-image oder image() Funktionen geladen werden. Sie verhindert Tracking-Pixel, Data-Exfiltration via Image-URLs und Malvertising durch Einschränkung erlaubter Bildquellen.

Typ

CSP Fetch-Direktive

Syntax

Die Direktive akzeptiert eine Whitelist vertrauenswürdiger Bildquellen.

http 
Content-Security-Policy: img-src 'self'
Content-Security-Policy: img-src 'self' https://cdn.example.com data:

Direktiven

Die img-src Direktive verwendet Standard-CSP-Quellausdrücke zur Kontrolle erlaubter Bildressourcen.

'none'
Verbietet alle externen Bilder. Nützlich für Text-Only-Seiten oder API-Dokumentation.
'self'
Erlaubt Bilder nur vom gleichen Origin. Verhindert externe Image-Loading und Tracking-Pixel.
https://cdn.example.com
Domain-Whitelisting. Erlaubt gezielt Bilder von vertrauenswürdigen CDNs oder Image-Servern.
data:
Erlaubt Data-URLs für base64-encoded Bilder. Nützlich für inline SVG oder kleine Icons.
https:
Erlaubt alle HTTPS-Bildquellen. Erzwingt verschlüsselte Übertragung ohne Domain-Beschränkung.

Beispiele

Nachfolgend finden Sie praktische Anwendungsbeispiele für die img-src Direktive.

Beispiel 1 CDN Integration mit Data-URL Support

http 
HTTP/1.1 200 OK
Content-Security-Policy: img-src 'self' https://images.cdn.example.com data:

<!DOCTYPE html>
<html>
<body>
  <img src="https://images.cdn.example.com/product/123.jpg"
       alt="Product Image">
  <!-- Erlaubt: Whitelisted CDN -->

  <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIi..."
       alt="Inline SVG">
  <!-- Erlaubt: Data-URL -->

  <img src="https://tracking.ads.com/pixel.gif?user=123">
  <!-- Blockiert: Tracking-Pixel von externer Domain -->
</body>
</html>

Beispiel 2 User-Generated Content mit Stricter Policy

http 
Content-Security-Policy: img-src 'self' https:; default-src 'self'

<!-- User-Forum mit extern hosteten Bildern -->
<article class="post">
  <p>Check out this image:</p>
  <img src="https://user-upload.example.com/image.png">
  <!-- Erlaubt: HTTPS wird erzwungen -->

  <img src="http://insecure-site.com/photo.jpg">
  <!-- Blockiert: Nur HTTPS erlaubt -->
</article>

Beispiel 3 API Response ohne externe Bilder

http 
Content-Security-Policy: img-src 'self' data:; default-src 'self'

<!-- API Documentation ohne externe Dependencies -->
<div class="api-docs">
  <img src="/assets/architecture-diagram.svg">
  <!-- Erlaubt: Self-hosted -->

  <img src="data:image/png;base64,iVBORw0KGgoAAAANS...">
  <!-- Erlaubt: Inline base64 -->
</div>

<style>
.hero {
  background-image: url('https://external-cdn.com/bg.jpg');
  /* Blockiert durch img-src */
}
</style>

Browser blockiert das CSS Background-Image von externer Domain.

Image Loading Security Flow

CSP img-src verhindert Tracking-Pixel und Data-Exfiltration

Vorteile für die Systemarchitektur

  • Tracking-Prävention: Verhindert Pixel-Tracking und User-Profiling durch Blockierung externer Tracking-Bilder und Analytics-Pixel
  • Data-Exfiltration-Schutz: Blockiert Image-basierte Data-Leaks durch parametrisierte Image-URLs die sensible Daten übertragen würden
  • Performance-Kontrolle: Limitiert Image-Loading auf vertrauenswürdige schnelle CDNs zur Vermeidung von Performance-Degradation

Spezifikation

Content Security Policy Level 3 – W3C Working Draft https://www.w3.org/TR/CSP3/#directive-img-src

Weitere Spezifikationen

CSP default-src Directive, Content-Security-Policy Header