preload datauri images in javascript

StackOverflow https://stackoverflow.com/questions/7264589

  •  17-01-2021
  •  | 
  •  

Question

With javascript, how I can preload images that dont have a path source but a datauri as its source?

I have something like this:

var image = new Image();
image.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

I want to do this on https pages but getting an error that i have a mixture of secure and nonsecure items on the page. Any ideas why this may the case and any way I can resolve this issue?

Was it helpful?

Solution

The insecure error occurs anytime you reference any offsite or non-https file. This is why generally you want to link to images/CSS/etc by reference (an absolute path containing 'http://' would give the same error). Depending on certain browsers security policy, images created with base64 datauri's are seen as external and non-secure.

EDIT: In addition, I suggest you read this:

https://dvcs.w3.org/hg/content-security-policy/raw-file/tip/csp-specification.dev.html

It discusses a proposal for how you can specify what sorts of things are seen as secure an what is insecure. Specifically, try adding the following header:

X-Content-Security-Policy: allow 'self'; img-src data:
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top