npm audit fails due to postcss

[duckness]

Version

5.0.0-beta.0

Environment info

Environment Info:

  System:
    OS: Windows 10 10.0.19042
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 15.6.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 7.11.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 90.0.4430.93
    Edge: Spartan (44.19041.964.0), Chromium (90.0.818.56)
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.2
    @vue/babel-plugin-jsx:  1.0.6
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  5.0.0-beta.0
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli-overlay:  5.0.0-beta.0
    @vue/cli-plugin-babel: ~5.0.0-beta.0 => 5.0.0-beta.0
    @vue/cli-plugin-eslint: ~5.0.0-beta.0 => 5.0.0-beta.0
    @vue/cli-plugin-router:  5.0.0-beta.0
    @vue/cli-plugin-vuex:  5.0.0-beta.0
    @vue/cli-service: ~5.0.0-beta.0 => 5.0.0-beta.0
    @vue/cli-shared-utils:  5.0.0-beta.0
    @vue/compiler-core:  3.0.11
    @vue/compiler-dom:  3.0.11
    @vue/compiler-sfc: ^3.0.4 => 3.0.11
    @vue/compiler-ssr:  3.0.11
    @vue/component-compiler-utils:  3.2.0
    @vue/reactivity:  3.0.11
    @vue/runtime-core:  3.0.11
    @vue/runtime-dom:  3.0.11
    @vue/shared:  3.0.11
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^7.2.0 => 7.9.0
    vue: ^3.0.4 => 3.0.11
    vue-eslint-parser:  7.6.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  16.2.0 (15.9.6)
    vue-style-loader:  4.1.3
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1. vue create something
2. npm audit complains:

# npm audit report

postcss  7.0.0 - 8.2.9
Severity: moderate
Regular Expression Denial of Service - https://npmjs.com/advisories/1693
fix available via `npm audit fix --force`
Will install @vue/[email protected], which is a breaking change
node_modules/@vue/component-compiler-utils/node_modules/postcss
  @vue/component-compiler-utils  >=2.4.0
  Depends on vulnerable versions of postcss
  node_modules/@vue/component-compiler-utils
    @vue/cli-service  >=3.4.0
    Depends on vulnerable versions of @vue/component-compiler-utils
    Depends on vulnerable versions of vue-loader-v15
    node_modules/@vue/cli-service
    vue-loader-v15
    Depends on vulnerable versions of @vue/component-compiler-utils
    node_modules/vue-loader-v15

4 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

What is expected?

npm audit does not return an error

What is actually happening?

npm audit returns an error

[JhansiLakkaraju1848]

I am also facing the similar issue. Auditing fails due to postcss.

Version: 4.5.13

Yarn Audit details:
moderate: Regular Expression Denial of Service
Package: postcss
Patched in: >=8.2.10
Dependency of: @vue/cli-service
Path: @vue/cli-service > css-loader > postcss-modules-scope > postcss

[dwwinters]

Has anyone tried just adding a resolution to their package.json file to fix this locally? According to the postcss documentation version 8 is backwards compatible.

[OwnageBanana]

@dwwinters That was my thought as well, if its compatible we could sub 8.2.x in. I'd love to try resolving with a short-term solution, but I'm not sure what you mean with adding a resolution and I couldn't find a suitable match in the NPM docs. Could you help me and point me at some docs so can help my self on this one?

[dwwinters]

@OwnageBanana I use Yarn v1 for a legacy project (otherwise I would be using npm) and it allows you to specify a resolution for dependencies. Looks like an equivalent capability has been proposed for npm in the form of overrides, but it doesn't appear to have landed yet.

[JhansiLakkaraju1848]

I added the resolution to the package.json and it works now

"postcss": ">=8.2.10",
"autoprefixer": "=10.2.5",
"cssnano": "=5.0.2"

I also had to add autoprefixer and cssnano to higher versions as the lower versions are not compatible with postcss version 8.2.10.

[haoqunjiang]

I'd recommend only running npm audit against production dependencies, i.e. npm audit --production.

Those warnings on devDependencies are mostly pointless.

As for this particular vulnerability, it does not affect most use cases.
Per the author of PostCSS:

it affects only use cases when:

User send you CSS
You compile this CSS on your servers
In this case, the user can generate special CSS which will take seconds or minutes to compile. An attacker can use it to DoS your servers.

If you can’t update PostCSS, you can add timeout for CSS processing.

postcss/postcss@8682b1e#commitcomment-49809613

[mashpie]

@sodatea sorry there might be a better place to discuss but still I can't leave without leaving a note on

I'd recommend only running npm audit against production dependencies, i.e. npm audit --production.

Following https://snyk.io/blog/ten-npm-security-best-practices/ (here: 10. "typosquatting attacks") and some well known examples mentioned there, I can't follow the advice at all. In fact, having a vulnerable devDep might even get worse, as this affects anyone's local machine with user privileges and thus any type of risk within a developers infrastructure if not well protected by 2fa, encrypted vaults etc.

The same applies to CI/CD-Pipelines which somehow grant access to deployment targets by definition while still installing devDeps to be able to actually commit a build.

I know the point in "It's not productive code" - but that doesn't mean dev vulnerabilities are not a risk. They are!