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:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src
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=;
and
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?