1

My backend is based on Django and its REST framework.

I am serving images via an HTTPresponse. Since those images contain really sensitive data, I force the clients to authenticate themselves by sending a TOKEN within the header.

The URL is something like www.mywebsite.de/api/images/<id>.

My frontend is based on ReactJS.

In order to embed those pictures on the frontend, I fetch them using axios. Afterwards I encode them using base64 and place the URI into the src property on a <img /> tag

Now, thing is I read alot of downsides of base64 encoded images, like bloated size, caching problems an so on... some are listed here: https://medium.com/snapp-mobile/dont-use-base64-encoded-images-on-mobile-13ddeac89d7c

I am asking myself now, as a beginner: What are the alternatives? How can I embed those images without Base64? I cannot serve a static URL, that's for sure. Furthermore I cannot tell the img-tag to use a authorization header.

I would be thankful for any hint into the right direction.

Thank you in advance :)

ataraxis
  • 1,257
  • 1
  • 15
  • 30
  • It's not clear what you are trying to accomplish: what are the drawbacks of using base64 for your project ? I understand that you don't want static links that could be shared, but you will have to elaborate on why you don't want to use base64. If it's coming to performance, obviously a secured solution will be more resource consuming. – May.D Jul 23 '19 at 19:02
  • The images are mainly consumed by mobile phones, therefore... all the points mentioned on the page above from bloated size to caching. What do you mean by "A secured solution"? – ataraxis Jul 23 '19 at 19:08
  • Well your issue seems to be that these pictures are sensitive and you don't want users to be able to share them, do I get it right ? – May.D Jul 23 '19 at 19:09
  • That's correct. I dont want to find these images on ģoogles image search someday therefore you shouldnt be able to access them if you arent authentificated. In order to use the img src tag on the frontend, i fetch the images and turn them into base64 strings – ataraxis Jul 23 '19 at 19:12

1 Answers1

1

You should have a look at this post. To sum it up, if your images are on a public website there is no way to protect them 100%. However you can reduce the risk to the lowest using these practices:

  • Use the background-image css rule with classes or ID specific to the image.
  • Disable controls like right-click on sensitive data using JS.
  • Configure your robots.txt server file so that search engines don't browse sensitive data.
  • Have a look at JS plugins which prevents users interactions, just like javascript video players.

However be aware that none of these solutions are 100% reliable. For instance, a base64 string can be copy-pasted by inspecting the html and decode it.

May.D
  • 1,832
  • 1
  • 18
  • 34