2

Goal:

I know that there always will be the way to get info from browser if we have displayed it, but I am looking for the most convenient way to prevent that.

Solutions I already have in mind:

  • If we check Instagram we will see that it displays image and covers it with transparent div. It will prevent user from right clicking on image. But you can access image using dev tools (network tab).
  • I don't remember where I saw that method but: you can slice your image on backend, send two pieces on front end and display two divs close to each other in order to display whole image. User still have access to the image using dev tools (network tab) but it is splitted image.
  • Encode image as base64 and send string instead of file. User will not be able to get image using dev tools (network tab, only if he specifically looking for string but string can be encoded on backend and decoded on frontend). But still can be copied using dev tools (elements tab)

More exotic way:

  • Encode image as base64 and send string instead of file. Using JS check if user hovers body element, if yes paste image (using background-image css attribute). In that case user won't be able to access image in devtools right away. He could intercept that string only if he add Event listener breakpoint on hover. Which is harder.
Arseniy-II
  • 8,323
  • 5
  • 24
  • 49
  • 1
    Is the user logged in? If he/she is, then what's the problem? – Dmitry Jan 26 '19 at 08:24
  • Problem is that image === url. No matter you logged in or not you can grab that url and send it. And any user can access that image. – Arseniy-II Jan 26 '19 at 08:25
  • Then you need to make your server perform a permission check on that URL before serving the file. – deceze Jan 26 '19 at 08:38
  • 1. Create a folder outside of your server folder for your images. 2. Give the OS user who runs the server (it's usually `www` or `www-data` on Linux) permissions to read/write to that folder. 3. (Assuming you use PHP) Create something like `image.php` 4. Check credentials there. 5. Return an image file from your external image folder like [this](https://stackoverflow.com/questions/6175533/how-to-return-a-file-in-php) 6. ????? 7. Profit. – Dmitry Jan 26 '19 at 08:55
  • @deceze, I am more front end. Is it possible to perform permission check if I paste image as `background-image`? – Arseniy-II Jan 26 '19 at 09:00
  • @deceze, And what if I want that functionality for not logged users? – Arseniy-II Jan 26 '19 at 09:05
  • If there is *a* URL which will spit out the image to anyone who asks, it pretty much doesn’t matter what you do on the front end, at best you can just obfuscate it in one way or another. – deceze Jan 26 '19 at 09:06
  • How does “not logged users” square with *”display image created specifically for that user”*?! – deceze Jan 26 '19 at 09:07
  • @deceze, why not? If I don't have logging process but want to display image based on some info user has provided (using form for example) – Arseniy-II Jan 26 '19 at 09:09
  • Well then you need to generate the image specifically in response to a POST form submission. That won’t be copy-pastable inherently, any other user would need to fill out the form and submit it. – deceze Jan 26 '19 at 09:11
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/187357/discussion-between-arseniy-ii-and-deceze). – Arseniy-II Jan 26 '19 at 09:13

0 Answers0