[Flight] Encode Symbols as special rows that can be referenced by mod…

…els … (#20171)

* Encode Symbols as special rows that can be referenced by models

If a symbol was extracted from Symbol.for(...) then we can reliably
recreate the same symbol on the client.

S123:"react.suspense"
M456:{mySymbol: '$123'}

This doesn't suffer from the XSS problem because you have to write actual
code to create one of these symbols. That problem is only a problem because
values pass through common other usages of JSON which are not secure.

Since React encodes its built-ins as symbols, we can now use them as long
as its props are serializable. Like Suspense.

* Refactor resolution to avoid memo hack

Going through createElement isn't quite equivalent for ref and key in props.

* Reuse symbol ids that have already been written earlier in the stream

packages/react-client/src/ReactFlightClient.js

@@ -132,6 +132,13 @@ function createErrorChunk(response: Response, error: Error): ErroredChunk {
   return new Chunk(ERRORED, error, response);
 }
 
+function createInitializedChunk<T>(
+  response: Response,
+  value: T,
+): InitializedChunk<T> {
+  return new Chunk(INITIALIZED, value, response);
+}
+
 function wakeChunk(listeners: null | Array<() => mixed>) {
   if (listeners !== null) {
     for (let i = 0; i < listeners.length; i++) {
@@ -373,6 +380,17 @@ export function resolveModule(
   }
 }
 
+export function resolveSymbol(
+  response: Response,
+  id: number,
+  name: string,
+): void {
+  const chunks = response._chunks;
+  // We assume that we'll always emit the symbol before anything references it
+  // to save a few bytes.
+  chunks.set(id, createInitializedChunk(response, Symbol.for(name)));
+}
+
 export function resolveError(
   response: Response,
   id: number,

packages/react-client/src/ReactFlightClientStream.js

@@ -12,6 +12,7 @@ import type {Response} from './ReactFlightClientHostConfigStream';
 import {
   resolveModule,
   resolveModel,
+  resolveSymbol,
   resolveError,
   createResponse as createResponseBase,
   parseModelString,
@@ -32,26 +33,28 @@ function processFullRow(response: Response, row: string): void {
     return;
   }
   const tag = row[0];
+  // When tags that are not text are added, check them here before
+  // parsing the row as text.
+  // switch (tag) {
+  // }
+  const colon = row.indexOf(':', 1);
+  const id = parseInt(row.substring(1, colon), 16);
+  const text = row.substring(colon + 1);
   switch (tag) {
     case 'J': {
-      const colon = row.indexOf(':', 1);
-      const id = parseInt(row.substring(1, colon), 16);
-      const json = row.substring(colon + 1);
-      resolveModel(response, id, json);
+      resolveModel(response, id, text);
       return;
     }
     case 'M': {
-      const colon = row.indexOf(':', 1);
-      const id = parseInt(row.substring(1, colon), 16);
-      const json = row.substring(colon + 1);
-      resolveModule(response, id, json);
+      resolveModule(response, id, text);
+      return;
+    }
+    case 'S': {
+      resolveSymbol(response, id, JSON.parse(text));
       return;
     }
     case 'E': {
-      const colon = row.indexOf(':', 1);
-      const id = parseInt(row.substring(1, colon), 16);
-      const json = row.substring(colon + 1);
-      const errorInfo = JSON.parse(json);
+      const errorInfo = JSON.parse(text);
       resolveError(response, id, errorInfo.message, errorInfo.stack);
       return;
     }

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -174,7 +174,7 @@ describe('ReactFlight', () => {
           <ErrorBoundary expectedMessage="Functions cannot be passed directly to client components because they're not serializable.">
             <Client transport={fn} />
           </ErrorBoundary>
-          <ErrorBoundary expectedMessage="Symbol values (foo) cannot be passed to client components.">
+          <ErrorBoundary expectedMessage="Only global symbols received from Symbol.for(...) can be passed to client components.">
             <Client transport={symbol} />
           </ErrorBoundary>
           <ErrorBoundary expectedMessage="Refs cannot be used in server components, nor passed to client components.">

packages/react-server/src/ReactFlightServer.js

@@ -25,28 +25,20 @@ import {
   close,
   processModelChunk,
   processModuleChunk,
+  processSymbolChunk,
   processErrorChunk,
   resolveModuleMetaData,
   isModuleReference,
 } from './ReactFlightServerConfig';
 
 import {
   REACT_ELEMENT_TYPE,
-  REACT_DEBUG_TRACING_MODE_TYPE,
   REACT_FORWARD_REF_TYPE,
   REACT_FRAGMENT_TYPE,
   REACT_LAZY_TYPE,
-  REACT_LEGACY_HIDDEN_TYPE,
   REACT_MEMO_TYPE,
-  REACT_OFFSCREEN_TYPE,
-  REACT_PROFILER_TYPE,
-  REACT_SCOPE_TYPE,
-  REACT_STRICT_MODE_TYPE,
-  REACT_SUSPENSE_TYPE,
-  REACT_SUSPENSE_LIST_TYPE,
 } from 'shared/ReactSymbols';
 
-import * as React from 'react';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
 
@@ -86,6 +78,7 @@ export type Request = {
   completedModuleChunks: Array<Chunk>,
   completedJSONChunks: Array<Chunk>,
   completedErrorChunks: Array<Chunk>,
+  writtenSymbols: Map<Symbol, number>,
   flowing: boolean,
   toJSON: (key: string, value: ReactModel) => ReactJSONValue,
 };
@@ -107,6 +100,7 @@ export function createRequest(
     completedModuleChunks: [],
     completedJSONChunks: [],
     completedErrorChunks: [],
+    writtenSymbols: new Map(),
     flowing: false,
     toJSON: function(key: string, value: ReactModel): ReactJSONValue {
       return resolveModelToJSON(request, this, key, value);
@@ -118,10 +112,13 @@ export function createRequest(
   return request;
 }
 
-function attemptResolveElement(element: React$Element<any>): ReactModel {
-  const type = element.type;
-  const props = element.props;
-  if (element.ref !== null && element.ref !== undefined) {
+function attemptResolveElement(
+  type: any,
+  key: null | React$Key,
+  ref: mixed,
+  props: any,
+): ReactModel {
+  if (ref !== null && ref !== undefined) {
     // When the ref moves to the regular props object this will implicitly
     // throw for functions. We could probably relax it to a DEV warning for other
     // cases.
@@ -135,34 +132,30 @@ function attemptResolveElement(element: React$Element<any>): ReactModel {
     return type(props);
   } else if (typeof type === 'string') {
     // This is a host element. E.g. HTML.
-    return [REACT_ELEMENT_TYPE, type, element.key, element.props];
-  } else if (
-    type === REACT_FRAGMENT_TYPE ||
-    type === REACT_STRICT_MODE_TYPE ||
-    type === REACT_PROFILER_TYPE ||
-    type === REACT_SCOPE_TYPE ||
-    type === REACT_DEBUG_TRACING_MODE_TYPE ||
-    type === REACT_LEGACY_HIDDEN_TYPE ||
-    type === REACT_OFFSCREEN_TYPE ||
-    // TODO: These are temporary shims
-    // and we'll want a different behavior.
-    type === REACT_SUSPENSE_TYPE ||
-    type === REACT_SUSPENSE_LIST_TYPE
-  ) {
-    return element.props.children;
+    return [REACT_ELEMENT_TYPE, type, key, props];
+  } else if (typeof type === 'symbol') {
+    if (type === REACT_FRAGMENT_TYPE) {
+      // For key-less fragments, we add a small optimization to avoid serializing
+      // it as a wrapper.
+      // TODO: If a key is specified, we should propagate its key to any children.
+      // Same as if a server component has a key.
+      return props.children;
+    }
+    // This might be a built-in React component. We'll let the client decide.
+    // Any built-in works as long as its props are serializable.
+    return [REACT_ELEMENT_TYPE, type, key, props];
   } else if (type != null && typeof type === 'object') {
     if (isModuleReference(type)) {
       // This is a reference to a client component.
-      return [REACT_ELEMENT_TYPE, type, element.key, element.props];
+      return [REACT_ELEMENT_TYPE, type, key, props];
     }
     switch (type.$$typeof) {
       case REACT_FORWARD_REF_TYPE: {
         const render = type.render;
         return render(props, undefined);
       }
       case REACT_MEMO_TYPE: {
-        const nextChildren = React.createElement(type.type, element.props);
-        return attemptResolveElement(nextChildren);
+        return attemptResolveElement(type.type, key, ref, props);
       }
     }
   }
@@ -399,7 +392,12 @@ export function resolveModelToJSON(
     const element: React$Element<any> = (value: any);
     try {
       // Attempt to render the server component.
-      value = attemptResolveElement(element);
+      value = attemptResolveElement(
+        element.type,
+        element.key,
+        element.ref,
+        element.props,
+      );
     } catch (x) {
       if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
         // Something suspended, we'll need to create a new segment and resolve it later.
@@ -526,14 +524,26 @@ export function resolveModelToJSON(
   }
 
   if (typeof value === 'symbol') {
+    const writtenSymbols = request.writtenSymbols;
+    const existingId = writtenSymbols.get(value);
+    if (existingId !== undefined) {
+      return serializeByValueID(existingId);
+    }
+    const name = value.description;
     invariant(
-      false,
-      'Symbol values (%s) cannot be passed to client components. ' +
+      Symbol.for(name) === value,
+      'Only global symbols received from Symbol.for(...) can be passed to client components. ' +
+        'The symbol Symbol.for(%s) cannot be found among global symbols. ' +
         'Remove %s from this object, or avoid the entire object: %s',
       value.description,
       describeKeyForErrorMessage(key),
       describeObjectForErrorMessage(parent),
     );
+    request.pendingChunks++;
+    const symbolId = request.nextChunkId++;
+    emitSymbolChunk(request, symbolId, name);
+    writtenSymbols.set(value, symbolId);
+    return serializeByValueID(symbolId);
   }
 
   // $FlowFixMe: bigint isn't added to Flow yet.
@@ -588,6 +598,11 @@ function emitModuleChunk(
   request.completedModuleChunks.push(processedChunk);
 }
 
+function emitSymbolChunk(request: Request, id: number, name: string): void {
+  const processedChunk = processSymbolChunk(request, id, name);
+  request.completedModuleChunks.push(processedChunk);
+}
+
 function retrySegment(request: Request, segment: Segment): void {
   const query = segment.query;
   let value;
@@ -604,7 +619,12 @@ function retrySegment(request: Request, segment: Segment): void {
       // Doing this here lets us reuse this same segment if the next component
       // also suspends.
       segment.query = () => value;
-      value = attemptResolveElement(element);
+      value = attemptResolveElement(
+        element.type,
+        element.key,
+        element.ref,
+        element.props,
+      );
     }
     const processedChunk = processModelChunk(request, segment.id, value);
     request.completedJSONChunks.push(processedChunk);

packages/react-server/src/ReactFlightServerConfigStream.js

@@ -109,6 +109,16 @@ export function processModuleChunk(
   return convertStringToBuffer(row);
 }
 
+export function processSymbolChunk(
+  request: Request,
+  id: number,
+  name: string,
+): Chunk {
+  const json = stringify(name);
+  const row = serializeRowHeader('S', id) + json + '\n';
+  return convertStringToBuffer(row);
+}
+
 export {
   scheduleWork,
   flushBuffered,

packages/react-transport-dom-relay/src/ReactFlightDOMRelayClient.js

@@ -15,6 +15,7 @@ import {
   createResponse,
   resolveModel,
   resolveModule,
+  resolveSymbol,
   resolveError,
   close,
 } from 'react-client/src/ReactFlightClient';
@@ -26,6 +27,9 @@ export function resolveRow(response: Response, chunk: RowEncoding): void {
     resolveModel(response, chunk[1], chunk[2]);
   } else if (chunk[0] === 'M') {
     resolveModule(response, chunk[1], chunk[2]);
+  } else if (chunk[0] === 'S') {
+    // $FlowFixMe: Flow doesn't support disjoint unions on tuples.
+    resolveSymbol(response, chunk[1], chunk[2]);
   } else {
     // $FlowFixMe: Flow doesn't support disjoint unions on tuples.
     resolveError(response, chunk[1], chunk[2].message, chunk[2].stack);

packages/react-transport-dom-relay/src/ReactFlightDOMRelayProtocol.js

@@ -20,6 +20,7 @@ export type JSONValue =
 export type RowEncoding =
   | ['J', number, JSONValue]
   | ['M', number, ModuleMetaData]
+  | ['S', number, string]
   | [
       'E',
       number,

packages/react-transport-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js

@@ -111,6 +111,14 @@ export function processModuleChunk(
   return ['M', id, moduleMetaData];
 }
 
+export function processSymbolChunk(
+  request: Request,
+  id: number,
+  name: string,
+): Chunk {
+  return ['S', id, name];
+}
+
 export function scheduleWork(callback: () => void) {
   callback();
 }

packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js

@@ -153,11 +153,14 @@ describe('ReactFlightDOMRelay', () => {
       foo: {
         bar: (
           <div>
-            {'Fragment child'}
-            {'Profiler child'}
-            {'StrictMode child'}
-            {'Suspense child'}
-            {['SuspenseList row 1', 'SuspenseList row 2']}
+            Fragment child
+            <Profiler>Profiler child</Profiler>
+            <StrictMode>StrictMode child</StrictMode>
+            <Suspense fallback="Loading...">Suspense child</Suspense>
+            <SuspenseList fallback="Loading...">
+              {'SuspenseList row 1'}
+              {'SuspenseList row 2'}
+            </SuspenseList>
             <div>Hello world</div>
           </div>
         ),

packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js

@@ -282,10 +282,6 @@ describe('ReactFlightDOM', () => {
       );
     }
 
-    function Placeholder({children, fallback}) {
-      return <Suspense fallback={fallback}>{children}</Suspense>;
-    }
-
     // Model
     function Text({children}) {
       return children;
@@ -347,22 +343,21 @@ describe('ReactFlightDOM', () => {
     }
 
     const MyErrorBoundaryClient = moduleReference(MyErrorBoundary);
-    const PlaceholderClient = moduleReference(Placeholder);
 
     function ProfileContent() {
       return (
         <>
           <ProfileDetails avatar={<Text>:avatar:</Text>} />
-          <PlaceholderClient fallback={<p>(loading sidebar)</p>}>
+          <Suspense fallback={<p>(loading sidebar)</p>}>
             <ProfileSidebar friends={<Friends>:friends:</Friends>} />
-          </PlaceholderClient>
-          <PlaceholderClient fallback={<p>(loading posts)</p>}>
+          </Suspense>
+          <Suspense fallback={<p>(loading posts)</p>}>
             <ProfilePosts posts={<Posts>:posts:</Posts>} />
-          </PlaceholderClient>
+          </Suspense>
           <MyErrorBoundaryClient>
-            <PlaceholderClient fallback={<p>(loading games)</p>}>
+            <Suspense fallback={<p>(loading games)</p>}>
               <ProfileGames games={<Games>:games:</Games>} />
-            </PlaceholderClient>
+            </Suspense>
           </MyErrorBoundaryClient>
         </>
       );