4

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

U Rogel
  • 1,893
  • 15
  • 30
karlgustav
  • 169
  • 1
  • 3
  • 10
  • 4
    @Sag1v mocking non-native speakers for english spelling is rude. To answer your question http://remarkablemark.org/blog/2017/01/25/disable-react-devtools/ you can disable the devtools in a production environment – Robbie Milejczak Nov 20 '17 at 20:21
  • 3
    actually i'm the non-native speaker here and "privet" was a typo i made to be honest (I'm sorry if i offended someone). as for your suggestion, it may disable the devtools (though i'm sure it can be bypassed somehow) it won't really hide any data. – Sagiv b.g Nov 20 '17 at 20:25
  • To build on what @Sag1v wrote, you cannot hide _anything_ on the client. The question itself is invalid, everything you sent to a computer you don't have 100% control over is _public_. "Security" in this context is just another way to rely on people being too lazy or not knowledgeable enough to figure out how easy they can get the data. And by the way, this is not a programming question. – Mörre Nov 20 '17 at 20:46

1 Answers1

7

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.

Luís Brito
  • 1,652
  • 1
  • 17
  • 34