Implementing CORS - defining allowed domains that can access your API.

What's the process?

1. The client sends a preflight request (using the OPTIONS method) to the server, checking if the domain is permitted and if the request method is approved.
2. The server decides whether to accept or reject the request, responding with an "OK" message and setting headers specifying which domains/methods are allowed.
3. If the client is permitted to make requests to the API, it proceeds with the intended action or aborts.

Only clients respecting CORS (like browsers) will be able to connect, while those ignoring CORS (such as REST clients and CLI tools) may bypass this restriction.

Additionally, always require signed requests for authorization purposes.

This scenario presents an intriguing challenge that many e-commerce websites face. The product I am currently working on has engaged in discussions with businesses encountering similar issues within the realm of mobile applications. User logins can provide insight into API usage, but if you prefer not to mandate a username/login system, alternative solutions must be explored. In essence, what you are seeking is a means of identifying the software attempting to access your API.

There are several common approaches often employed to tackle this predicament:

Embedded Secret

You can integrate a secret key into your application and require any API access to authenticate itself using this key. Some may advise against this method due to the ease at which the key can be extracted. While valid, it's important to conduct a cost/benefit analysis when evaluating the extent to which you safeguard your API. With Javascript, concealing secrets or obfuscating them proves challenging since the source code is readily accessible.

In scenarios where other programming languages offer more flexibility, such as utilizing the NDK in Android, additional layers of protection can be implemented to hide the secret within your app. However, achieving this level of secrecy is more complex with Javascript.

An essential consideration when handling an API key is to never transmit it in plain text as this makes it susceptible to theft. Instead, employ the key to sign your API traffic, enabling the server to validate requests from sources possessing the key and knowledge of how to sign it.

Rate Limiting

Though it doesn't directly solve the issue, depending on your objectives, rate limiting can serve as a viable option. If concerns revolve around a surge of requests originating from external applications, setting up rate limits above typical user behavior could deter unauthorized activity. Additionally, implementing blocks or further rate limiting based on IP addresses can help manage excessive incoming requests effectively.

Currently, it is possible for any individual to view the data being sent to your backend server by examining the network tabs in their browser console. The most effective method to safeguard your API is by implementing user authentication using JWT or a similar system. In the case that your application allows guest users, cross-origin resource sharing (CORS) may not provide sufficient protection because users can easily replicate requests seen in the browser console using tools like curl or Postman.

I sought guidance from the solution provided by @ThePragmatist.

Within my React website, I have various environment-based configurations such as backend API base URLs (e.g. staging-api.test.com, dev-api.test.com), current domain names (e.g. staging.test.com, dev.test.com), etc. To secure each public request (requests that do not require authorization), I utilized variables to create a token. Here is the approach I took:

On the Client side:

• Create a string with

  user-agent/IP/something else from the header

  + request timestamp + _ + random 6 digit string
• Generate a JWT token using any environmental configuration (I combined several like backend_api + domain + another config) as the secret key and the previously generated string
• Include the created token in a custom header named token

On the server-side for verification:

• Implement middleware to authenticate any public API requests, with Redis implementation to prevent reuse of the same token for a new request.
• Verify the JWT token received in the token header. If successfully verified, proceed; otherwise, return with 403
• Examine the timestamp provided in the request. If it is within 2 minutes or earlier, reject the request with 524 (or an alternative based on requirements); otherwise, continue processing
• Confirm if the token includes a random 6-digit string at the end. If absent, reject the request due to incorrect token format
• Check if there exists a redis-key associated with the mentioned token header value. If present, it indicates prior usage of the same header in a request - hence, deny the request with 403; otherwise, proceed
• Store the token header in Redis with an expiration time of 2 minutes plus 10 seconds (providing a buffer)

This method ensures that all public requests are accompanied by a token that offers substantial security against spammers/hackers due to the use of multiple private configs as part of the signature process. Additionally, unauthorized reuse of the same header in subsequent requests is prevented, ensuring only the client app can generate the required token through a combination of factors including headers, timestamps, and unique string endings.

Hopefully, this solution proves beneficial to someone's inquiry.

EDIT:

The inclusion of a random 6-digit string can also be authenticated on the server-side by implementing TOTP (Time-based OTP), set with an expiry of 2-4 minutes. This enhancement strengthens the generated token by enabling validation of each component.

Apologies for the delay in response, but I wanted to share my insights on this topic.

Incorporating reCAPTCHA V3 into your system could be beneficial as it allows for the generation of tokens only within the browser (depending on your settings) and ties them to specific domains specified during key creation. By sending the short-lived token generated on the frontend with each backend request, the backend can then validate and verify its authenticity.

The following code snippet demonstrates how to obtain a token using Google reCAPTCHA:

<script src="https://www.google.com/recaptcha/enterprise.js?render=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></script>
<script>
grecaptcha.enterprise.ready(function() {
    grecaptcha.enterprise.execute('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', {action: 'login'}).then(function(token) {
       ...
    });
});
</script>

Hey there, thanks for asking such an interesting question that is crucial for securing your React app and backend API.

With my expertise in developing security libraries for Node and Python, I am more than happy to guide you through the process.

To ensure the protection of your application, I recommend implementing the OAuth2 Password Grant flow. This approach involves collecting user credentials in your React app and sending them securely to your backend API.

By utilizing the POST request method with specified parameters and content type, you can generate both Access and Refresh tokens on the server side. These tokens will then be stored in a secure cookie within the user's browser.

Subsequently, your React server will automatically identify the user during API requests through the token stored in the cookie. It is important to utilize an OAuth2 library on the server side for tasks like token generation, refreshing expired tokens, and user identification.

This approach eliminates the need for permanent API keys, which could pose a severe security risk in untrusted environments like mobile or client-side apps.

Overall, following the mentioned flow provides enhanced security by utilizing short-lived tokens, storing them securely, and exchanging passwords for access only once per session.

If you are interested in tools or services to streamline this process, I recommend exploring OAuth libraries for server-side implementation or considering services like Stormpath that handle authentication complexities efficiently.