ReactJs - Hide state and props

Question

I'm currently working on a project and just started out working with ReactJs. (so still a noob)

And I'm asking myself: Users who use the React dev tools can see all your props and states. How can I prevent users from seeing e.g. IDs and more 'private' stuff?

Thanks in advance

Answer 1

This isn't actually a ReactJS question, but a Web Browser / Internet architecture question. Unfortunately the data will always be available in the client to be intercepted, that's because they need the data at their end to be able to interact with the application. You have to rely on your user's browser extensions and internal security measures.

Nonetheless, you can make your data a little harder to understand. This won't prevent experienced "hackers" to read it, but might prevent some malicious user messing around with your application.

• Minify the code and hide the source maps to make the debugging harder in the production environments.
• Encrypt your data using base64 or some custom encryption technique to make it harder to be read.
• If your code must run in unprotected environments (such as public WiFi) and that's a security concern, implement some kind of end-to-end encryption in your APIs.

And, the most important: only send to the client the data they actually need, data that is safe to be transmitted.