Hiding API URLs in React Frontend and .NET Core Backend: Why and How

Protect Your API Endpoints to Secure Your Application

In modern web applications, the frontend and backend communicate through APIs. The frontend (e.g., React) sends requests to the backend (e.g., .NET Core), which processes these requests and sends responses. However, exposing API URLs in your frontend or backend can make your application vulnerable to:

• Unauthorized Access: Attackers can use API URLs to exploit your application.

• Reverse Engineering: Exposed endpoints can reveal sensitive logic.

• Security Threats: Unsecured endpoints are prone to malicious attacks like DDoS, SQL injection, or data breaches.

In this blog, we’ll explore why hiding API URLs is important and how to do it effectively in both React (frontend) and .NET Core (backend).

Why Should You Hide API URLs?

1. Frontend Vulnerability

React is a frontend library that runs entirely in the user’s browser. If API URLs are hardcoded into the code, they can easily be exposed through browser developer tools or by inspecting the network requests. This makes it easy for:

• Attackers to discover backend endpoints.

• Bots to abuse your APIs.

• Users to bypass restrictions or business logic.

👋 Become 1% better at .NET Full Stack development every day.

👆 https://dotnet-fullstack-dev.blogspot.com/

♻ Restack it Vibe matches, help others to get it

2. Backend Exposure

While the backend is less exposed than the frontend, improperly securing API routes can still lead to:

• Unauthorized Access: Exposing private routes might allow attackers to access sensitive operations.

• Business Logic Exploitation: If sensitive routes are publicly accessible, attackers could misuse them.

3. Real-Life Consequences

• An exposed payment gateway URL could allow attackers to simulate unauthorized payments.

• Public API endpoints could lead to abuse, resulting in high server costs or service outages.

Thus, hiding and securing API URLs is not just a best practice but a necessity.

---

How to Hide API URLs in the Frontend (React)

React applications rely on the browser, so API URLs will always be visible in network requests. However, you can minimize their exposure and add layers of security.

1. Use Environment Variables

Instead of hardcoding API URLs, store them in environment variables. This allows you to manage them outside your codebase.

Steps:

1. Create a .env file in the root directory of your React project:

   REACT_APP_API_URL=https://your-backend-api.com
   

2. Access the variable in your code:

   const apiUrl = process.env.REACT_APP_API_URL;
   
   fetch(`${apiUrl}/endpoint`, {
       method: 'GET',
   }).then(response => response.json());
   

3. Why Use Environment Variables?

   • URLs are not hardcoded, making the codebase cleaner.

   • You can use different URLs for development, staging, and production.

2. Proxy Requests

Instead of exposing the API URL, use a proxy to forward requests. This can mask the actual API URL.

Steps:

1. Set up a proxy in the package.json file:

   "proxy": "https://your-backend-api.com"
   

2. Use relative URLs in your React code:

   fetch('/endpoint', {
       method: 'GET',
   }).then(response => response.json());
   

3. Why Use a Proxy?

   • The actual API URL is hidden from the frontend.

   • Reduces the need to hardcode absolute URLs.

3. Obfuscate Sensitive Endpoints

While not foolproof, obfuscating endpoint names can add a layer of protection.

Example:

Instead of:

fetch('https://your-backend-api.com/login', {
    method: 'POST',
});

Use:

fetch('https://your-backend-api.com/a1b2c3', {
    method: 'POST',
});

Note: This is not a security measure on its own but can deter casual attackers.

4. Use a Backend Gateway

Instead of directly calling your backend APIs, set up a gateway (e.g., a Node.js or Express server) to handle API requests.

Steps:

1. Create a backend service that proxies requests to the actual API.

2. Use the gateway URL in your React app instead of the actual API.

Why Use a Gateway?

• The frontend never interacts with the actual API directly.

• All sensitive operations are handled securely in the backend.

---

How to Hide API URLs in the Backend (.NET Core)

While backend APIs are not directly exposed like the frontend, they can still reveal sensitive information through improperly secured routes.

1. Use API Gateway

An API Gateway acts as a single entry point for all API requests. It abstracts the backend architecture and hides sensitive endpoints.

Example:

Use AWS API Gateway or Azure API Management to mask backend routes. For instance:

• Actual backend route: https://backend-service/orders

• API Gateway route: https://api-gateway/orders

Benefits:

• Hides backend architecture.

• Adds authentication, rate-limiting, and monitoring capabilities.

2. Configure Endpoint Security

Use Authorization

Ensure that only authorized users can access certain endpoints. Use JWT (JSON Web Token) or OAuth for authentication.

[Authorize]
[HttpGet("orders")]
public IActionResult GetOrders()
{
    return Ok(OrderService.GetOrders());
}

Benefits:

• Prevents unauthorized access.

• Adds a layer of security to sensitive routes.

3. Prevent URL Disclosure in Error Messages

By default, .NET Core may include sensitive information (like full URLs) in error responses. Disable this behavior to prevent leakage.

Steps:

1. Modify Startup.cs to configure exception handling:

   app.UseExceptionHandler("/error");
   app.UseHsts();
   

2. Create a custom error controller:

   [ApiController]
   public class ErrorController : ControllerBase
   {
       [Route("/error")]
       public IActionResult HandleError() =>
           Problem("An unexpected error occurred.");
   }
   

4. Enable HTTPS

Always secure API URLs using HTTPS. This ensures data encryption during transmission, preventing attackers from intercepting requests.

Steps:

1. Enforce HTTPS in Startup.cs:

   public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
   {
       app.UseHttpsRedirection();
       app.UseHsts();
   }
   

2. Use a valid SSL/TLS certificate for production environments.

Best Practices for Both Frontend and Backend

1. Use Rate Limiting: Limit the number of API requests to prevent abuse.

   • Tools: AspNetCoreRateLimit for .NET Core.

2. Monitor and Log Requests: Monitor API usage and log suspicious activities using tools like Serilog or Splunk.

3. Test for Vulnerabilities: Regularly test your application using tools like OWASP ZAP or Burp Suite to identify and fix security issues.

4. Keep Secrets Secure: Store API keys and sensitive credentials in secure locations like:

   • Azure Key Vault

   • AWS Secrets Manager

Conclusion

Hiding API URLs in your frontend (React) and backend (.NET Core) is crucial to securing your application. While it’s impossible to completely hide all URLs, following best practices like using environment variables, proxies, gateways, and securing backend routes significantly reduces vulnerabilities.

By implementing these techniques, you not only enhance the security of your APIs but also build trust with your users, knowing their data is safe.

Which method will you try first? Share your thoughts or challenges in the comments below!