how to fix postcss vulnerability in reactjs - node.js

Suddenly i got around 79 moderate vulnerabilities related to postcss package.
One of them is :
Moderate Regular Expression Denial of Service
Package postcss
Patched in >=8.2.10
Dependency of react-scripts
Path react-scripts > resolve-url-loader > postcss
More info https://npmjs.com/advisories/1693
I tired running npm audit fix but these require manual review.
Does anyone know how to fix these?

You could wait for react-scripts to update their dependencies or as an alternative use "resolutions" in your package.json to overrule the version:
"resolutions": {
"postcss": "^8.2.10"
}

Related

How to resolve gulp/glob-parent vulnerabilities?

I have been getting vulnerabilities in internal dependency glob-parent package of npm package - gulp.
High glob-parent before 5.1.2 vulnerable to Regular Expression
Denial of Service in enclosure regex
Package glob-parent
Patched in >=5.1.2
Dependency of gulp [dev]
Path gulp > glob-watcher > chokidar > glob-parent
I have gone through other questions as well regarding the same topic but I am unsure that those ways will keep the application working as it is now as I have seen different versions of glob-parent in package-lock.json.
Those suggested to use overrides property in package.json for glob-parent or add glob-parent to resolutions section.
Also, it has been found that this is a false positive vulnerability which is only reported in case of NPM not Yarn.
Due to some reasons, I will have to use NPM only.
Please suggest a way to get rid of these vulnerabilities where it should not affect the application.

6 high severity vulnerabilities in react-icons 4.4.0

# npm audit report
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
6 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
I am using npm 8.12.1 and node 16.15.1.
reacts icons just released its 4.4.0 which I tried to install and end up in this message. I tried npm audit fix --force. Vulnerability and seviourity remains same. I would like to have your opinion on this message.
So if react-icons is not safe which package is an alternative for icons?
Had a similar issue. This helped me understand.
https://github.com/facebook/create-react-app/issues/11174
Edit:
npm audit is broken for front-end tooling by design
More reading here: https://overreacted.io/npm-audit-broken-by-design/
Create React App is a build tool. In other words, it doesn't produce a running Node application. It runs at the build time during development, and produces static assets.
However, npm audit is designed for Node apps so it flags issues that can occur when you run actual Node code in production. That is categorically not how Create React App works.
This means that the overwhelming amount of "vulnerability" reports we receive for transitive dependencies are false positives. Despite literally a hundred issues with thousands of comments about npm audit warnings in react-scripts, throughout the years not a single one of them (to the best of our knowledge) has ever been a real vulnerability for CRA users.
If you'd like to still fix the warnings:
Open package.json. You will find this:
"dependencies": { "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3" }
Take react-scripts and move it to devDependencies (if you don't have it, create it):
"dependencies": { "react": "^17.0.2", "react-dom": "^17.0.2" }, "devDependencies": { "react-scripts": "4.0.3" },
Then, ensure you run npm audit --production rather than npm audit.
This will fix your warnings.
Not all vulnerabilities are the same. I have this exact same error and further research showed me it is common and - in my case - it can be ignored (using npm view nth-check version shows I have a later version than the error suggests, and I do not believe the vulnerability presents a security concern)
Also do not use npm audit fix --force blindly. For example, in my case it would force a downgrade of nth-check and react-scripts versions, which would introduce vulnerabilities that might be worse.
Further research on this showed me it's pretty normal/common to not have 0 vulnerabilities? And each one needs to be weighed on the merit of what you are building so is likely a personal research decision.

Understanding and handling Angular npm audit fixes and dependencies

I need some help understanding and properly correcting the vulnerabilities I see when I run an npm audit (or just npm install) on my Angular project. I just updated from Angular v12 to v13 and there were several vulnerabilities listed. Note, I already ran an 'npm install' and an 'npm update' but still get these audit warnings. The problem is, I don't understand which vulnerabilities I can fix by updating a package, without causing issues with Angular. I started investigating this and noticed that my angular dependencies don't even list the older version being called out by the npm audit, so apparently I don't even understand that.
Further below are 6 examples of audit warnings from over 20 that appear for the postcss package when I run 'npm audit' in my workspace. However, in my package-lock.json file, "#angular-devkit/build-angular" has a "requires" list that includes:
"postcss": "8.4.4",
"postcss-import": "14.0.2",
"postcss-loader": "6.2.1",
"postcss-preset-env": "6.7.0",
I have so many questions... first off, postcss is listed as 8.4.4 so I don't understand why I would have a version previous to 8.2.13 installed, per the audit warning. But, the audit warning says "Path #angular-devkit/build-angular > postcss-preset-env > autoprefixer > postcss"... so does this mean that postcss-preset-env is a different package that's using an older version of the postcss package as it's own dependency? More importantly, does this indicate that the older version (6.7.0 in this case) is required and if I update this or run the audit fix, that I'm not fulfilling the dependency here? After all, there's no caret (^6.7.0) so it seems to be indicating a specific version. I just can't tell what I can or should do here. I resolved other 'high' vulnerabilities that were not related to angular, but what do I do about these ones? Can I fix them without breaking my app? What command would actually update postcss-preset-env? Should I just ignore these as warnings the Angular team has already reviewed and gone ahead with, in their release?
Moderate Regular Expression Denial of Service in postcss
Package postcss
Patched in >=8.2.13
Dependency of #angular-devkit/build-angular [dev]
Path #angular-devkit/build-angular > postcss-preset-env >
autoprefixer > postcss
More info https://github.com/advisories/GHSA-566m-qj78-rww5
Moderate Regular Expression Denial of Service in postcss
Package postcss
Patched in >=8.2.13
Dependency of #angular-devkit/build-angular [dev]
Path #angular-devkit/build-angular > postcss-preset-env >
css-blank-pseudo > postcss
More info https://github.com/advisories/GHSA-566m-qj78-rww5
Moderate Regular Expression Denial of Service in postcss
Package postcss
Patched in >=8.2.13
Dependency of #angular-devkit/build-angular [dev]
Path #angular-devkit/build-angular > postcss-preset-env >
css-has-pseudo > postcss
More info https://github.com/advisories/GHSA-566m-qj78-rww5
Moderate Regular Expression Denial of Service in postcss
Package postcss
Patched in >=8.2.13
Dependency of #angular-devkit/build-angular [dev]
Path #angular-devkit/build-angular > postcss-preset-env >
css-prefers-color-scheme > postcss
More info https://github.com/advisories/GHSA-566m-qj78-rww5
Moderate Regular Expression Denial of Service in postcss
Package postcss
Patched in >=8.2.13
Dependency of #angular-devkit/build-angular [dev]
Path #angular-devkit/build-angular > postcss-preset-env > postcss
More info https://github.com/advisories/GHSA-566m-qj78-rww5
Moderate Regular Expression Denial of Service in postcss
Package postcss
Patched in >=8.2.13
Dependency of #angular-devkit/build-angular [dev]
Path #angular-devkit/build-angular > postcss-preset-env >
postcss-attribute-case-insensitive > postcss
More info https://github.com/advisories/GHSA-566m-qj78-rww5

What exactly do I do about gulp 4.0.2 dependency vulnerabilities?

In my package.json I have listed gulp as one of my dependencies.
{
"name": "myproject",
"devDependencies": {
"gulp": "^4.0.2"
// other stuff
}
}
When I run npm i I get a message there are moderate security vulnerabilities. So I do npm audit and I get this
=== npm audit security report ===
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 glob-parent
Patched in >=5.1.2
Dependency of gulp [dev]
Path gulp > glob-watcher > 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 gulp [dev]
Path gulp > vinyl-fs > glob-stream > glob-parent
More info https://npmjs.com/advisories/1751
found 2 moderate severity vulnerabilities in 751 scanned packages
2 vulnerabilities require manual review. See the full report for details.
So then I thought it was all a matter of changing the version of gulp to the highest version where it is (probably) patched. But it seems that this is already the highest version, so what do I do about the vulnerability?
If anyone is curious how I actually "solved" this issue, I started using yarn for all my projects. To me it seems superior to npm.
The following commands will take care of you:
Install yarn
Remove npm's "package-lock" to not mix project package managers
Run yarn
Enjoy
Commands:
npm i --global yarn
rm -rf package-lock.json
yarn

moderate severity vulnerabilities with angular

I am developing a web application with Angular but I have a problem installing json server. Please help me correct this problem.
Depends on vulnerable versions of browserslist
node_modules/react-dev-utils
react-scripts >=0.10.0-alpha.328cb32e
Depends on vulnerable versions of #pmmmwh/react-refresh-webpack-plugin
Depends on vulnerable versions of react-dev-utils
Depends on vulnerable versions of webpack-dev-server
node_modules/react-scripts
glob-parent <5.1.2
Severity: moderate
Regular expression denial of service - https://npmjs.com/advisories/1751
fix available via npm audit fix --force
Will install react-scripts#1.1.5, which is a breaking change
node_modules/react-scripts/node_modules/glob-parent
node_modules/watchpack-chokidar2/node_modules/glob-parent
node_modules/webpack-dev-server/node_modules/glob-parent
chokidar 1.0.0-rc1 - 2.1.8
Depends on vulnerable versions of glob-parent
node_modules/react-scripts/node_modules/webpack-dev-server/node_modules/chokidar
node_modules/watchpack-chokidar2/node_modules/chokidar
node_modules/webpack-dev-server/node_modules/chokidar
watchpack-chokidar2 *
Depends on vulnerable versions of chokidar
node_modules/watchpack-chokidar2
watchpack 1.7.2 - 1.7.5
Depends on vulnerable versions of watchpack-chokidar2
node_modules/react-scripts/node_modules/watchpack
webpack 4.44.0 - 4.46.0
Depends on vulnerable versions of watchpack
node_modules/react-scripts/node_modules/webpack
webpack-dev-server 2.0.0-beta - 3.11.2
Depends on vulnerable versions of chokidar
node_modules/react-scripts/node_modules/webpack-dev-server
node_modules/webpack-dev-server
#angular-devkit/build-angular *
Depends on vulnerable versions of #angular-devkit/build-webpack
Depends on vulnerable versions of webpack-dev-server
node_modules/#angular-devkit/build-angular
#angular-devkit/build-webpack *
Depends on vulnerable versions of webpack-dev-server
node_modules/#angular-devkit/build-webpack
#pmmmwh/react-refresh-webpack-plugin 0.3.1 - 0.5.0-beta.4
Depends on vulnerable versions of webpack-dev-server
node_modules/react-scripts/node_modules/#pmmmwh/react-refresh-webpack-plugin
react-scripts >=0.10.0-alpha.328cb32e
Depends on vulnerable versions of #pmmmwh/react-refresh-webpack-plugin
Depends on vulnerable versions of react-dev-utils
Depends on vulnerable versions of webpack-dev-server
node_modules/react-scripts
12 moderate severity vulnerabilities
To address issues that do not require attention, run:
npm audit fix
To address all issues possible (including breaking changes), run:
npm audit fix --force
Some issues need review, and may require choosing
a different dependency.
enter image description here
enter image description here
It's just a warning to let you know that there is some known vulnerabilities on the packages you using in your project.
vulnerabilities can be missbehavior, bugs, crashes, security vulnerabilities, etc...
npm keep tracks of known vulnerabilities of all the npm packages.
So basiacally you have to wait updates on your package to fix the vulnerability, you can also try to use a different version of the package, or use a different package.
Duplicate of : how to solve this npm glob-parent problem
Answer: ​https://stackoverflow.com/a/68342168/158649
As it is a dev dependency, not a big deal,
npm update glob-parent#5.1.2 --depth 4
has no effect on the npm audit message.
npm audit warnings can be a little bit boy-crying-wolf sometimes.
npm install glob-parent#5.1.2 --save-dev
does remove the warning but not really much to worry about.

Resources