1

My website is defering some img loading by setting the img src value by JavaScript (from the img data-src value). In order to have still valid HTML as long as the URL is not set to img src, I am setting src to an inline embeded img like this:

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

This works fine, but shows an error at the browser console (Firefox, Chrome):

Refused to load the image 'data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' because it violates the following Content Security Policy directive: "default-src 'self' * 'unsafe-inline'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

Shouldn't 'unsafe-inline' allow exactly this? I'm confused.

0

According to https://content-security-policy.com/ you need to use the CSP

img-src 'self' data:

Allows loading resources via the data scheme (eg Base64 encoded images).

unsafe-inline appears to be only relevant for javascript sources, not image sources.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for?Browse other questions tagged or ask your own question.