I am trying to get an image that is within JavaScript to work with our CSP. I have read that using data: (even in img-src) is an XSS risk so I'm trying to avoid that.

Because it is called from within a .js file I'm not sure how to get it working properly. I've tried using the sha256-base64-value value outlined here:


I have tried the sha256 hash of the base64 value, and the sha256 of the downloaded image (created from the base64 value). E.g. within nginx CSP:

img-src 'self' fda3f82c94742ce8331f51c2bb0e7f45c7da67e1d8618dc345b77a8dcfc6686e-iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=;


img-src 'self' 3c1ed8cea465b0a63ee09ce0a1013be0e482752f91c32fcd59b3cae2627f764f-iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=;

I get the following error in Chrome's console:

Refused to load the image 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=' because it violates the following Content Security Policy directive

How can I get this data image working with a CSP securely?

  • I’m no expert. But have you tried using the Sha-256 of the entire script? Not just the base64 value – keithRozario Oct 2 '18 at 13:17
  • "I have read that using data: (even in img-src) is insecure so I'm trying to avoid that." - could you please provide a reference to this claim so that one can see if what is claimed is actually relevant in your use case? Apart from that, it is not clear of what you actually did. Please provide a Minimal, Complete, and Verifiable example so that others can reproduce your problem and help you. Note that a hash is only documented to be usable for scripts or styles, not for images. – Steffen Ullrich Oct 2 '18 at 13:41
  • @keithRozario Thanks but I've tried that with no luck. Steffen Thanks, updated as per your comment. – vegedezozu Oct 2 '18 at 15:14
  • there's no need to SRI a data-url-based image, because it comes from your server; if you can't trust your own server, there's no point in SRI or a CSP. – dandavis Oct 2 '18 at 15:39
  • @vegedezozu: like I said, hashes are not for images but only for style and script. And I cannot see anything in your reference which says that using data URI as img-src is a problem. Note for example that answer which says (and provides a source for it): "MDN calls out explicitly that <img> embedded SVGs cannot execute Javascript". Thus I don't see how allowing data-URI as img-src should be a XSS risk or other problem. – Steffen Ullrich Oct 2 '18 at 15:40

Your Answer

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

Browse other questions tagged or ask your own question.