webentwicklung-frage-antwort-db.com.de

Bild laden / CSP verschieben: Eingebettetes Bild zulassen

Meine Website verzögert das Laden von Bildern, indem sie den Wert für img src über JavaScript (aus dem Wert für img data-src) festlegt. Um immer noch gültiges HTML zu haben, solange die URL nicht auf img src gesetzt ist, setze ich src auf ein eingebettetes Inline-Bild wie dieses:

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="URL-TO-REAL-IMAGE.png">

Dies funktioniert einwandfrei, zeigt jedoch einen Fehler in der Browserkonsole (Firefox, Chrome) an:

Es wurde abgelehnt, das Bild 'data: image/png; base64, R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs =' zu laden, da es gegen die folgende Richtlinie zur Inhaltssicherheit verstößt: "default-src 'self' * 'unsafe-inline'". Beachten Sie, dass 'img-src' nicht explizit festgelegt wurde, sodass 'default-src' als Fallback verwendet wird.

Sollte 'unsafe-inline' nicht genau dies zulassen? Ich bin verwirrt.

1
Marcus

Laut https://content-security-policy.com/ müssen Sie den CSP verwenden

img-src 'self' data:

Ermöglicht das Laden von Ressourcen über das Datenschema (z. B. Base64-codierte Bilder).

unsafe-inline scheint nur für Javascript-Quellen relevant zu sein, nicht für Bildquellen.

0