Skip to main content
Announcements
See what Drew Clarke has to say about the Qlik Talend Cloud launch! READ THE BLOG
cancel
Showing results for 
Search instead for 
Did you mean: 
evanadley
Contributor
Contributor

How to Secure Backend API Endpoints on the Front-End: Best Practices

I'm new to web development and currently working on an application with a React frontend and a Node backend API server.

I've noticed that all requests from my front-end are accessible to the client, which means that anyone can view and potentially call my API endpoints independently. This raises concerns about the security of my application. I am interested in restricting API calls only to those originating from my front-end app. How can I go about achieving this?

Is there a way to conceal my endpoints from the client?

Labels (5)
1 Reply
Latonya86Dodson
Contributor
Contributor


@evanadleyBe Ball Players wrote:

I'm new to web development and currently working on an application with a React frontend and a Node backend API server.

I've noticed that all requests from my front-end are accessible to the client, which means that anyone can view and potentially call my API endpoints independently. This raises concerns about the security of my application. I am interested in restricting API calls only to those originating from my front-end app. How can I go about achieving this?

Is there a way to conceal my endpoints from the client?


Hello,

First of all, you should always use TLS (Transport Layer Security) to encrypt your messages while they’re in transit. This will prevent third parties from intercepting and reading sensitive information, such as API credentials and private data. TLS also lets users know that your API is legitimate and protected.

Second, you should use OAuth2 for single sign on (SSO) with OpenID Connect. This will allow you to authenticate and authorize the users of your web app, and grant them access tokens to access your API resources. OAuth2 is a standard protocol that works with many web frameworks and platforms, such as React and Node.

Third, you should use a revocable shared API key between your front-end and your backend. This will allow you to identify and verify the source of the API calls, and revoke permissions from compromised instances. You can generate and store the API key on your backend server, and send it to your front-end app via a secure channel, such as TLS or.

Finally, you should use a CAPTCHA to prevent bots and automated scripts from abusing your API. A CAPTCHA is a challenge-response test that requires human interaction to pass. You can use a third-party service, such as Google reCAPTCHA, to implement a CAPTCHA on your front-end app. This will ensure that only genuine users can access your API.

These are some of the best practices for securing your backend API endpoints on the front-end. However, there is no foolproof way to completely conceal your endpoints from the client, as they are always exposed in the network requests. Therefore, you should also implement proper validation, sanitization, and error handling on your backend server, to prevent malicious or invalid inputs from compromising your API.

I hope this helps you. 

Best regards,

Latonya86Dodson