@samitouri / QOS-React-1 / commits / 72e02a8350

[Flight Reply] Don't allow Symbols to be passed to a reply (#28610)

As mentioned in #28609 there's a potential security risk if you allow a passed value to the server to spoof Elements because it allows a hacker to POST cross origin. This is only an issue if your framework allows this which it shouldn't but it seems like we should provide an extra layer of security here. ```js function action(errors, payload) { try { ... } catch (x) { return [newError].concat(errors); } } ``` ```js const [errors, formAction] = useActionState(action); return <div>{errors}</div>; ``` This would allow you to construct a payload where the previous "errors" set includes something like `<script src="danger.js" />`. We could block only elements from being received but it could potentially be a risk with creating other React types like Context too. We use symbols as a way to securely brand these. Most JS don't use this kind of branding with symbols like we do. They're generally properties which we don't support anyway. However in theory someone else could be using them like we do. So in an abundance of carefulness I just ban all symbols from being passed (except by temporary reference) - not just ours. This means that the format isn't fully symmetric even beyond just React Nodes. #28611 allows code that includes symbols/elements to continue working but may have to bail out to replaying instead of no JS sometimes. However, you still can't access the symbols inside the server - they're by reference only.

Sebastian Markbåge committed Mar 21, 2024 at 16:53 UTC 72e02a8350309c6228ec1d9f21a5b09b84456fb8
4 files changed +14 -23
packages/react-client/src/ReactFlightReplyClient.js
+7 -13
@@ -105,10 +105,6 @@ function serializeTemporaryReferenceID(id: number): string {
105 return '$T' + id.toString(16);
106 }
107
108 -function serializeSymbolReference(name: string): string {
109 - return '$S' + name;
110 -}
111 -
108 function serializeFormDataReference(id: number): string {
109 // Why K? F is "Function". D is "Date". What else?
110 return '$K' + id.toString(16);
@@ -479,18 +475,16 @@ export function processReply(
475 }
476
477 if (typeof value === 'symbol') {
482 - // $FlowFixMe[incompatible-type] `description` might be undefined
483 - const name: string = value.description;
484 - if (Symbol.for(name) !== value) {
478 + if (temporaryReferences === undefined) {
479 throw new Error(
486 - 'Only global symbols received from Symbol.for(...) can be passed to Server Functions. ' +
487 - `The symbol Symbol.for(${
488 - // $FlowFixMe[incompatible-type] `description` might be undefined
489 - value.description
490 - }) cannot be found among global symbols.`,
480 + 'Symbols cannot be passed to a Server Function without a ' +
481 + 'temporary reference set. Pass a TemporaryReferenceSet to the options.' +
482 + (__DEV__ ? describeObjectForErrorMessage(parent, key) : ''),
483 );
484 }
493 - return serializeSymbolReference(name);
485 + return serializeTemporaryReferenceID(
486 + writeTemporaryReference(temporaryReferences, value),
487 + );
488 }
489
490 if (typeof value === 'bigint') {
packages/react-client/src/ReactFlightTemporaryReferences.js
+5 -5
@@ -9,7 +9,7 @@
9
10 interface Reference {}
11
12 -export opaque type TemporaryReferenceSet = Array<Reference>;
12 +export opaque type TemporaryReferenceSet = Array<Reference | symbol>;
13
14 export function createTemporaryReferenceSet(): TemporaryReferenceSet {
15 return [];
@@ -17,7 +17,7 @@ export function createTemporaryReferenceSet(): TemporaryReferenceSet {
17
18 export function writeTemporaryReference(
19 set: TemporaryReferenceSet,
20 - object: Reference,
20 + object: Reference | symbol,
21 ): number {
22 // We always create a new entry regardless if we've already written the same
23 // object. This ensures that we always generate a deterministic encoding of
@@ -27,15 +27,15 @@ export function writeTemporaryReference(
27 return newId;
28 }
29
30 -export function readTemporaryReference(
30 +export function readTemporaryReference<T>(
31 set: TemporaryReferenceSet,
32 id: number,
33 -): Reference {
33 +): T {
34 if (id < 0 || id >= set.length) {
35 throw new Error(
36 "The RSC response contained a reference that doesn't exist in the temporary reference set. " +
37 'Always pass the matching set that was used to create the reply when parsing its response.',
38 );
39 }
40 - return set[id];
40 + return (set[id]: any);
41 }
packages/react-server/src/ReactFlightReplyServer.js
-4
@@ -396,10 +396,6 @@ function parseModelString(
396 const chunk = getChunk(response, id);
397 return chunk;
398 }
399 - case 'S': {
400 - // Symbol
401 - return Symbol.for(value.slice(2));
402 - }
399 case 'F': {
400 // Server Reference
401 const id = parseInt(value.slice(2), 16);
scripts/error-codes/codes.json
+2 -1
@@ -501,5 +501,6 @@
501 "513": "Cannot render a Client Context Provider on the Server. Instead, you can export a Client Component wrapper that itself renders a Client Context Provider.",
502 "514": "Cannot access %s on the server. You cannot dot into a temporary client reference from a server component. You can only pass the value through to the client.",
503 "515": "Cannot assign to a temporary client reference from a server module.",
504 - "516": "Attempted to call a temporary Client Reference from the server but it is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component."
504 + "516": "Attempted to call a temporary Client Reference from the server but it is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.",
505 + "517": "Symbols cannot be passed to a Server Function without a temporary reference set. Pass a TemporaryReferenceSet to the options.%s"
506 }