Securing my API to only work with my front-end

Question

I'm building a node/express backend. I want to create an API that only work with my reactjs frontend (private API).

Imagine if this is an e-commerce website, my users will browse products and will then choose what to buy and at the time of order they might or might not login.

What is the best practice to make sure my APIs will only work with my reactjs frontend?

What happens when users decide to login or if they remain as guests?

Answer 1

Apply CORS - server specifies domains allowed to request your API.

How does it work?

1. Client sends special "preflight" request (of OPTIONS method) to server, asking whether domain request comes from is among allowed domains. It also asks whether request method is OKAY (you can allow GET, but deny POST, ...) .
2. Server determines whether to allow, or deny request. It responds with "OK" response and set special headers that tell what domains/request methods are allowed.
3. If client is allowed to query your API, it performs intended request, or bails out...

Clients that do respect CORS (browsers do) will be (or will not be if denied) able to connect. If client ignores CORS (REST clients, CLI tools, ...) it will be able to connect no matter what...

Still, require signed requests (authorisation)

Answer 2

This use case is an interesting one and I think a problem for many e-commerce sites. The product I am working on has actually had some conversations with companies trying to handle exactly this sort of thing in the mobile space. User logins can be used to tell you who is using the API, but if you don't want to force people to have a username/login you have to search for alternate solutions. What you seem to want is a way of identifying what software is attempting to use your API.

There are a couple of straightforward ways that are typically used to address this problem:

Embedded Secret

You can add a secret key to your app and require that any access to the API identifies itself using the key. People will tell you not to do this because it is really easy to extract the key. This is true, but with all security there is a cost/benefit analysis to be done to assess how much work you want to put in to protecting your API. The problem with javascript is that it is not that easy to obfuscate or hide secrets because all of the source code is right there.

If you were thinking about an environment where you had other options for your language choice then you can do more to obfuscate the secret in your app (like using the NDK in android for example). Javascript is difficult though.

The important thing to remember with an API key is that you shouldn't ever transmit it in the clear. It is really easy to steal it that way. Instead you would sign your API traffic using the key so that the server can verify that the request came from something that has the key and knows how to sign it.

Rate Limiting

Though not actually a solution to the problem, depending on what you are trying to achieve this is an option. If you are worried about large numbers of requests coming from other applications, you can rate limit to a level above what a genuine app would do and you could further block or rate limit by ip address if too many requests came in.