Merge pull request #1312 from Shopify/solve_security_vulnerability

Solve a potential security vulnerability
Shopify · Mar 12, 2020 · 6536a71 · 6536a71
2 parents c0c3c38 + 533be2e
commit 6536a71
Show file tree

Hide file tree

Showing 21 changed files with 51 additions and 284 deletions.
diff --git a/README.md b/README.md
@@ -73,7 +73,6 @@ Each package has its own `README` and documentation describing usage.
 | react-network | [directory](packages/react-network) | [![npm version](https://badge.fury.io/js/%40shopify%2Freact-network.svg)](https://badge.fury.io/js/%40shopify%2Freact-network) |
 | react-performance | [directory](packages/react-performance) | [![npm version](https://badge.fury.io/js/%40shopify%2Freact-performance.svg)](https://badge.fury.io/js/%40shopify%2Freact-performance) |
 | react-router | [directory](packages/react-router) | [![npm version](https://badge.fury.io/js/%40shopify%2Freact-router.svg)](https://badge.fury.io/js/%40shopify%2Freact-router) |
-| react-serialize | [directory](packages/react-serialize) | [![npm version](https://badge.fury.io/js/%40shopify%2Freact-serialize.svg)](https://badge.fury.io/js/%40shopify%2Freact-serialize) |
 | react-server | [directory](packages/react-server) | [![npm version](https://badge.fury.io/js/%40shopify%2Freact-server.svg)](https://badge.fury.io/js/%40shopify%2Freact-server) |
 | react-server-webpack-plugin | [directory](packages/react-server-webpack-plugin) | [![npm version](https://badge.fury.io/js/%40shopify%2Freact-server-webpack-plugin.svg)](https://badge.fury.io/js/%40shopify%2Freact-server-webpack-plugin) |
 | react-shortcuts | [directory](packages/react-shortcuts) | [![npm version](https://badge.fury.io/js/%40shopify%2Freact-shortcuts.svg)](https://badge.fury.io/js/%40shopify%2Freact-shortcuts) |

diff --git a/packages/react-form-state/package.json b/packages/react-form-state/package.json
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@shopify/enzyme-utilities": "^2.1.9",
-    "@shopify/useful-types": "^1.3.0",
+    "@shopify/useful-types": "^2.1.4",
     "faker": "^4.1.0"
   },
   "sideEffects": false,

diff --git a/packages/react-google-analytics/CHANGELOG.md b/packages/react-google-analytics/CHANGELOG.md
@@ -8,6 +8,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/).
 
 ## Unreleased
 
+- Updated dependency: `@shopify/react-import-remote@^1.0.30`
+
 ## 3.1.0 - 2020-02-11
 
 - Fixes `<Universal />` component from failing when the user’s privacy settings block the analytics script ([1276](https://github.com/Shopify/quilt/pull/1276))
diff --git a/packages/react-google-analytics/package.json b/packages/react-google-analytics/package.json
@@ -24,7 +24,7 @@
   },
   "homepage": "https://github.com/Shopify/quilt/blob/master/packages/react-google-analytics/README.md",
   "dependencies": {
-    "@shopify/react-import-remote": "^0.7.0",
+    "@shopify/react-import-remote": "^1.0.30",
     "tslib": "^1.9.3"
   },
   "peerDependencies": {

diff --git a/packages/react-google-analytics/tsconfig.json b/packages/react-google-analytics/tsconfig.json
@@ -10,5 +10,6 @@
     "./src/**/*.ts",
     "./src/**/*.tsx"
   ],
-  "exclude": ["**/*.test.ts", "**/*.test.tsx"]
+  "exclude": ["**/*.test.ts", "**/*.test.tsx"],
+  "references": [{"path": "../react-import-remote"}]
 }
diff --git a/packages/react-html/CHANGELOG.md b/packages/react-html/CHANGELOG.md
@@ -8,6 +8,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/).
 
 ## Unreleased
 
+- Update `serialize-javascript@^3.0.0`. Solved an issue when you try to deserialize a non-JSON object by enforcing data to be serialized as a JSON object. ([#762](https://github.com/Shopify/quilt/pull/762))
+
 ## 9.2.2 - 2019-09-06
 
 - Add missing `useLocale` export

diff --git a/packages/react-html/package.json b/packages/react-html/package.json
@@ -25,11 +25,10 @@
   "dependencies": {
     "@shopify/react-effect": "^3.2.11",
     "@shopify/react-hydrate": "^1.1.15",
-    "@shopify/react-serialize": "^1.0.22",
     "@shopify/useful-types": "^2.1.4",
     "@types/multistream": "^2.1.1",
     "multistream": "^2.1.1",
-    "serialize-javascript": "^1.5.0",
+    "serialize-javascript": "^3.0.0",
     "tslib": "^1.9.3"
   },
   "peerDependencies": {

diff --git a/packages/react-html/src/server/components/Serialize.tsx b/packages/react-html/src/server/components/Serialize.tsx
@@ -12,7 +12,7 @@ export default function Serialize({id, data}: Props) {
   return (
     <script
       type="text/json"
-      dangerouslySetInnerHTML={{__html: serialize(data)}}
+      dangerouslySetInnerHTML={{__html: serialize(data, {isJSON: true})}}
       {...{[SERIALIZE_ATTRIBUTE]: id}}
     />
   );

diff --git a/packages/react-html/src/server/components/tests/Serialize.test.tsx b/packages/react-html/src/server/components/tests/Serialize.test.tsx
@@ -29,7 +29,9 @@ describe('<Serialize />', () => {
       const serialize = mount(<Serialize id={id} data={data} />);
 
       expect(serialize).toContainReactComponent('script', {
-        dangerouslySetInnerHTML: {__html: serializeJavaScript(data)},
+        dangerouslySetInnerHTML: {
+          __html: serializeJavaScript(data, {isJSON: true}),
+        },
       });
     });
   });

diff --git a/packages/react-i18n/README.md b/packages/react-i18n/README.md
@@ -327,43 +327,43 @@ i18n.getTranslationTree('MyComponent.countries');
 
 When rendering internationalized React apps on the server, you will want to extract the translations and rehydrate them on the client if any translations are loaded asynchronously. Not doing so would cause the server and client markup to differ, resulting in a full re-render.
 
-This library uses the [`@shopify/react-effect`](https://github.com/Shopify/quilt/tree/master/packages/react-effect) package to allow translations to be extracted alongside other asynchronous side effects on the server. To make use of this, you will need to keep a reference to the `I18nManager` for your app. Then, import the `extract` function from `@shopify/react-effect`, and call it with your top-level component. Finally, call the manager’s `extract` method to get an opaque representation of the translations that were loaded in that tree:
+We recommend you to use [`@shopify/react-html](https://github.com/Shopify/quilt/tree/master/packages/react-html) with [`@shopify/react-i18n-universal-provider`](https://github.com/Shopify/quilt/tree/master/packages/react-i18n-universal-provider) to serialize the extracted translations and rehydrate them on the client.
 
 ```tsx
+import {
+  Html,
+  render,
+  Serialize,
+  HtmlContext,
+  HtmlManager,
+} from '@shopify/react-html/server';
 import {I18nManager} from '@shopify/react-i18n';
 import {extract} from '@shopify/react-effect/server';
 
-const i18nManager = new I18nManager({locale: 'en'});
-// This assumes your `App` component accepts this prop, and
-// appropriately uses it with a `I18nContext.Provider` component as
-// documented above.
-const element = <App i18nManager={i18nManager} />;
 
-await extract(element);
-
-const translations = i18nManager.extract();
-```
-
-> Note: You can selectively extract _only_ the translations by using the `EFFECT_ID` exported from `@shopify/react-i18n`, and using this as the second argument to `@shopify/react-effect`’s `extract()` as detailed in its documentation. Most consumers of this package will be fine with just the example above.
-
-Once you have done this, serialize the result (we recommend [`@shopify/react-serialize`](https://github.com/Shopify/quilt/tree/master/packages/react-serialize)), then load it on the client and include it as part of the initialization of the i18n manager:
-
-```tsx
-import {I18nContext, I18nManager} from '@shopify/react-i18n';
-import {getSerialized} from '@shopify/react-serialize';
-
-const locale = 'en';
-const {data: translations} = getSerialized('translations');
-
-export default function App({
-  i18nManager = new I18nManager({locale}, translations),
-}) {
+function App({locale}: {locale?: string}) {
   return (
-    <I18nContext.Provider value={i18nManager}>
+    <I18nUniversalProvider locale={locale}>
       {/* App contents */}
     </I18nContext.Provider>
   );
 }
+const app = <App locale='en' />;
+
+const htmlManager = new HtmlManager();
+await extract(element, {
+  decorate(app) {
+    return (
+      <HtmlContext.Provider value={htmlManager}>{app}</HtmlContext.Provider>
+    );
+  },
+});
+
+const html = render(
+  <Html manager={htmlManager}>
+    {app}
+  </Html>,
+);
 ```
 
 ### Babel

diff --git a/packages/react-serialize/CHANGELOG.md b/packages/react-serialize/CHANGELOG.md
@@ -4,10 +4,10 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/).
 
-<!-- Unreleased changes should go to UNRELEASED.md -->
+## ❗️ Deprecated on version 1.0.22 ❗️
 
----
+**Note**: This module is now deprecated. You should move to using the serialization features of [`@shopify/react-html`](../react-html) instead.
 
-## 1.0.12 - 2019-01-09
+## [1.0.12] - 2019-07-03
 
 - Start of Changelog
diff --git a/packages/react-serialize/package.json b/packages/react-serialize/package.json
diff --git a/packages/react-serialize/src/Serializer.tsx b/packages/react-serialize/src/Serializer.tsx
diff --git a/packages/react-serialize/src/index.ts b/packages/react-serialize/src/index.ts
diff --git a/packages/react-serialize/src/tests/Serializer.test.tsx b/packages/react-serialize/src/tests/Serializer.test.tsx
diff --git a/packages/react-serialize/src/tests/utilities.test.ts b/packages/react-serialize/src/tests/utilities.test.ts
diff --git a/packages/react-serialize/src/utilities.ts b/packages/react-serialize/src/utilities.ts
diff --git a/packages/react-serialize/tsconfig.json b/packages/react-serialize/tsconfig.json
diff --git a/packages/react-server/package.json b/packages/react-server/package.json
@@ -33,7 +33,7 @@
     "@shopify/react-hydrate": "^1.1.15",
     "@shopify/react-network": "^3.3.11",
     "@shopify/sewing-kit-koa": "^6.3.0",
-    "@shopify/useful-types": "^1.3.0",
+    "@shopify/useful-types": "^2.1.4",
     "chalk": "^2.4.2",
     "koa": "^2.5.0",
     "koa-compose": ">=3.0.0 <4.0.0",