Case Study: Client-Side Trust of Sensitive API Response (React / MongoDB)

Estimated Savings: Cyvocate’s report prevented potential certification fraud and platform abuse exceeding $300,000+ by securing the integrity of corporate assessments.

---

Executive Summary

Cyvocate identified a fundamental authorization failure in a leading learning management and professional assessment system. The web application featured a modern React frontend utilizing Redux Toolkit for state management, interacting with a Node.js/Express API and a MongoDB database.

During our security assessment, we discovered that the application incorrectly trusted client-side state flags to determine assessment completion status. By intercepting the backend API's user profile response and manipulating a single JSON boolean value, an unauthenticated user could bypass comprehensive certification exams, instantly unlocking gated course progression, generating valid certificate numbers, and obtaining access to restricted modules without executing a single line of test code.

---

The Tech Stack

• Frontend: React (v18), Redux Toolkit (state management), React Router (client-side routing)
• Backend Framework: Node.js, Express.js
• Database: MongoDB (Mongoose ODM)
• Authentication: JSON Web Tokens (JWT)
• Testing Proxy: Burp Suite Community Edition

---

The Challenge

A persistent anti-pattern in single-page applications (SPAs) like React is the merging of UI state (e.g., hiding or showing button elements) with security boundaries (e.g., authorizing access to raw content).

In this application, the developers relied on the client-side state machine inside React Router to restrict access to specialized certification screens. When a user loaded their dashboard, the React app queried the user's profile metadata from the backend. The backend returned a complete user document, which included high-security attributes such as exam results and completion states.

Because the backend did not independently enforce authorization checks when retrieving actual module content or certificate files, the security of the entire platform was entirely reliant on the client-side UI remaining unmanipulated.

---

The Exploit Scenario

Cyvocate’s penetration testing team simulated a standard student account to demonstrate the vulnerability:

1. Intercept the Profile Payload: The user logs in normally. The React frontend makes an HTTP GET request to /api/auth/me to fetch user profile details. We intercept the response in transit.
2. Target the Completion Flag: We identify the target JSON parameters:

   {
     "userId": "usr_9281a",
     "username": "student_test",
     "isPythonTestCompleted": false
   }
   

3. Perform Response Tampering: Using a local debugging proxy (e.g., Burp Proxy), we modify the HTTP response body before it reaches the browser, changing "isPythonTestCompleted": false to "isPythonTestCompleted": true.
4. UI State Unlock: The browser receives the modified JSON. Redux Toolkit updates its global state provider, and React Router unlocks the restricted certificate download pages and advanced learning modules instantly.
5. Exfiltrate Gated Content: The attacker requests the certificate. Because the backend downloaded files based on the client's request without re-validating the actual exam scores in MongoDB, the server happily generated and delivered a legally binding, authenticated certificate PDF.

This enabled users to secure professional certifications with zero effort, destroying the platform's commercial credibility.

---

Proof of Concept

1. Intercepting the User Profile API Call

The React application triggered the following fetch sequence:

GET /api/auth/me HTTP/2
Host: app.learning-platform.com
Authorization: Bearer [JWT_TOKEN]

Which returned:

{
  "userId": "usr_9281a",
  "isPythonTestCompleted": false
}

2. Modifying the Response

Using Burp Suite, we modified the JSON parameters to toggle the Boolean state flag:

{
  "userId": "usr_9281a",
  "isPythonTestCompleted": true
}

The application dashboard updated instantly, displaying a "Verified Completed" checkmark next to the Python exam:

The gated modules were unlocked, and we successfully downloaded the completion files.

---

Code Remedy: Insecure React Guards vs. Secure Backend Enforcement

Here is the code architecture comparison showing how the vulnerability emerged and how Cyvocate implemented secure, server-side role and score validation.

❌ The Insecure React Client Guard

In this vulnerable setup, the React application trusted client-side router checks and simple state flags to gate endpoints:

// INSECURE REACT ROUTE GUARD: Highly susceptible to client state tampering
import React from 'react';
import { Navigate } from 'react-router-dom';
import { useAppSelector } from '../store/hooks';

export default function ProtectedCertificateRoute({ children }: { children: React.ReactNode }) {
  // Vuln: Global Redux state populated by unverified /api/auth/me response
  const { isPythonTestCompleted } = useAppSelector((state) => state.auth.user);

  if (!isPythonTestCompleted) {
    // Easily bypassed if an attacker tampers with the response payload in Burp Proxy
    return <Navigate to="/dashboard" replace />;
  }

  return <>{children}</>;
}

The Secure Backend Validation & JWT Middleware (Node.js + MongoDB)

To fully secure the application, Cyvocate stripped certification logic out of the frontend and implemented a multi-layered server-side check. When a user requests gated certificate generation or restricted module content, the Node.js Express server extracts the user's ID from a securely signed JWT and queries the absolute truth directly from MongoDB:

import express from 'express';
import jwt from 'jsonwebtoken';
import { UserModel } from './models/User'; // Mongoose Model

const router = express.Router();
const JWT_SECRET = process.env.JWT_SECRET!;

// Secure Authenticated Middleware
const authenticateJWT = (req: any, res: any, next: any) => {
  const authHeader = req.headers.authorization;
  if (!authHeader || !authHeader.startsWith('Bearer ')) {
    return res.status(401).json({ error: "Missing authentication token" });
  }

  const token = authHeader.split(' ')[1];
  jwt.verify(token, JWT_SECRET, (err: any, decoded: any) => {
    if (err) return res.status(403).json({ error: "Invalid or expired token" });
    req.user = decoded; // Contains authenticated userId
    next();
  });
};

// SECURE GATED RESOURCE ENDPOINT: Re-validates state directly in MongoDB
router.get('/api/certificates/python', authenticateJWT, async (req: any, res: any) => {
  const userId = req.user.userId;

  try {
    // 1. Fetch user data directly from the server database (source of truth)
    const user = await UserModel.findById(userId);
    if (!user) {
      return res.status(404).json({ error: "User profile not found." });
    }

    // 2. Perform server-side validation against MongoDB raw score records
    // Do NOT rely on any state variable submitted or handled by the React frontend
    if (!user.pythonExamScore || user.pythonExamScore < 80) {
      return res.status(403).json({ 
        error: "Unauthorized. You have not passed the required examination on the backend ledger." 
      });
    }

    // 3. Generate secure download link or file streaming
    const certificateData = await generateSecureCertificate(user);
    return res.status(200).json({ 
      success: true, 
      downloadUrl: certificateData.url 
    });

  } catch (error) {
    console.error("Secure certificate retrieval failed: ", error);
    return res.status(500).json({ error: "Internal server validation failure." });
  }
});

---

Recommendations & Lessons

1. Frontend is Only a Presentation Layer: Treat all frontend state machines (React, Redux, Vue, Angular) as completely compromised. Never rely on frontend routing, state variables, or DOM states to enforce security barriers.
2. Verify State at the Destination: Any request to read or write a gated asset (e.g. downloading a file, accessing a database record) must execute an independent server-side check.
3. Cryptographically Sign State Transitions: If you must transfer verified state flags to the client, encrypt or cryptographically sign the payloads (e.g., using secure JWT structures) to prevent response tampering.