How to embed fetched images in ReactJS

Question

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 :)

Answer 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.