0

I'm fairly new to web development. I've built a few web apps using react.js and I've dabbled with Firebase, Flask and Express.js on the back-end, but only in a development environment. One thing that I can't seem to find an answer to is how to prevent the end-user from seeing important data via the source files in chrome's development tools. An example would be hiding a config file that contains an API key, or hiding a JavaScript file that sends a write request to a database. Another example would be a react component that sends an HTTP request or makes an API call. I would want to hide the way the request/api call is made. Thanks!

Basile Fengos
  • 13
  • 3

1 Answers1

0

Make your database only respond to valid requests with your back end logic. For example in firebase, use firebase rules to restrict read and write access

firebase rules example where anyone can create an account, (there is probably a better way of doing this to only allow create if request.auth.uid !=null ) users can update their information if logged in but cannot update anyone else's and a user with a custom claim of admin can update anyone's information

match /users/{fileName} {
allow read: if request.auth.uid != null;
allow create: if true;
allow update, delete: if request.auth.uid == fileName ||
request.auth.token.admin == true;
}
Trae
  • 41
  • 5
  • This is what I thought, but there are cases in which I'm still confused. Let's say I want any user to be able to read and write to the firebase db. They can open the js file that sends the write request in dev tolls and set a break point where the request happens. They can then change the target in the write request and potentially do harm to the db. My question is how can I completely hide the js file that sends the write requests from dev tools. – Basile Fengos Nov 20 '19 at 02:13
  • They can make all the requests they want but if you have the proper read and write rules everything should be okay. For firebase If you have files in your db that you only want specific people to read or write to you can set up custom claims like admin or whatever. I added to my answer for a firebase specific scenario that assumes you have authentication already set up – Trae Nov 20 '19 at 06:09
  • Thank you! This definitely helps me solve that problem, but there is one last thing I’m not sure of. Firebase requires an API key. I normally store all the API info as a json object in a config.js file. How can I prevent this information from being readable/accessible to the client? – Basile Fengos Nov 20 '19 at 14:37
  • My pleasure! I was concerned about that too but according to this answer: https://stackoverflow.com/a/37484053/10444206c it is okay – Trae Nov 20 '19 at 19:24
  • Thanks! You answered my question in the context it was given. – Basile Fengos Nov 20 '19 at 20:19