Angular new project vulnerabilities

Question

I've updated angular cli and created a new project, with routing and scss.

When I run npm install i see:


41 vulnerabilities (4 low, 37 moderate)

To address issues that do not require attention, run:
  npm audit fix

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

I used the first command npm audit fix and it showed me this:

up to date, audited 985 packages in 5s

90 packages are looking for funding
  run `npm fund` for details

# npm audit report

node-forge  <1.0.0
Prototype Pollution in node-forge debug API. - https://github.com/advisories/GHSA-5rrq-pxf6-6jx5
fix available via `npm audit fix --force`
Will install @angular-devkit/build-angular@0.1101.2, which is a breaking change
node_modules/node-forge
  selfsigned  >=1.1.1
  Depends on vulnerable versions of node-forge
  node_modules/selfsigned
    webpack-dev-server  >=2.5.0
    Depends on vulnerable versions of selfsigned
    node_modules/webpack-dev-server
      @angular-devkit/build-angular  *
      Depends on vulnerable versions of @angular-devkit/build-webpack
      Depends on vulnerable versions of postcss-preset-env
      Depends on vulnerable versions of resolve-url-loader
      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

postcss  <8.2.13
Severity: moderate
Regular Expression Denial of Service in postcss - https://github.com/advisories/GHSA-566m-qj78-rww5
fix available via `npm audit fix --force`
Will install @angular-devkit/build-angular@0.1101.2, which is a breaking change
node_modules/autoprefixer/node_modules/postcss
node_modules/css-blank-pseudo/node_modules/postcss
node_modules/css-has-pseudo/node_modules/postcss
node_modules/css-prefers-color-scheme/node_modules/postcss
node_modules/postcss-attribute-case-insensitive/node_modules/postcss
node_modules/postcss-color-functional-notation/node_modules/postcss
node_modules/postcss-color-gray/node_modules/postcss
node_modules/postcss-color-hex-alpha/node_modules/postcss
node_modules/postcss-color-mod-function/node_modules/postcss
node_modules/postcss-color-rebeccapurple/node_modules/postcss
node_modules/postcss-custom-media/node_modules/postcss
node_modules/postcss-custom-properties/node_modules/postcss
node_modules/postcss-custom-selectors/node_modules/postcss
node_modules/postcss-dir-pseudo-class/node_modules/postcss
node_modules/postcss-double-position-gradients/node_modules/postcss
node_modules/postcss-env-function/node_modules/postcss
node_modules/postcss-focus-visible/node_modules/postcss
node_modules/postcss-focus-within/node_modules/postcss
node_modules/postcss-font-variant/node_modules/postcss
node_modules/postcss-gap-properties/node_modules/postcss
node_modules/postcss-image-set-function/node_modules/postcss
node_modules/postcss-initial/node_modules/postcss
node_modules/postcss-lab-function/node_modules/postcss
node_modules/postcss-logical/node_modules/postcss
node_modules/postcss-media-minmax/node_modules/postcss
node_modules/postcss-nesting/node_modules/postcss
node_modules/postcss-overflow-shorthand/node_modules/postcss
node_modules/postcss-page-break/node_modules/postcss
node_modules/postcss-place/node_modules/postcss
node_modules/postcss-preset-env/node_modules/postcss
node_modules/postcss-pseudo-class-any-link/node_modules/postcss
node_modules/postcss-replace-overflow-wrap/node_modules/postcss
node_modules/postcss-selector-matches/node_modules/postcss
node_modules/postcss-selector-not/node_modules/postcss
node_modules/resolve-url-loader/node_modules/postcss
  autoprefixer  1.0.20131222 - 9.8.8
  Depends on vulnerable versions of postcss
  node_modules/autoprefixer
    postcss-preset-env  <=7.0.0
    Depends on vulnerable versions of autoprefixer
    Depends on vulnerable versions of css-blank-pseudo
    Depends on vulnerable versions of css-prefers-color-scheme
    Depends on vulnerable versions of postcss
    Depends on vulnerable versions of postcss-color-gray
    Depends on vulnerable versions of postcss-color-mod-function
    Depends on vulnerable versions of postcss-double-position-gradients
    Depends on vulnerable versions of postcss-focus-visible
    Depends on vulnerable versions of postcss-focus-within
    Depends on vulnerable versions of postcss-initial
    Depends on vulnerable versions of postcss-page-break
    node_modules/postcss-preset-env
      @angular-devkit/build-angular  *
      Depends on vulnerable versions of @angular-devkit/build-webpack
      Depends on vulnerable versions of postcss-preset-env
      Depends on vulnerable versions of resolve-url-loader
      Depends on vulnerable versions of webpack-dev-server
      node_modules/@angular-devkit/build-angular
  css-blank-pseudo  <=1.0.0
  Depends on vulnerable versions of postcss
  node_modules/css-blank-pseudo
  css-has-pseudo  <=1.0.0
  Depends on vulnerable versions of postcss
  node_modules/css-has-pseudo
  css-prefers-color-scheme  <=4.0.0
  Depends on vulnerable versions of postcss
  node_modules/css-prefers-color-scheme
  postcss-attribute-case-insensitive  <=4.0.2
  Depends on vulnerable versions of postcss
  node_modules/postcss-attribute-case-insensitive
  postcss-color-functional-notation  <=3.0.2
  Depends on vulnerable versions of postcss
  node_modules/postcss-color-functional-notation
  postcss-color-gray  >=3.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-color-gray
  postcss-color-hex-alpha  1.3.0 - 6.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-color-hex-alpha
  postcss-color-mod-function  *
  Depends on vulnerable versions of postcss
  node_modules/postcss-color-mod-function
  postcss-color-rebeccapurple  1.2.0 - 6.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-color-rebeccapurple
  postcss-custom-media  4.0.0 - 7.0.8
  Depends on vulnerable versions of postcss
  node_modules/postcss-custom-media
  postcss-custom-properties  3.3.0 - 10.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-custom-properties
  postcss-custom-selectors  2.3.0 - 5.1.2
  Depends on vulnerable versions of postcss
  node_modules/postcss-custom-selectors
  postcss-dir-pseudo-class  <=5.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-dir-pseudo-class
  postcss-double-position-gradients  <=2.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-double-position-gradients
  postcss-env-function  <=3.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-env-function
  postcss-focus-visible  <=5.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-focus-visible
  postcss-focus-within  <=4.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-focus-within
  postcss-font-variant  1.2.0 - 4.0.1
  Depends on vulnerable versions of postcss
  node_modules/postcss-font-variant
  postcss-gap-properties  <=2.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-gap-properties
  postcss-image-set-function  <=3.0.1
  Depends on vulnerable versions of postcss
  node_modules/postcss-image-set-function
  postcss-initial  <=3.0.4
  Depends on vulnerable versions of postcss
  node_modules/postcss-initial
  postcss-lab-function  <=3.1.2
  Depends on vulnerable versions of postcss
  node_modules/postcss-lab-function
  postcss-logical  <=4.0.2
  Depends on vulnerable versions of postcss
  node_modules/postcss-logical
  postcss-media-minmax  1.2.0 - 4.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-media-minmax
  postcss-nesting  <=7.0.1
  Depends on vulnerable versions of postcss
  node_modules/postcss-nesting
  postcss-overflow-shorthand  <=2.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-overflow-shorthand
  postcss-page-break  <=2.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-page-break
  postcss-place  <=5.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-place
  postcss-pseudo-class-any-link  <=6.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-pseudo-class-any-link
  postcss-replace-overflow-wrap  <=3.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-replace-overflow-wrap
  postcss-selector-matches  *
  Depends on vulnerable versions of postcss
  node_modules/postcss-selector-matches
  postcss-selector-not  <=4.0.1
  Depends on vulnerable versions of postcss
  node_modules/postcss-selector-not
  resolve-url-loader  0.0.1-experiment-postcss || 3.0.0-alpha.1 - 4.0.0
  Depends on vulnerable versions of postcss
  node_modules/resolve-url-loader

After that i launched npm audit fix --force

And now i have


25 vulnerabilities (3 low, 15 moderate, 7 high)

To address issues that do not require attention, run:
  npm audit fix

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

Run `npm audit` for details.

And i also can't start the project

An unhandled exception occurred: require() of ES Module /Users/gboutte/Documents/my-project/node_modules/@angular/compiler-cli/bundles/index.js from /Users/gboutte/Documents/my-project/node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js not supported.
Instead change the require of index.js in /Users/gboutte/Documents/my-project/node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js to a dynamic import() which is available in all CommonJS modules.
See "/private/var/folders/yq/67x6zpfj695czhn4sqrwvxp40000gn/T/ng-h8zNpR/angular-errors.log" for further details.

Should i ignore theses error or is there a way to fix it ? I saw the mention of postcss in the vulnerabilities, should i use something else than scss ?

score 3 · Accepted Answer · answered Jan 10 '22 at 16:25

Agreed with Will Alexander that we should probably just put up with these vulnerabilities for now and upgrade to a new Angular 13.x.x that patches them. On the plus side, these look like low-risk vulnerabilities for how most people use Angular (caveat: these are my best-guess; others please chime in if I'm missing something):

node-forge looks like it's used to create self-signed SSL certificates for the local development server (usualy localhost:4200) when you run ng serve.
postcss is used by build tools to parse and modify CSS (adding vendor prefixes, etc.) Not sure, but I think it's still used by Angular even if you're using CSS rather than SCSS.

So both of these are only being used in development and not deployed with a production build (where Prototype Pollution and RegEx DoS would be significant risks).

Also, the automated npm audit fix --force will probably cause more problems than it solves if you're using the current version of Angular (v13). It rolls back @angular-devkit/build-angular from 13.1.2 (for Angular v13) to 0.1101.2 (v11-lts, Long-Term Support for Angular v11). That mismatch between v11 build tools and v13 code is probably what's causing your unhandled exception when you try to run.

tl;dr: Develop in Angular without the npm audit fix (in this case!) since these vulnerabilities won't get deployed to production. Update to a newer Angular v13.x.x will hopefully clean up npm audit in the near future.

score 2 · Answer 2 · answered Jan 10 '22 at 11:25

2

I'm afraid you just have to put up with the vulnerabilities. Angular has a very strict set of dependencies, and in changing the versions of those dependencies you've broken your app.

Make sure you keep updating your Angular project as often as is feasible, as the Angular team regularly update Angular's dependencies to mitigate these issues.

answered Jan 10 '22 at 11:25

Will Alexander

3,425
1
10
17

Ok, so i can assume that the angular team is aware of this and will update the dependencies ? i just have to wait in that case – Gregory Boutte Jan 10 '22 at 11:27
Pretty much yeah :) – Will Alexander Jan 10 '22 at 11:29

Angular new project vulnerabilities

2 Answers2