1

I am currently trying to import an image onto a certain site, but the image's src is blocked by CSP as well as simply setting the image's src to the base64 data. I am trying to draw the image by importing the ImageData of the image as a compressed string off-site [ImageData is for a 600x600 canvas, so 1.44 million elements] and then decompressing the string on-site and displaying the image with the canvas element.

Essentially, I need to take raw RGBA data, compress it into a string for storage, and decompress the string to display on a canvas element as an ImageData object.

ski
  • 11
  • 2
  • Jpeg will compress with some loss, PNG uses lossless compression, and there are other encodings. With the `ImageDat`a, encode it with a jpeg, png, or webP encoder. Then at the client side let the DOM decode (decompress) the image – Blindman67 Feb 04 '23 at 20:41
  • I already have the jpeg/png base64 data. Could you elaborate as to how the decompression would work? `` won't work due to CSP. – ski Feb 06 '23 at 15:47
  • You need to set `img-src 'self'` in the CSP HTTP response header (self defines same domain access). If that does not allow access to the dataURL then host the image on the server and access it via its URL. `` – Blindman67 Feb 06 '23 at 20:28
  • I don't have control over the server or CSP which does not contain "self". The project is hosted on a sandboxed platform that I don't have control over; hence, the need for a workaround. – ski Feb 07 '23 at 00:28
  • Only if you are in control of the client browser can you bypass CSP. – Blindman67 Feb 07 '23 at 01:05
  • The sandboxed environment prevents me from interactin' with the client's browser directly. The easiest way to bypass the restrictions is the method mentioned above [my original question]. – ski Feb 07 '23 at 02:56

0 Answers0