CORS for React/Express app

Hi, folks. I’m working on using React and Express concurrently, (deployed to Heroku), and I’ve run into a problem that I’m not sure how to solve. I want my Express server routes to be available only to requests from my React front end so people can’t just go grab all the data from my database by manually typing in routes. I’m pretty sure the answer lies somewhere in granting/denying permissions with CORS, but since I don’t know what port numbers things will be running on in Heroku, I’m not sure how to configure this. The code I’m working with can be found here. Any suggestions would be much appreciated!

Do you mean requests from front-end running only on your machine or any client running your front-end?

I’m not sure how to answer that, which tells me I may not be understanding how this works.
The client-facing application should be just a single page, the ‘/’ route, handled by React. The Express server handles CRUD operations on a database with routes that start with ‘/api’. As it is, anyone looking at the site can type ‘mern-blog-yt.herokuapp.com/api’ into the address bar to fetch all the data in the database, and that’s what I’m trying to avoid. I only want that information to be available to fetch requests made by the React server.

So there are 2 levels to this question

  1. How to protect backend data (the api route) from giving data to everyone and anyone
  2. How to setup CORS

So the 2nd question actually wont fully stop the first one. Let’s say you setup CORS, to prevent other domains from accessing your database. There would be nothing stopping someone from just adding a script on your front-end to grab all the data. The other thing about CORS is its a browser level security feature. So some evil person can just turn that feature off (or use a tool like postman) and make a call to your API.

So then if you are concerned with the 1st one you have to ask yourself who can access this data?. If anyone can go to your React app and get the data using its UI, then anyone can get the data. React or not, your UI isn’t “special” in that sense, as its more or less exposed to the world as-is.

Now let’s say you have to have user’s signed-in to access the data, then you can secure your api using sessions/tokens/whatever on the server before returning the data. This is what most API’s do, as they require some kind of key or token to identity who is asking for the data.

Finally, there are other ways to protect your publicly exposed API, such as rate-limiting. Generally all protections should be back-end enforced at some level, as the back-end is “secure”. Any changes you make on the front-end/browser level can always be circumvented as such client-code is more or less insecure by nature.

1 Like

In this particular case, it’s not really a security issue. There’s no sensitive data on the database, and it’s all meant to be displayed. All the data is public. I just don’t want it easily showing up in JSON in the browser.

What do you mean by this?

If its not a security issue, as anyone can get/load the data, then are you just trying to prevent other sites from being able to grab data from the site? If such is the case you can always turn on CORS protection for your back-end.
Just remember like I said earlier this wont add much protection against malicious activity compared to more serious API security measures.

I’d compare it to adding a “stay off grass” sign on your lawn to prevent burglars from trying to break into your house haha. You’ll be able to wade off the average person that “follows the rules”, but anyone with serious intentions wont be deterred.

You can use any custom Header in requests from your client application and reply 403 to any requests without it.

2 Likes

This sounds like the way to go to me. I’m not sure how to go about it, but I at least have something to Google now. :slight_smile: Thanks for the advice!