Ways to hide the URL of an image in Phoenix

When Phoenix can push html on the fly through websockets I thought it could be possible to somewhat obfuscate the image → perhaps send as part of JS canvas or something?

My point is that I want to hide the original URL and perhaps transfer it into JavaScript or something? perhaps there is a specific JavaScript library directly for this purpose?

I don’t want those images to be downloadable, also the quality and dimensions could be low, I don’t care.

The point is to bypass the img html tag or/and perhaps CSS background attribute somehow and still display an image.

The idea is to include even a watermark in the process without using external libraries that generate images like imagemagick etc.

Can Phoenix achieve something like that? Either by itself or by using some additional JS library?

Let me introduce you to the feature of screenshot :wink:

You will either need to do it in the FE (then user that really want to extract “raw” image can just capture the image on the wire) or you need some image manipulation library on the backend.

And yes, it is possible, however that:

  • will require user to enable JS
  • will require you to do “manual” request for the image and then render it on <canvas>

However all of that still can be circumvented by party with enough knowledge if you will send the image through unchanged over the wire.

Hello this comic website use a system to hide image. Canvas + webcrypto(SubtleCrypto.encrypt() - Web APIs | MDN). They never send image directly but a key and a an encrypted image. Then it get decrypted by the js client using aes cbc.
Still it does not prevent screenshoot.

Code to decrypt image


Wow, that’s cool. I will explore it. Thank you.

You can also use a data url that embed the img inside the html itself. You can use Phoenix to do this, no js involved.

Obviously you don’t want to send very large img this way.