Perform hasOwnProperty check in Relay Flight (#20220)

sebmarkbage · web-flow · commit 12627f93b535 · 2020-11-10T19:59:46.000-08:00
We simulate JSON.stringify in this loop so we should do a has own check.
Otherwise we'll include things like constructor properties.

This will actually make things throw less even when it should.
diff --git a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js b/packages/react-transport-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
@@ -71,6 +71,8 @@ export function processErrorChunk(
   ];
 }
 
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+
 function convertModelToJSON(
   request: Request,
   parent: {+[key: string]: ReactModel} | $ReadOnlyArray<ReactModel>,
@@ -88,12 +90,14 @@ function convertModelToJSON(
     } else {
       const jsonObj: {[key: string]: JSONValue} = {};
       for (const nextKey in json) {
-        jsonObj[nextKey] = convertModelToJSON(
-          request,
-          json,
-          nextKey,
-          json[nextKey],
-        );
+        if (hasOwnProperty.call(json, nextKey)) {
+          jsonObj[nextKey] = convertModelToJSON(
+            request,
+            json,
+            nextKey,
+            json[nextKey],
+          );
+        }
       }
       return jsonObj;
     }
diff --git a/packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js b/packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
@@ -214,4 +214,23 @@ describe('ReactFlightDOMRelay', () => {
     const model = readThrough(transport);
     expect(model).toEqual(14);
   });
+
+  it('should warn in DEV if a class instance polyfill is passed to a host component', () => {
+    function Bar() {}
+
+    function Foo() {}
+    Foo.prototype = Object.create(Bar.prototype);
+    // This is enumerable which some polyfills do.
+    Foo.prototype.constructor = Foo;
+    Foo.prototype.method = function() {};
+
+    expect(() => {
+      const transport = [];
+      ReactDOMFlightRelayServer.render(<input value={new Foo()} />, transport);
+      readThrough(transport);
+    }).toErrorDev(
+      'Only plain objects can be passed to client components from server components. ',
+      {withoutStack: true},
+    );
+  });
 });
diff --git a/packages/react-transport-native-relay/src/ReactFlightNativeRelayServerHostConfig.js b/packages/react-transport-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
@@ -71,6 +71,8 @@ export function processErrorChunk(
   ];
 }
 
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+
 function convertModelToJSON(
   request: Request,
   parent: {+[key: string]: ReactModel} | $ReadOnlyArray<ReactModel>,
@@ -88,12 +90,14 @@ function convertModelToJSON(
     } else {
       const jsonObj: {[key: string]: JSONValue} = {};
       for (const nextKey in json) {
-        jsonObj[nextKey] = convertModelToJSON(
-          request,
-          json,
-          nextKey,
-          json[nextKey],
-        );
+        if (hasOwnProperty.call(json, nextKey)) {
+          jsonObj[nextKey] = convertModelToJSON(
+            request,
+            json,
+            nextKey,
+            json[nextKey],
+          );
+        }
       }
       return jsonObj;
     }
diff --git a/packages/react-transport-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js b/packages/react-transport-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js
@@ -105,4 +105,26 @@ describe('ReactFlightNativeRelay', () => {
       nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(),
     ).toMatchSnapshot();
   });
+
+  it('should warn in DEV if a class instance polyfill is passed to a host component', () => {
+    function Bar() {}
+
+    function Foo() {}
+    Foo.prototype = Object.create(Bar.prototype);
+    // This is enumerable which some polyfills do.
+    Foo.prototype.constructor = Foo;
+    Foo.prototype.method = function() {};
+
+    expect(() => {
+      const transport = [];
+      ReactNativeFlightRelayServer.render(
+        <input value={new Foo()} />,
+        transport,
+      );
+      readThrough(transport);
+    }).toErrorDev(
+      'Only plain objects can be passed to client components from server components. ',
+      {withoutStack: true},
+    );
+  });
 });
