Fix for vulnerability - "Critical Prototype Pollution in immer" Patched >=9.0.6 - reactjs

Here's a fix for the following vulnerability:
Critical Prototype Pollution in immer
Package immer
Patched in >=9.0.6
Dependency of react-scripts
Path react-scripts > react-dev-utils > immer
More info https://github.com/advisories/GHSA-33f9-j839-rf8h
Fix:
Install the patched version of immer, in this case 9.0.6, using the following command:
npm install --save immer#9.0.6
Update the package.json file with npm update.
IMPORTANT NOTE: if at this point the vulnerability is still present, you can do the following ONLY if you know this will not break your code or mess up dependencies for previous versions or other packages of your project. I'm the only person working on my project, so this fix works in my scenario.
In your package-lock.json file, find the outdated package, in my case:
"immer": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz",
"integrity": "sha512-aqXhGP7//Gui2+UrHtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaH9RZ1j1xlIYqaaaipBoqcqeibkc17PNvF=="
},
and straight-up delete it.
This fix seems not very sustainable for all packages/dependencies, but who knows? If there are better ways, let the community know.

Your fix should be good enough to patch that critical vulnerability, though as you've identified it tends to be fragile and easy to undo.
If possible, update to react-scripts#^5.0.0 or later. It has already upgraded transitively via react-dev-utils to immer#^9.0.7.
If for whatever reason (e.g. removed polyfills or otherwise) you cannot upgrade react-scripts, I'd suggest after reviewing immer's breaking changes:
npm-force-resolutions, add the following to package.json, then npm install:
"resolutions": {
"immer": "9.0.12"
},
"scripts": {
"preinstall": "npx npm-force-resolutions"
},
OR yarn resolutions add the following to package.json, then yarn install:
"resolutions": {
"immer": "9.0.12"
},
Of course, if someone else finds another vulnerability in immer in future, you'll need to repeat this with a later version.
P.S. Sorry for answering what I'm sure is a duplicate question, though no obvious one to link to jumps out at me right now.

Related

peer dependency issue in npm install

I am working on a personal site which uses create-react-app and noticed that after installing MUI, every time i npm install, i get peer dependency errors. I think it might have to do with different library versions i have, but im not really sure what the issue is. I think seeing my package might help someone else understand where the problem lies.
Screenshots of my errors in terminal and my package are here! Please help! :)
enter image description here
enter image description here
i've tried uninstalling mui (which it wont let me do because of other peer dependencies?), changing versions of react, deleting node modules and package lock files, but i keep getting the same 'unable to resolve dependency tree'
9:16
--force seems to work temporarily but it seems like its not the actual solution because i still cant install libraries 'naturally'
This is sometimes what I use when dealing with peer dependency problems.
install the version of the peer dependency I need locally to the package.json.
install this npm package: npm-force-resolutions
devDependencies: {
"npm-force-resolutions": "0.0.3" //I'm sure there is a more modern update by now!
}
Provide an additional item - "resolutions" - in the package.json pointing to that peer dependency.
package.json
{
"resolutions": {
"minimist": "1.2.5"
},
"dependencies": {
"minimist": "1.2.5",
}
}
And then add a script which runs after every time you install something new .
"scripts": {
"preinstallAfter": "node ./node_modules/npm-force-resolutions/index.js",
}
Then re-install
(Note: npm ci is better because it does not try to install minor variations of package files. It takes only what is explicitly declared in your package-lock.json file. That way its consistent if sharing on a repo between different operating systems. )
npm ci
Hope it helps

React.version stating older version than is in package.json

I am attempting to use the React devtools to produce a flamegraph profile of my app, but I was greeted with the message:
After checking my package.json version number, I saw it was set to "^16.4.1".
I performed an update to both the React and React-Dom versions: npm i --save react#16.5 && npm i --save react-dom#16.5, which updated both versions in the package json to "^16.5.2". I also cleared my node_modules and deleted the package.lock before doing an npm install once again.
However, when I run both my local instance of the app and push changes to my staging environment, it is outputting 16.14.0 as the version number that I have specified to log out in at the start of the App.jsx...
This is puzzling also as the logged out a version earlier than my package.json originally stated...
Is there somewhere that I am missing to update versions that could be causing this?
I have done a global search in my project for 16.14 to see if there is anything and it seems that some of my dependencies have mentioned this version, but I wouldn't think that it would be an issue?
package.lock
------------
"dependencies": {
...
"react": {
"version": "16.14.0",
...
},
...
"react-dom": {
"version": "16.14.0",
...
},
...
}
I don't understand what is going wrong here?

Can you clone a git repo and update all packages to latest version

I am writing a simple script to clone a project that is setup to use Vite w/all eslint and prettier config files already populated. I have looked on NPM site and googled but cant find a suitable answer. The repo has a package.json like so:
"dependencies": {
"vue": "^3.2.20"
},
"devDependencies": {
"#vitejs/plugin-vue": "^2.4",
"#vue/compiler-sfc": "^3.2.20",
"eslint": "^8.1.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-vue": "^7.20.0",
"prettier": "2.4.1",
"vite": "^2.6.4"
}
}
So my script does a clone
git clone https://github.com/mysite/vite-prototype.git %viteApp% && ECHO.
and then
CD %viteapp% && npm install
If I run this script 9 months from now I would like for the packages to all be the latest ones. Any ideas most welcome.
The answer depends on what you mean by "latest" ones. For example, your package.json contains "eslint": "^8.1.0". If you want to install the latest 8.x but not install 9.x or newer, then remove the node_modules directory along with any lock file or shrinkwrap file and then run npm install. On Unix-like operating systems, that would look like this:
rm -rf node_modules package-lock.json npm-shrinkwrap.json yarn.lock && npm install
If by latest ones you mean even ignoring semver major changes--so even if it is a breaking change going from (say) 8.x to 9.x or later--then first change the versions throughout your package.json to be *. So, for example, the ESLint entry would now be "eslint": "*". This is far more likely to result in incompatible dependencies breaking your app so be prepared to handle that. One limitation to this approach is that it will get you the version tagged latest on npm. If you want, say, the version tagged next or beta or whatever, you won't get those.

postcss 7.0.0 - 8.2.9 Severity: moderate Regular Expression Denial of Service

When creating a new project under create-react-app, you get warnings straight away regarding a vulnerability found in postcss.
Issue reported by npm: https://www.npmjs.com/advisories/1693
Related open issues can be found here:
https://github.com/postcss/postcss/issues/1574
https://github.com/facebook/create-react-app/issues/10945
The issue has been patched on postcss v8.2.10, but it's still present when creating new projects as react-scripts hasn't upgraded the dependency yet.
So, my problem here is I can no longer run builds as they fail due to the vulnerability.
Since I can't wait for them to get it patched before to keep working on my stuff (they seem to be aware of it since a year ago), is there some workaround that could be applied to solve it?
I tried adding a postcss resolution on package.json:
"resolutions": {
"postcss": "^8.2.10"
},
but that didn't land me far.
Any idea?
This article helped me.
https://www.npmjs.com/package/npm-force-resolutions.
To use resolutions you wrote you should force them by adding this script in package.json
"scripts": {
"preinstall": "npx npm-force-resolutions"
}
after that run npm install and it should overwrite all nested dependencies
Anyway it will not work due many dependencies. Good news is that support for postcss 8 is already merged and probably will be released soon https://github.com/facebook/create-react-app/issues/9664
Switching to Yarn makes this far simpler.
rm -rf ./node_modules
rm ./package-lock.json
edit your package.json :
add any other package versions to upgrade from npm / yarn audit here also
"resolutions":
{
"postcss": "^8.2.10"
},
yarn install then running yarn audit should yield the magic words:
0 vulnerabilities found - Packages audited: 999
✨ Done in 1.10s.
I managed to reduce the audit issues down to one moderate vulnerability due to the browserslist package in my post here:
https://stackoverflow.com/a/68046680/1669123
Updating postcss to version 8.x.x in resolutions results in build issues for me. I'm a web dev newcomer and guessing version 8 breaking changes for plugins is the culprit. Version 7.0.36 is the latest version 7 postcss that builds and runs for me. The changelog states that this version has the ReDoS fix backported from version 8. I can't seem to solve the browserslist package issue without it causing 'module not found' errors at runtime. I'm guessing we'll have to wait on the CRA team to update react-scripts for a more thorough solution.
Alternatively, you can solve it using yarn audit instead of npm.
yarn audit --groups postcss
This command will only ignore postcss package from the security check.

dependency tree error using create-react-app and storybook

TLDR:
how can I instruct storybook to use babel-loader v8.1.0 OR force react-scripts to use babel-loader v^8.2.2 ?
Details
I Develop a lib with ./example folder which is itself project created with create-react-app. I wanted to add storybook in addition to the normal example pages, so I installed storybook.
after installing storybook I can no longer start the example project with yarn start or the story book with yarn storybook.
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"babel-loader": "8.1.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:
D:\Eliav\projects\git projects\react-xarrows\examples\node_modules\babel-loader (version: 8.2.2)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
well I know what the issue but I don't know how to fix it:
I'm using react-scripts v4.0.3 which for unknown reason requiring exactly babel-loader v8.1.0. i can see this it in yarn.lock:
react-scripts#^4.0.1:
version "4.0.3"
...
dependencies:
...
babel-loader "8.1.0"
and storybook requiring babel-loader v8.2.2 or above:
"#storybook/builder-webpack4#6.2.9":
version "6.2.9"
...
dependencies:
...
babel-loader "^8.2.2"
already tried
what is written in the error above.
hoped that yarn upgrade would upgrade babel-loader from v8.1.0 to v8.2.2 but it does not work because react-scripts require exactly v8.1.0
a workaround that worked
Create a .env file in your project directory and include SKIP_PREFLIGHT_CHECK=true in the file.
but I want to avoid it. is it possible?
So for anyone to whom this is still unclear.
I used create-react-app to create a new app
I added storybook using npx sb init
then they clashed.
SOLUTION:
yarn add babel-loader#8.1.0
UPDATE:
The error you often see is that CRA (create-react-app) relies on specific dependencies (e.g. for webpack or babel).
What can also be done is you specify which versions those dependencies must resolve to, based on the error messages
This can be done using the resolutions field in package.json, e.g.:
"resolutions": {
"babel-loader": "8.1.0",
"webpack": "4.x.x",
}
After this all will work Fine.
2 Links to consider https://github.com/facebook/create-react-app/issues/10123
and https://github.com/storybookjs/storybook/issues/4764#issuecomment-740785850
Seems that most people are installing the package to get it to work even thou it says not to install in manually.
So try:
yarn add babel-loader#8.1.0

Resources