Prevent eval in lottie player (#2195)

* adds runExpressions: false * bump lottie player * adds changeset * Update serious-bats-peel.md * rm ts-expect-error --------- Co-authored-by: Brooke Scarlett Yalof <[email protected]>
mongodb · Jan 30, 2024 · 543102f · 543102f
1 parent bfda539
commit 543102f
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 6 deletions.
diff --git a/.changeset/serious-bats-peel.md b/.changeset/serious-bats-peel.md
@@ -0,0 +1,7 @@
+---
+'@leafygreen-ui/loading-indicator': patch
+---
+- Resolves: [LG-3979](https://jira.mongodb.org/browse/LG-3979)
+- Updates `react-lottie-player@^1.5.6`
+- Adds `runExpressions: false` to Lottie config to prevent arbitrary code execution. (See https://github.com/airbnb/lottie-web/pull/2833)
+
diff --git a/packages/loading-indicator/package.json b/packages/loading-indicator/package.json
@@ -35,7 +35,7 @@
     "@leafygreen-ui/palette": "^4.0.7",
     "@leafygreen-ui/tokens": "^2.1.4",
     "@leafygreen-ui/typography": "^18.0.0",
-    "react-lottie-player": "^1.5.4"
+    "react-lottie-player": "^1.5.6"
   },
   "peerDependencies": {
     "@leafygreen-ui/leafygreen-provider": "^3.1.10"

diff --git a/packages/loading-indicator/src/PageLoader/PageLoader.tsx b/packages/loading-indicator/src/PageLoader/PageLoader.tsx
@@ -6,6 +6,7 @@ import { cx } from '@leafygreen-ui/emotion';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { Body, useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
 
+import { lottieRendererSettings } from '../constants';
 import { descriptionThemeColor } from '../LoadingIndicator.styles';
 
 import animationJson from './animation';
@@ -27,7 +28,13 @@ const PageLoader = ({
 
   return (
     <div className={cx(rootStyles, className)} {...rest}>
-      <Lottie play loop animationData={animationJson} style={blobStyles} />
+      <Lottie
+        play
+        loop
+        animationData={animationJson}
+        style={blobStyles}
+        rendererSettings={lottieRendererSettings}
+      />
       {description && (
         <Body
           className={descriptionThemeColor[theme]}

diff --git a/packages/loading-indicator/src/Spinner/Spinner.tsx b/packages/loading-indicator/src/Spinner/Spinner.tsx
@@ -6,6 +6,7 @@ import { cx } from '@leafygreen-ui/emotion';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { Body, useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
 
+import { lottieRendererSettings } from '../constants';
 import { descriptionThemeColor } from '../LoadingIndicator.styles';
 
 import animationJson from './animation';
@@ -63,6 +64,7 @@ const Spinner = ({
           height: size,
           marginBottom: description ? spinnerMarginBottom : undefined,
         }}
+        rendererSettings={lottieRendererSettings}
       />
       {description && (
         <Body

diff --git a/packages/loading-indicator/src/constants.ts b/packages/loading-indicator/src/constants.ts
@@ -0,0 +1,7 @@
+import type { LottieProps } from 'react-lottie-player';
+
+type RendererSettings = LottieProps['rendererSettings'];
+
+export const lottieRendererSettings: RendererSettings = {
+  runExpressions: false,
+};
diff --git a/yarn.lock b/yarn.lock
@@ -11605,10 +11605,10 @@ react-keyed-flatten-children@^1.3.0:
   dependencies:
     react-is "^16.8.6"
 
-react-lottie-player@^1.5.4:
-  version "1.5.4"
-  resolved "https://registry.yarnpkg.com/react-lottie-player/-/react-lottie-player-1.5.4.tgz#8205cc334d11b923d9bac78e1d19bcc0d475d751"
-  integrity sha512-eM0g11bAc4EJJuDDfCoNloaAYphfXlIpYnriOt4nRU66PpVmvKhajvP2aif4YflGY2ArAFXhWxs418YzdebK9w==
+react-lottie-player@^1.5.6:
+  version "1.5.6"
+  resolved "https://registry.yarnpkg.com/react-lottie-player/-/react-lottie-player-1.5.6.tgz#13d43fb4b4506f25fe647ccde8cc0fcbe788bc1f"
+  integrity sha512-t0GdTYbml0Ihski8ZPx+1WjpjM/EQlTqTcuGm5yeZGJAgFXTmoqrHbSX8bcREIxrHjibWAyIWnLVUK/iHLcqAQ==
   dependencies:
     fast-deep-equal "^3.1.3"
     lottie-web "^5.7.6"