@samitouri / QOS-React-2 / commits / 7e2ab87a61

DevTools: Replaced unsafe hasOwnProperty() calls (#17768)

DevTools previously called in several places with user-defined values. This could lead to runtime errors if those values had an overriden attribute. This commit replaces those callse with instead. New test cases have been added.

Brian Vaughn committed Jan 3, 2020 at 09:34 UTC 7e2ab87a613b11250fe9678cc111fc8485c8a683
10 files changed +266 -45
packages/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
+33 -5
@@ -510,11 +510,6 @@ exports[`InspectedElementContext should support complex data types: 1: Inspected
510 "object_of_objects": {
511 "inner": {}
512 },
513 - "object_with_null_proto": {
514 - "string": "abc",
515 - "number": 123,
516 - "boolean": true
517 - },
513 "react_element": {},
514 "regexp": {},
515 "set": {
@@ -552,6 +547,39 @@ exports[`InspectedElementContext should support custom objects with enumerable p
547 }
548 `;
549
550 +exports[`InspectedElementContext should support objects with no prototype: 1: Inspected element 2 1`] = `
551 +{
552 + "id": 2,
553 + "owners": null,
554 + "context": null,
555 + "hooks": null,
556 + "props": {
557 + "object": {
558 + "string": "abc",
559 + "number": 123,
560 + "boolean": true
561 + }
562 + },
563 + "state": null
564 +}
565 +`;
566 +
567 +exports[`InspectedElementContext should support objects with overridden hasOwnProperty: 1: Inspected element 2 1`] = `
568 +{
569 + "id": 2,
570 + "owners": null,
571 + "context": null,
572 + "hooks": null,
573 + "props": {
574 + "object": {
575 + "name": "blah",
576 + "hasOwnProperty": true
577 + }
578 + },
579 + "state": null
580 +}
581 +`;
582 +
583 exports[`InspectedElementContext should support simple data types: 1: Initial inspection 1`] = `
584 {
585 "id": 2,
packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
+95 -12
@@ -537,10 +537,6 @@ describe('InspectedElementContext', () => {
537 xyz: 1,
538 },
539 });
540 - const objectWithNullProto = Object.create(null);
541 - objectWithNullProto.string = 'abc';
542 - objectWithNullProto.number = 123;
543 - objectWithNullProto.boolean = true;
540
541 const container = document.createElement('div');
542 await utils.actAsync(() =>
@@ -558,7 +554,6 @@ describe('InspectedElementContext', () => {
554 map={mapShallow}
555 map_of_maps={mapOfMaps}
556 object_of_objects={objectOfObjects}
561 - object_with_null_proto={objectWithNullProto}
557 react_element={<span />}
558 regexp={/abc/giu}
559 set={setShallow}
@@ -609,7 +604,6 @@ describe('InspectedElementContext', () => {
604 map,
605 map_of_maps,
606 object_of_objects,
612 - object_with_null_proto,
607 react_element,
608 regexp,
609 set,
@@ -701,12 +695,6 @@ describe('InspectedElementContext', () => {
695 );
696 expect(object_of_objects.inner[meta.preview_short]).toBe('{…}');
697
704 - expect(object_with_null_proto).toEqual({
705 - boolean: true,
706 - number: 123,
707 - string: 'abc',
708 - });
709 -
698 expect(react_element[meta.inspectable]).toBe(false);
699 expect(react_element[meta.name]).toBe('span');
700 expect(react_element[meta.type]).toBe('react_element');
@@ -753,6 +741,101 @@ describe('InspectedElementContext', () => {
741 done();
742 });
743
744 + it('should support objects with no prototype', async done => {
745 + const Example = () => null;
746 +
747 + const object = Object.create(null);
748 + object.string = 'abc';
749 + object.number = 123;
750 + object.boolean = true;
751 +
752 + const container = document.createElement('div');
753 + await utils.actAsync(() =>
754 + ReactDOM.render(<Example object={object} />, container),
755 + );
756 +
757 + const id = ((store.getElementIDAtIndex(0): any): number);
758 +
759 + let inspectedElement = null;
760 +
761 + function Suspender({target}) {
762 + const {getInspectedElement} = React.useContext(InspectedElementContext);
763 + inspectedElement = getInspectedElement(id);
764 + return null;
765 + }
766 +
767 + await utils.actAsync(
768 + () =>
769 + TestRenderer.create(
770 + <Contexts
771 + defaultSelectedElementID={id}
772 + defaultSelectedElementIndex={0}>
773 + <React.Suspense fallback={null}>
774 + <Suspender target={id} />
775 + </React.Suspense>
776 + </Contexts>,
777 + ),
778 + false,
779 + );
780 +
781 + expect(inspectedElement).not.toBeNull();
782 + expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
783 + expect(inspectedElement.props.object).toEqual({
784 + boolean: true,
785 + number: 123,
786 + string: 'abc',
787 + });
788 +
789 + done();
790 + });
791 +
792 + it('should support objects with overridden hasOwnProperty', async done => {
793 + const Example = () => null;
794 +
795 + const object = {
796 + name: 'blah',
797 + hasOwnProperty: true,
798 + };
799 +
800 + const container = document.createElement('div');
801 + await utils.actAsync(() =>
802 + ReactDOM.render(<Example object={object} />, container),
803 + );
804 +
805 + const id = ((store.getElementIDAtIndex(0): any): number);
806 +
807 + let inspectedElement = null;
808 +
809 + function Suspender({target}) {
810 + const {getInspectedElement} = React.useContext(InspectedElementContext);
811 + inspectedElement = getInspectedElement(id);
812 + return null;
813 + }
814 +
815 + await utils.actAsync(
816 + () =>
817 + TestRenderer.create(
818 + <Contexts
819 + defaultSelectedElementID={id}
820 + defaultSelectedElementIndex={0}>
821 + <React.Suspense fallback={null}>
822 + <Suspender target={id} />
823 + </React.Suspense>
824 + </Contexts>,
825 + ),
826 + false,
827 + );
828 +
829 + expect(inspectedElement).not.toBeNull();
830 + expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
831 + expect(inspectedElement.props.object).toEqual({
832 + name: 'blah',
833 + hasOwnProperty: true,
834 + });
835 +
836 + done();
837 + });
838 +
839 it('should support custom objects with enumerable properties and getters', async done => {
840 class CustomData {
841 _number = 42;
packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap
+41 -5
@@ -151,11 +151,6 @@ Object {
151 "object_of_objects": {
152 "inner": {}
153 },
154 - "object_with_null_proto": {
155 - "string": "abc",
156 - "number": 123,
157 - "boolean": true
158 - },
154 "react_element": {},
155 "regexp": {},
156 "set": {
@@ -198,6 +193,47 @@ Object {
193 }
194 `;
195
196 +exports[`InspectedElementContext should support objects with no prototype: 1: Initial inspection 1`] = `
197 +Object {
198 + "id": 2,
199 + "type": "full-data",
200 + "value": {
201 + "id": 2,
202 + "owners": null,
203 + "context": {},
204 + "hooks": null,
205 + "props": {
206 + "object": {
207 + "string": "abc",
208 + "number": 123,
209 + "boolean": true
210 + }
211 + },
212 + "state": null
213 +},
214 +}
215 +`;
216 +
217 +exports[`InspectedElementContext should support objects with overridden hasOwnProperty: 1: Initial inspection 1`] = `
218 +Object {
219 + "id": 2,
220 + "type": "full-data",
221 + "value": {
222 + "id": 2,
223 + "owners": null,
224 + "context": {},
225 + "hooks": null,
226 + "props": {
227 + "object": {
228 + "name": "blah",
229 + "hasOwnProperty": true
230 + }
231 + },
232 + "state": null
233 +},
234 +}
235 +`;
236 +
237 exports[`InspectedElementContext should support simple data types: 1: Initial inspection 1`] = `
238 Object {
239 "id": 2,
packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
+55 -12
@@ -168,10 +168,6 @@ describe('InspectedElementContext', () => {
168 xyz: 1,
169 },
170 });
171 - const objectWithNullProto = Object.create(null);
172 - objectWithNullProto.string = 'abc';
173 - objectWithNullProto.number = 123;
174 - objectWithNullProto.boolean = true;
171
172 act(() =>
173 ReactDOM.render(
@@ -188,7 +184,6 @@ describe('InspectedElementContext', () => {
184 map={mapShallow}
185 map_of_maps={mapOfMaps}
186 object_of_objects={objectOfObjects}
191 - object_with_null_proto={objectWithNullProto}
187 react_element={<span />}
188 regexp={/abc/giu}
189 set={setShallow}
@@ -217,7 +212,6 @@ describe('InspectedElementContext', () => {
212 map,
213 map_of_maps,
214 object_of_objects,
220 - object_with_null_proto,
215 react_element,
216 regexp,
217 set,
@@ -283,12 +277,6 @@ describe('InspectedElementContext', () => {
277 );
278 expect(object_of_objects.inner[meta.preview_short]).toBe('{…}');
279
286 - expect(object_with_null_proto).toEqual({
287 - boolean: true,
288 - number: 123,
289 - string: 'abc',
290 - });
291 -
280 expect(react_element[meta.inspectable]).toBe(false);
281 expect(react_element[meta.name]).toBe('span');
282 expect(react_element[meta.type]).toBe('react_element');
@@ -325,6 +313,61 @@ describe('InspectedElementContext', () => {
313 done();
314 });
315
316 + it('should support objects with no prototype', async done => {
317 + const Example = () => null;
318 +
319 + const object = Object.create(null);
320 + object.string = 'abc';
321 + object.number = 123;
322 + object.boolean = true;
323 +
324 + act(() =>
325 + ReactDOM.render(
326 + <Example object={object} />,
327 + document.createElement('div'),
328 + ),
329 + );
330 +
331 + const id = ((store.getElementIDAtIndex(0): any): number);
332 + const inspectedElement = await read(id);
333 +
334 + expect(inspectedElement).toMatchSnapshot('1: Initial inspection');
335 + expect(inspectedElement.value.props.object).toEqual({
336 + boolean: true,
337 + number: 123,
338 + string: 'abc',
339 + });
340 +
341 + done();
342 + });
343 +
344 + it('should support objects with overridden hasOwnProperty', async done => {
345 + const Example = () => null;
346 +
347 + const object = {
348 + name: 'blah',
349 + hasOwnProperty: true,
350 + };
351 +
352 + act(() =>
353 + ReactDOM.render(
354 + <Example object={object} />,
355 + document.createElement('div'),
356 + ),
357 + );
358 +
359 + const id = ((store.getElementIDAtIndex(0): any): number);
360 + const inspectedElement = await read(id);
361 +
362 + expect(inspectedElement).toMatchSnapshot('1: Initial inspection');
363 + expect(inspectedElement.value.props.object).toEqual({
364 + name: 'blah',
365 + hasOwnProperty: true,
366 + });
367 +
368 + done();
369 + });
370 +
371 it('should support custom objects with enumerable properties and getters', async done => {
372 class CustomData {
373 _number = 42;
packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
+3 -3
@@ -78,7 +78,7 @@ export default function KeyValue({
78 type:
79 value !== null &&
80 typeof value === 'object' &&
81 - value.hasOwnProperty(meta.type)
81 + hasOwnProperty.call(value, meta.type)
82 ? value[meta.type]
83 : typeof value,
84 },
@@ -136,8 +136,8 @@ export default function KeyValue({
136 </div>
137 );
138 } else if (
139 - value.hasOwnProperty(meta.type) &&
140 - !value.hasOwnProperty(meta.unserializable)
139 + hasOwnProperty.call(value, meta.type) &&
140 + !hasOwnProperty.call(value, meta.unserializable)
141 ) {
142 children = (
143 <div
packages/react-devtools-shared/src/devtools/views/utils.js
+1 -1
@@ -93,7 +93,7 @@ export function createRegExp(string: string): RegExp {
93 }
94
95 export function getMetaValueLabel(data: Object): string | null {
96 - if (data.hasOwnProperty(meta.preview_long)) {
96 + if (hasOwnProperty.call(data, meta.preview_long)) {
97 return data[meta.preview_long];
98 } else {
99 return formatDataForPreview(data, true);
packages/react-devtools-shared/src/utils.js
+3 -3
@@ -385,7 +385,7 @@ export function getDataType(data: Object): DataType {
385 if (Array.isArray(data)) {
386 return 'array';
387 } else if (ArrayBuffer.isView(data)) {
388 - return data.constructor.hasOwnProperty('BYTES_PER_ELEMENT')
388 + return hasOwnProperty.call(data.constructor, 'BYTES_PER_ELEMENT')
389 ? 'typed_array'
390 : 'data_view';
391 } else if (data.constructor && data.constructor.name === 'ArrayBuffer') {
@@ -490,7 +490,7 @@ export function formatDataForPreview(
490 data: any,
491 showFormattedValue: boolean,
492 ): string {
493 - if (data != null && data.hasOwnProperty(meta.type)) {
493 + if (data != null && hasOwnProperty.call(data, meta.type)) {
494 return showFormattedValue
495 ? data[meta.preview_long]
496 : data[meta.preview_short];
@@ -534,7 +534,7 @@ export function formatDataForPreview(
534 }
535 return `[${truncateForDisplay(formatted)}]`;
536 } else {
537 - const length = data.hasOwnProperty(meta.size)
537 + const length = hasOwnProperty.call(data, meta.size)
538 ? data[meta.size]
539 : data.length;
540 return `Array(${length})`;
packages/react-devtools-shell/src/app/InspectableElements/EdgeCaseObjects.js new
+33
@@ -0,0 +1,33 @@
1 +/**
2 + * Copyright (c) Facebook, Inc. and its affiliates.
3 + *
4 + * This source code is licensed under the MIT license found in the
5 + * LICENSE file in the root directory of this source tree.
6 + *
7 + * @flow
8 + */
9 +
10 +import React from 'react';
11 +
12 +const objectWithModifiedHasOwnProperty = {
13 + foo: 'abc',
14 + bar: 123,
15 + hasOwnProperty: true,
16 +};
17 +
18 +const objectWithNullProto = Object.create(null);
19 +objectWithNullProto.foo = 'abc';
20 +objectWithNullProto.bar = 123;
21 +
22 +export default function EdgeCaseObjects() {
23 + return (
24 + <ChildComponent
25 + objectWithModifiedHasOwnProperty={objectWithModifiedHasOwnProperty}
26 + objectWithNullProto={objectWithNullProto}
27 + />
28 + );
29 +}
30 +
31 +function ChildComponent(props: any) {
32 + return null;
33 +}
packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js
+2
@@ -13,6 +13,7 @@ import CircularReferences from './CircularReferences';
13 import Contexts from './Contexts';
14 import CustomHooks from './CustomHooks';
15 import CustomObject from './CustomObject';
16 +import EdgeCaseObjects from './EdgeCaseObjects.js';
17 import NestedProps from './NestedProps';
18 import SimpleValues from './SimpleValues';
19
@@ -28,6 +29,7 @@ export default function InspectableElements() {
29 <Contexts />
30 <CustomHooks />
31 <CustomObject />
32 + <EdgeCaseObjects />
33 <CircularReferences />
34 </Fragment>
35 );
packages/react-devtools-shell/src/app/InspectableElements/UnserializableProps.js
-4
@@ -25,9 +25,6 @@ const immutable = Immutable.fromJS({
25 xyz: 1,
26 },
27 });
28 -const objectWithNullProto = Object.create(null);
29 -objectWithNullProto.foo = 'abc';
30 -objectWithNullProto.bar = 123;
28
29 export default function UnserializableProps() {
30 return (
@@ -40,7 +37,6 @@ export default function UnserializableProps() {
37 setOfSets={setOfSets}
38 typedArray={typedArray}
39 immutable={immutable}
43 - objectWithNullProto={objectWithNullProto}
40 />
41 );
42 }