I can not install my npm project due to dependency errors. Node-sass and react-scripts both say high vulnerabilities.
Here is my npm audit report.
How can I solve it?
nth-check <2.0.1
Severity: high
Inefficient Regular Expression Complexity in nth-check - https://github.com/advisories/GHSA-rp65-9cf3-cjxr
fix available via `npm audit fix --force`
Will install react-scripts#2.1.3, which is a breaking change
node_modules/svgo/node_modules/nth-check
css-select <=3.1.0
Depends on vulnerable versions of nth-check
node_modules/svgo/node_modules/css-select
svgo 1.0.0 - 1.3.2
Depends on vulnerable versions of css-select
node_modules/svgo
#svgr/plugin-svgo <=5.5.0
Depends on vulnerable versions of svgo
node_modules/#svgr/plugin-svgo
#svgr/webpack 4.0.0 - 5.5.0
Depends on vulnerable versions of #svgr/plugin-svgo
node_modules/#svgr/webpack
react-scripts >=2.1.4
Depends on vulnerable versions of #svgr/webpack
node_modules/react-scripts
scss-tokenizer *
Severity: high
Regular expression denial of service in scss-tokenizer - https://github.com/advisories/GHSA-7mwh-4pqv-wmr8
fix available via `npm audit fix --force`
Will install node-sass#4.5.3, which is a breaking change
node_modules/scss-tokenizer
sass-graph >=2.2.0
Depends on vulnerable versions of scss-tokenizer
node_modules/sass-graph
node-sass >=4.6.0
Depends on vulnerable versions of sass-graph
node_modules/node-sass
terser 5.0.0 - 5.14.1
Severity: high
As explained here, if you are using node >= 16 you can install last version of #svgr/webpack
npm i -D #svgr/webpack
In which case you have to add a line in your package.json
"overrides": {
"#svgr/webpack": "$#svgr/webpack"
}
Remove node_modules folder and package-lock.json then perform a new npm install.
You could also only upgrade the 'nth-check' library in a similar fashion.
The library "node-sass" is deprecated so you may use another library, or identify and upgrade the failing component in a similar way as above.
I have tried the suggestion that #Zitoun provided. However, if your application has required input fields with a focus function when submitting with empty fields using react-hook-form, the suggestion will break your app - .focus is not a function. Please check your form before using the suggestion in your production!
Related
i tried to install 'npm install --global expo-cli' and i get this error. svgo#1.3.2 this svgo is no longer supported. upgrade to v2.x.x, uuid#3.4.0 please upgrade to version 7 or higher, chokidar#2.1.8: chokidar 2 does not receive security update since 2019. i run npm audit fix --force, it said recommended protection disable and 7 packages are looking for funding
These are warns regarding libraries you are downloading from the web, don't be concerned by them, you cannot fix those issues. Just ignore it and start using expo. Everything is installed fine. Same errors appear when installing plain React project from the official source, you just need to ignore those warnings.
I want to deploy my app But there are 3 vulnerabilities I didn't understand how to slove them. i used npm audit fix also I sloved some vulnerabilities with manual updating them.so this is th manual review someone help me :
Manual Review
Some vulnerabilities require your attention to resolve
Visit https://go.npm.me/audit-guide for additional guidance
Moderate Regular Expression Denial of Service
Package browserslist
Patched in >=4.16.5
Dependency of react-scripts
Path react-scripts > react-dev-utils > browserslist
More info https://npmjs.com/advisories/1747
Moderate Regular expression denial of service
Package glob-parent
Patched in >=5.1.2
Dependency of react-scripts
Path react-scripts > webpack > watchpack > watchpack-chokidar2 >
chokidar > glob-parent
More info https://npmjs.com/advisories/1751
Moderate Regular expression denial of service
Package glob-parent
Patched in >=5.1.2
Dependency of react-scripts
Path react-scripts > webpack-dev-server > chokidar > glob-parent
More info https://npmjs.com/advisories/1751
found 3 moderate severity vulnerabilities in 2195 scanned packages
3 vulnerabilities require manual review. See the full report for details.
The answer here gives a good explanation.
Normally, you would try these solutions, in order:
npm audit fix (it sounds like you have already done this)
npm audit fix --force
npm i react-scripts (the parent package of the package with the vuln)
npm i browserslist#4.16.5 glob-parent#5.1.2 (the vuln packages themselves)
However, we can see that (at the time I'm writing this) the issue is not resolved in react-dev-utils' package.json. Additionally, the package.json uses an exact version (no caret). These two facts mean that none of these solutions listed above will work.
You have two options:
clone the create-react-app repo, fix the versions yourself and use your cloned version instead of the real one
wait for create-react-app to fix it, at which point one of the solutions above should work
I would strongly suggest the latter approach.
Maybe this article written by #DanAbramov will be interesting for you https://overreacted.io/npm-audit-broken-by-design/
Context
In my react-native application, I am getting a high severity vulnerability regarding a package called css-what. In which it apparently is resulting in 4 other vulnerabilities because they directly or indirectly depend on css-what. Here's the following output I get on the console from after executing npm audit
css-what <5.0.1
Severity: high
Denial of Service - https://npmjs.com/advisories/1754
fix available via `npm audit fix --force`
Will install react-native-svg#9.12.0, which is a breaking change
node_modules/css-what
css-select <=3.1.2
Depends on vulnerable versions of css-what
node_modules/css-select
react-native-svg >=9.13.0
Depends on vulnerable versions of css-select
node_modules/react-native-svg
#ui-kitten/components >=5.0.0-alpha.1
Depends on vulnerable versions of react-native-svg
node_modules/#ui-kitten/components
#ui-kitten/eva-icons >=5.0.0-alpha.1
Depends on vulnerable versions of react-native-svg
node_modules/#ui-kitten/eva-icons
So as you can see from the output, the css-what causes a vulnerability for the package react-native-svg and because the design system I installed ui-kitten depends on react-native-svg it subsequently has a vulnerability.
I looked up on the css-what package and the vulnerability in which can be seen here. I know that the vulnerability has a high severity because it can result in denial of service.
What I tried
I made a duplicate of my project because I know running npm audit fix --force would result in breaking changes in which it did when I ran that command on the duplicate project. The app was able to build but it threw an error when running on the simulator.
(Note that I am developing from a bare react-native project).
The instructions that the documentation gave was to update css-what to 5.0.1 but I have no idea on how to go about doing that. Hence I hope someone is able to help me on this.
I have tried above approach for my angular project, but its considering css-what as a diff dependency instead of dependency inside package #angular-devkit/build-angular.
12.1.0-next.6
| `-- css-minimizer-webpack-plugin#3.0.1
| `-- cssnano#5.0.6
| `-- cssnano-preset-default#5.1.3
| `-- postcss-svgo#5.0.2
| `-- svgo#2.3.0
| `-- css-select#3.1.2
| `-- css-what#4.0.0
`-- css-what#5.0.1 ```
tried, see in above. its taking separate css-what thats should not be the case.
still the issue exists.
I had the same problem, so I do the following:
I checked online the latest version of css, which has no vulnerabilities, and installed it as --save.
npm install css-what#5.0.1
then install npm-force-resolutions:
npx npm-force-resolutions
add to my package.json:
"resolution": {"css-what": "^ 5.0.1"}
and then install dependencies as usual:
npm install
if you receive the following error:
npm ERR! Invalid Version: ^5.0.1
then just erase the ^ in the package.json and retry npm-force-resolution and install.
I was having the same problem updating css-what npm update css-what worked for me
css-what in its version prior to 5.1.0 has DOS attack vulnerability. You can find that in your package-lock.json that this is a transitive dependency coming from css-select.
You need to first install the non-vulnerable version of your dependency , so in this case
npm install --save css-what#5.0.1
Once that is done you need to add resolution strategy in your package.json. So , just add below key at the end of your package.json
"resolutions": { "css-what": "^5.0.1" }
After this just run npm install and run npm audit to see if your fix is working. You can cross check your package-lock.json to verify the new entry.
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.
A while ago, I have encountered a npm vulnerability called "Missing Origin Validation".
The message was following:
High Missing Origin Validation
Package webpack-dev-server
Dependency of react-scripts
Path react-scripts > webpack-dev-server
More info https://nodesecurity.io/advisories/725
When I follow NPM's instruction and fixed it by run npm install react-scripts#2.1.1. It was fine.
Recently, on my other branch(Lets call it branch test) I installed webpack for some purpose. Even though the webpack was technically only installed in my test branch, when I switch to my master branch, this happened:
The react-scripts package provided by Create React App requires a dependency:
"webpack": "4.19.1"
Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:
C:\Users\pzheng\my-app\node_modules\webpack (version: 4.25.1)
I dont see webpack installed in my master branch's package.json. However, I still followed the NPM's instruction: deleted my package-lock.json and node_modules then I ran npm install
It fixed,but then the Missing Origin Validation vulnerability appears again. I am running into a cycle at this point. In the future the test branch will be merged. Then I need to pick a version. However, either version will cause an error.
Any help is appreciated.