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

[sertechside]

Describe the bug

(Write your answer here.)
react-script inner dependency /embed module nth-check-1.0.2
https://nvd.nist.gov/vuln/detail/CVE-2021-3803

Did you try recovering your dependencies?

(Write your answer here.)

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

see above. kindly provide fixed in react-script update.

(paste the output of the command here.)

Steps to reproduce

(Write your steps here:)

Expected behavior

(Write what you thought would happen.)

Actual behavior

(Write what happened. Please add screenshots!)

Reproducible demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[Shubhamsoni9139]

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.

[HaiJunCai8]

Has this issue been resolved? I am currently facing the same problem.

[HeberLZGlobant]

Any updates on this?

[Dips-agrwl]

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

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

[HiickFG]

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.