Oh boy, it's not looking good for React.

It was just last week that the React

team disclosed a critical security

vulnerability in React server

components. But then just yesterday, the

security research found two additional

security vulnerabilities while

attempting to exploit the patches in

last week's critical vulnerability. This

affected Nex.js, React Router, the Vit

RSC plug-in, Redwood SDK, or rather

anyone that uses React server

components. So before we dive into each

one of the vulnerabilities to understand

truly what really happened, make sure to

update your application as soon as

possible using the link in the

description below as it points to the

official React docs for how you could

upgrade your application depending on

the version you're at, the framework

you're using, and so on. So let's dive

in. So let's say a user clicks a button,

and that specific button is a submit

button inside some form that allows you

to create a product. The fact that we're

creating a product means that we need

some sort of immutation for that. If

you're using a framework like NextJS or

if you're using React directly which

nextJS internally uses then you would

expose something called as a server

function also known as server action.

This is how it would look like. This is

a function. The fact that you add a use

server directive at the top of the file

or at the top of the function would

expose that function as a HTTP endpoint.

So you can call it this is your

syntactic sugar over here. Instead of

creating a separate API request, you can

just simply export a function with use

server directive at the top of the file.

Here's what's happening inside the

function. We create a product. Product

gets passed as a parameter. We're

checking if the user is valid. If the

user is even allowed to create a product

so then we are inserting the product

into the database. Now this is just

straightforward server action code.

There's nothing abnormal here. There's

nothing special here. We are preventing

the server action from being called. the

fact that we have this check for the

user. Obviously, there could be more

code here that I could add to make it

even more secure, but let's stick to

this for now. Now, calling a server

action does not actually call the

function. When you call a server action

and await the specific function, for

example, await create product. It

doesn't directly call the function.

Here's what happens. What React does,

React turns that interaction into a HTTP

request. At this point, we have entered

the network world. We're no longer in a

JavaScript line. And that's exactly what

server actions are lock. They give

expose the HTTP endpoint by simply just

creating a function here. So when the

request hits the server, React does

three things. First, it tries to decode

the request. Second, it calls a server

function. And third, it encodes the

result and sends it back to the client.

Now, all three security vulnerabilities

happen in these steps in the React

decode step and in the React encode

step. So let's take a look at the first

one. So critical security vulnerability

in React server components. There was an

unauthenticated remote execution

vulnerability. Now the first one being

discovered happened during the decoding

step. A malicious user could trick React

into executing code before your function

even runs. This happens before

authentication checks, before

validation, before your code. And this

is taken care of. If you have upgraded

your app last week, then you're good

here. And again, there's more

information here. The vulnerability is

in fact present in these three packages.

React server DOM, Webpack, Parcel and

Turbopac are all the React server DOM

packages. The second one that happened

yesterday is called denal of service.

Now first of all a denal service attack

is when someone in intentionally

prevents legitimate users from accessing

your application. So denial of service

also happened here. It's in fact in the

decoding the request phase. Certain

requests could cause React to get stuck

in an infinite loop while decoding. As a

result, it hangs a server. So the users

of your application are no longer able

to access that specific information or

create a product in this case because

your function never gets called. React

will get stuck in an infinite loop. The

server is just going to freeze. An

analogy here would be like imagine

you're in a coffee shop. Normally,

you're standing in line waiting to

order. But let's say a malicious user

just walks in and stands in front of

you, cuts the line, is not letting

anyone order coffee, is standing in

front of the register, blocking everyone

else. They never order, they never move,

and the shop also did not get robbed yet

because they're just blocking other

people from accessing it or from

ordering coffee. So, no one else can be

served either. So, this is what denial

service attack does. Denal server attack

doesn't break into your application but

it prevents your app from working at all

and this creates a vulnerability vector

where an attacker may be able to deny

users from accessing the product and

potentially have a performance impact on

the server environment. Now the patches

published mitigate preventing this

infinite loop and the third one is

called as a source code exposure for

example. So if you take a look, this is

a medium severity that a security

researcher has discovered that a

malicious HTTP request sent to the

vulnerable server function may unsafeely

return the source code of any server

function. So the source code exposure

thing happened during encoding. In some

cases, React would accidentally

stringify and return the server

functions source code in response. Now

this is just really bad. So here's what

happens. So this is the server function

for example. Exploitation requires the

existence of a server function which

explicitly or implicitly exposes a

stringified argument. So let's say this

is a server function. Implicitly

stringify it's leaked in the DB and

attacker may be able to leak the

following. So this literally includes

your entire information. because this

server function is exposed. If you are

using hard-coded environment variables

here, for example, your API key or

something that clearly deserves to be in

environment variables and not in inside

your code, then you're exposed. That's a

big problem right there. So, secrets in

the code may be exposed. Secrets

hardcoded in source code may be exposed,

but runtime secrets such as process.n

environment variable are not exposed.

scope of this is only limited to the

code inside the server function which

may include other functions depending on

the amount of inlining a bundle provide.

Now this is again really horrible. So

again make sure to upgrade your

application. Now if I were you I know

that React has specifically mentioned

specific patches. Let's say you're not

using server components or you're not

using server actions even but you're

using React. I would still upgrade. I

would make sure that I'm not sure what

else might be uncovered in the future.

This definitely shakes my trust a little

bit. So, make sure to upgrade your

application following the guide here

that I've linked in the description

below. So, here's what that means.

Server actions are not just functions

that are they are public HTTP endpoints.

And these vulnerabilities lived in the

layer that translates HTTP code into

JavaScript code. The translation layer

is what broke, not your specific code.

However, if you have followed best

security best practices such as not

exposing your environment variables or

hard coding it, putting your API key in

your code and all on that then obviously

you won't be exposed. However, if you

did do that, then this is definitely

really important for you that you

upgrade. Now, if you are using Nex.js,

do not manually upgrade React, upgrade

Nex.js instead. The React team is also

working with individual frameworks to

make sure that there is this proper fix

there. And if you are on a canary

release, check the React block

carefully. Some canaries were affected

and required downgrading instead. And if

you updated last week, make sure you

update again because like I mentioned,

there were three security

vulnerabilities. One that was discovered

about a week ago and two more discovered

just yesterday. Now, this does not mean

that React server components are truly

unsafe, but it does mean that they are a

powerful infrastructure that deserve the

same scrutiny as any other back-end

system. So, treat these server actions

as simple back-end API calls. Follow the

same practices as you would for any

other backend code that you're writing.

Make sure to not store hardcore

environment variables. Make sure to

follow the security practices to truly

understand how to prevent yourself from

a vulnerability like this one. But

again, the translation layer is what

broke. Like I mentioned, this specific

layer, not your code specifically, but

your as a result, your code is impacted

and exposed. So, I hope this was

helpful. If there's one takeaway from

this entire video, make sure you update

your app if you're using React Server

Components or server functions, for

example. Thank you so much for watching.

Make sure to hit the like button and

subscribe to my channel if you enjoyed

this specific video with a plan to

create more content just like this and

drop a video every single day until

Christmas. So, it's going to be a lot of

fun. As next steps, if you are

interested in leveling up your React

skills, then definitely check out this

next year 16 completely free crash

course that will help you level up your

next year skills. It's completely free.

It's 5 hours long, but truly worth it.

Let that be your course to help you

level up your next year skill. All

right, thank you so much for watching.