react-scripts - CVE-2021-3803 - react-script module nth-check denial of service CVSS 7.5 #13591

Activity

1. sertechside

   added

   issue: bug report

   needs triage

   on May 16, 2024
2. Shubhamsoni9139 commented on May 31, 2024

   

   Shubhamsoni9139

   on May 31, 2024

   More actions

   Description of the Bug

   The React app created using Create React App (CRA) has encountered a CSS issue after implementing React code splitting. When navigating to a code-split component for the first time, the CSS for that component is not applied. However, if the user navigates to another component and then returns, the CSS is correctly applied.

   Additionally, there is an inner dependency issue with react-scripts related to the nth-check module, version 1.0.2, which has a vulnerability as described in CVE-2021-3803. This vulnerability involves inefficient regular expression complexity.
   Did You Try Recovering Your Dependencies?

   Yes, attempts to recover dependencies were made, but the issue persists.
   Which Terms Did You Search for in User Guide?

   Code splitting
   CSS issues with code splitting
   React Suspense CSS
   CRA CSS not loading
   CVE-2021-3803
   React-scripts dependency update
   

   Environment

   Create React App version: 5.0.0 (example version)
   React version: 18.0.0 (example version)
   react-scripts version: 5.0.0 (example version)
   Browser: Chrome 90, Firefox 88 (example versions)
   Operating System: macOS 11.4, Windows 10 (example versions)
   

   Steps to Reproduce

   Create a React app using CRA.
   Implement code splitting using React's lazy and Suspense.
   Add CSS imports in the code-split component.
   Navigate to the code-split component for the first time.
   Observe that CSS is not applied.
   Navigate to another component and return to the code-split component.
   Observe that CSS is now correctly applied.
   

   Expected Behavior

   The CSS should be applied correctly the first time the code-split component is mounted.
   Actual Behavior

   The CSS is not applied the first time the code-split component is mounted. It only applies after navigating away and then returning to the component.
   Reproducible Demo

   Here is a simplified version of the project setup:

   import React, { Suspense, lazy } from 'react';
   import './styles.scss'; // Ensure global styles are loaded

   const Search = lazy(() => import('./search/search'));

   function Parent() {
   return (
   <Suspense fallback={

   Loading...

   }>
   
   
   );
   }

   export default Parent;
   import React from 'react';
   import './search.scss';

   function Search() {
   return (
   

   
   {/* Your search component code */}
   

   
   );
   }

   export default Search;
   Additional Notes
   Vulnerability in nth-check

   The react-scripts package includes an outdated version of the nth-check module, which is vulnerable to inefficient regular expression complexity as detailed in CVE-2021-3803. This issue needs to be addressed in an update to react-scripts to include a patched version of nth-check.

   👍React with 👍2Reacted by Kenyon and Shubham soni
3. HaiJunCai8 commented on Jun 28, 2024

   

   HaiJunCai8

   on Jun 28, 2024

   More actions

   Has this issue been resolved? I am currently facing the same problem.
4. HeberLZGlobant commented on Jul 18, 2024

   

   HeberLZGlobant

   on Jul 18, 2024

   More actions

   Any updates on this?
5. Dips-agrwl commented on Sep 18, 2024

   

   Dips-agrwl

   on Sep 18, 2024

   Last edited by Dips-agrwl

   More actions

   I resolved nth-check vulnerability issue by using overrides in package.json:

   "overrides": {
       "nth-check": ">=2.0.2",
   },
   

   👍React with 👍2Reacted by Shubham soni and Vu Tong
6. HiickFG commented on Jan 7, 2025

   

   HiickFG

   on Jan 7, 2025

   More actions

   I made this PR: #13778

   It's focused on resolving the moderate/high vulnerabilities introduced by react-scripts for outdated dependencies that then point to outdated nth-check and postcss packages.