React Vulnerability: Critical Security Flaw in React Server Components

You’ve spent weeks building your project, fine-tuning every detail, and finally, it’s ready for the world to see. You hit deploy, excited to show off your hard work. But then, days later, you start noticing strange issues, things breaking unexpectedly, your app slowing down, and even some parts of the interface behaving strangely.

That’s exactly what happened to two of my colleagues while they were working on React projects. Both used React Server Components (RSC) to make their apps more efficient, but neither of them knew that a critical vulnerability was lurking in their code, waiting to be exploited.

Their stories are real. It wasn’t just a random glitch. It was a serious security flaw that had put their entire apps at risk. And, worse yet, it wasn’t just a niche issue for large companies—this vulnerability affected small-scale, personal projects just like theirs. They quickly learned that React’s Server Components were vulnerable to a remote code execution (RCE) attack, a flaw that allowed attackers to gain full access to their servers without any authentication.

This vulnerability is no longer something that only big corporations need to worry about. It's a wake-up call for all developers—whether you’re running a huge enterprise app or working on your weekend project.

So, how did it happen? What exactly is the issue? And most importantly—how can you fix it?

The vulnerability CVE-2025-55182 was identified within React Server Components (RSC). This is a key feature that enables server-side rendering and more efficient communication between the server and client. When properly implemented, RSC improves the performance of web applications by allowing server-side logic to directly influence the user interface.

But here’s the issue: the vulnerability stems from unsafe deserialization. In simple terms, when the server deserializes data (which is basically decoding or unpacking data) that’s been sent from the client, it doesn’t check whether that data is secure. This opens the door for attackers to send crafted payloads that trick the server into executing unauthorized code. Essentially, attackers can inject malicious code into the server-side application through seemingly innocent client-side requests.

Let’s break this down with an example. In the vulnerable code below, the app fetches data from the server and directly parses it with JSON.parse() without any checks, making it prone to exploitation.

// app/page.tsx  — A Server Component

async function getData() {
  const res = await fetch('https://api.example.com/data'); // or your internal API
  const rawText = await res.text(); // Get raw text instead of .json()

  // EXTREMELY DANGEROUS: Blind JSON.parse on untrusted input
  // If attacker controls the response (e.g. via DNS rebinding, MITM, or compromised API),
  // they can exploit prototype pollution or trigger gadgets
  const data = JSON.parse(rawText); // ← Vulnerable to malicious payloads

  return data;
}

export default async function Page() {
  const data = await getData();

  // If data contains __proto__ pollution or malicious objects, bad things happen
  return <div>Dangerous value: {data.maliciousField}</div>;
}

Why It’s Vulnerable:
The JSON.parse() function assumes that the data it processes is trustworthy, but in this case, an attacker can manipulate the data being sent, leading to arbitrary code execution on the server.

This flaw allows attackers to inject malicious payloads into the response, resulting in potential remote code execution (RCE), putting the entire application at risk.

To mitigate this vulnerability, we can implement data validation before deserializing it. Here’s a more secure approach:

// app/page.tsx — Secure React Server Component

async function getData() {
  const res = await fetch('https://api.example.com/data', {
    cache: 'no-store', // or use appropriate caching
  });

  if (!res.ok) {
    throw new Error('Failed to fetch data');
  }

  const rawText = await res.text();

  let parsed;
  try {
    parsed = JSON.parse(rawText);
  } catch (e) {
    console.error('Invalid JSON received');
    return null;
  }

  // CRITICAL: Validate and sanitize the structure
  if (!isValidData(parsed)) {
    console.error('Invalid data structure received:', parsed);
    return null;
  }

  return parsed;
}

// Strict schema validation
function isValidData(data: unknown): data is { value: string; id: number } {
  return (
    typeof data === 'object' &&
    data !== null &&
    'value' in data &&
    typeof (data as any).value === 'string' &&
    'id' in data &&
    typeof (data as any).id === 'number'
  );
}

export default async function Page() {
  const data = await getData();

  if (!data) {
    return <div>Invalid or missing data</div>;
  }

  return (
    <div>
      <h1>Safe Data</h1>
      <p>ID: {data.id}</p>
      <p>Value: {data.value}</p>
    </div>
  );
}

Why This Works:
In this updated code, the isValidData() function checks whether the incoming data is of the expected structure before it’s processed. This simple validation step ensures that only valid and trusted data is passed to setData(). By doing this, we prevent the server from executing any malicious code that could have been sent as part of a tampered payload.

The flaw was discovered after security researchers, and later the React team, started noticing unusual patterns of behavior in apps using RSC. Once reported, the React team moved quickly to release a fix, but not before some advanced threat actors had already started targeting vulnerable applications. In fact, the vulnerability’s nature made it especially dangerous because attackers didn’t need authentication to exploit it; they could simply send the malicious payload to an exposed endpoint.

This issue didn’t just affect large enterprises; it impacted smaller-scale developers and personal projects as well. My colleagues, for instance, didn’t even realize their apps were vulnerable until it was too late.

A core contributor from the React team shared:

We acted quickly once the vulnerability was identified, and our team worked tirelessly to release a patch. It's a reminder of how important security is, especially when it involves server-client communications.

Additionally, Lachlan Davidson, who identified the vulnerability and shared a Proof of Concept (PoC) on GitHub, helped researchers and developers understand the exploit and better guard against it.

The vulnerability affects React versions 19.0 → 19.2.0, especially when used with React Server Components (RSC). Any app running RSC—whether for a personal project or a commercial application—could potentially fall victim to this exploit.

It’s not just about React apps either. Frameworks like Next.js, which rely on React’s server-side rendering features, are also at risk. This is a much broader issue than simply updating React itself. If you’re using RSC, your app’s exposure to this vulnerability is a serious concern.

You might be wondering how do you protect your app and fix this issue before it causes any more damage? Here’s what you need to do:

1. Upgrade Your React Version

The React team has already patched this vulnerability. The latest versions of React, starting from 19.0.1, 19.1.2, and 19.2.1, have addressed the issue. Next.js has also released updated versions with fixes to the problem. Make sure to update React and Next.js immediately if you're running any of the affected versions.

For detailed instructions on patching and securing your React app, visit the official React blog on the CVE-2025 vulnerability.

2. Check Your Endpoints

If your app uses RSC, you need to ensure that all exposed endpoints are secured properly. You can start by reviewing your application’s code for any public-facing RSC endpoints that don’t require authentication. Secure these endpoints to prevent unauthorized access.

3. Audit Your Application

After updating, audit your app for any potential signs of malicious activity. This could include reviewing logs for abnormal requests or investigating unexpected crashes. If you find any signs of exploitation, rotate credentials and ensure that any compromised secrets are replaced.

4. Use Security Best Practices

It’s not enough to just patch your app. Security should be baked into your development lifecycle from the beginning. Use libraries that sanitize user input and ensure any serialized data is validated before it’s processed.

React’s vulnerability is more than just a technical issue. It’s a warning sign for the future of modern web frameworks. As frameworks like React and Next.js evolve to offer more features, they can also introduce new complexities and risks. This flaw, while patched, shows that developers need to be increasingly vigilant about the code their applications run.

For businesses and individual developers alike, security should be a priority at every stage of development, not just an afterthought when things go wrong. As we move forward, embracing proactive security practices will be critical to building resilient, secure applications.

React2Shell might have been a wake-up call for many, but it’s also an opportunity to reinforce the importance of security-first development. Patching your app is just the first step—you need to be proactive in staying updated with the latest releases and securing all potential points of vulnerability.

Stay safe, stay updated, and ensure your projects are protected against emerging threats. If you haven’t done so already, make the upgrade today.

Want to ensure your app is always secure? Get in touch with us to learn how we can help you maintain a robust security posture for your React applications and beyond.