Securing API Calls in React

API integration in React often introduces security risks such as token exposure, request interception, and misconfigured CORS policies.
This guide covers:

• How to securely handle authentication tokens
• Protecting API requests from interception
• Preventing sensitive API key leaks
• Properly configuring CORS for security

1. Do Not Store API Keys in Frontend Code

Hardcoding API keys in React exposes them to anyone who inspects the source code.

Bad: Hardcoding API Keys in Frontend

const API_KEY = "your-secret-api-key";

fetch(`https://api.example.com/data?api_key=${API_KEY}`);

Fix: Store API Keys on the Server

Move the API key to a backend and expose only public endpoints.

// Server-side (Express.js)
app.get("/data", async (req, res) => {
  const response = await fetch(
    `https://api.example.com/data?api_key=${process.env.API_KEY}`,
  );
  res.json(await response.json());
});

2. Securely Handle Authentication Tokens

Bad: Storing JWT in localStorage

localStorage.setItem("auth_token", token);

Fix: Use HTTP-Only Cookies

HTTP-only cookies prevent XSS attacks.

// Server-side (Express.js)
app.post("/login", (req, res) => {
  res.cookie("auth_token", "secure-token", {
    httpOnly: true,
    secure: true,
    sameSite: "Strict",
  });
  res.send("Logged in");
});

3. Prevent API Request Interception

Attackers can intercept API requests using man-in-the-middle (MITM) attacks.

Fix: Enforce HTTPS

Ensure all API requests are only over HTTPS.

const API_URL = "https://secure-api.example.com";

Fix: Use Authorization Headers Securely

Use the Authorization header with bearer tokens, not query parameters.

fetch(API_URL, {
  method: "GET",
  headers: { Authorization: `Bearer ${token}` },
});

4. Restrict CORS to Trusted Domains

Misconfigured CORS policies allow cross-origin API requests, making APIs vulnerable.

Bad: Allowing All Origins (*)

// Server-side (Express.js)
app.use(cors({ origin: "*" })); // Security Risk

Fix: Restrict API Access to Specific Domains

app.use(cors({ origin: ["https://yourapp.com"], credentials: true }));

5. Rate Limit API Requests

Rate limiting prevents brute-force attacks and API abuse.

// Server-side (Express.js)
import rateLimit from "express-rate-limit";

const limiter = rateLimit({ windowMs: 15 * 60 * 1000, max: 100 });
app.use("/api/", limiter);

6. Avoid Leaking Sensitive Data in API Responses

Bad: Returning Unfiltered User Data

res.json(user); // Returns full user object with sensitive fields

Fix: Filter Out Sensitive Data

res.json({ id: user.id, username: user.username });

Conclusion

• Store API keys on the server, never in frontend code.
• Use HTTP-only cookies for authentication instead of localStorage.
• Enforce HTTPS to prevent request interception.
• Limit API access with secure CORS configurations.
• Rate-limit API requests to prevent abuse.

Securing API calls in React requires frontend and backend collaboration.
Following these best practices helps prevent data leaks and unauthorized access.