Mobile app version of vmapp.org
Login or Join
Courtney195

: Defer img loading / CSP: allow embeded img 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

@Courtney195

Posted in: #ContentSecurityPolicy #Html #Http

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.

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Courtney195

1 Comments

Sorted by latest first Latest Oldest Best

 

@Megan663

According to 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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme