14

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:

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?

ale917k
  • 1,494
  • 7
  • 18
  • 37
  • 1
    I'm having the same issue. Doing a npm audit fix --force downgrades react-scripts resolving theses vulnerabilities but introducing yet more moderate and high vulnerabilities. – EmanuelGF May 12 '21 at 11:26

4 Answers4

14

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

Gîrbu Nicolae
  • 268
  • 2
  • 8
  • By deleting the `node_modules` and `package-lock.json` and following your suggestion, I managed to get it working with no vulnerabilities - only problem in forcing this resolution is you get an error when running `npm audit fix` due to the package tree being invalid - I guess we'll have to wait the patch, but at least this does temporarily, so thank you! – ale917k May 12 '21 at 13:17
  • 4
    Alternatively, you can use `yarn` which works with the `resolutions` in the `package.json` – Ru Chern Chong May 15 '21 at 17:16
2

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.
lys
  • 949
  • 2
  • 9
  • 33
0

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.

Darren Evans
  • 665
  • 10
  • 17
-1

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.

Nayan shah
  • 543
  • 3
  • 8