DEVHIDE
Login Or Sign up

How to fix npm audit vulnerabilities angular 12.0.3

7.8k Views Asked by At

After i create a new Angular 12.0.3 project, npm audit immediately detects 8 high and 40 moderate vulnerabilities.

# npm audit report

css-what  <5.0.1
Severity: high
Denial of Service - https://npmjs.com/advisories/1754
fix available via `npm audit fix --force`
Will install @angular-devkit/[email protected], 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
    svgo  >=1.0.0
    Depends on vulnerable versions of css-select
    node_modules/svgo
      postcss-svgo  >=4.0.0-nightly.2020.1.9
      Depends on vulnerable versions of svgo
      node_modules/postcss-svgo
        cssnano-preset-default  *
        Depends on vulnerable versions of postcss-svgo
        node_modules/cssnano-preset-default
          cssnano  >=4.0.0-nightly.2020.1.9
          Depends on vulnerable versions of cssnano-preset-default
          node_modules/cssnano
            css-minimizer-webpack-plugin  *
            Depends on vulnerable versions of cssnano
            node_modules/css-minimizer-webpack-plugin
              @angular-devkit/build-angular  *
              Depends on vulnerable versions of @angular-devkit/build-webpack
              Depends on vulnerable versions of css-minimizer-webpack-plugin
              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

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 @angular-devkit/[email protected], which is a breaking change
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/webpack-dev-server/node_modules/chokidar
    webpack-dev-server  2.0.0-beta - 3.11.2
    Depends on vulnerable versions of chokidar
    node_modules/webpack-dev-server
      @angular-devkit/build-angular  *
      Depends on vulnerable versions of @angular-devkit/build-webpack
      Depends on vulnerable versions of css-minimizer-webpack-plugin
      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  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 @angular-devkit/[email protected], 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  9.0.0 - 9.8.6
  Depends on vulnerable versions of postcss
  node_modules/autoprefixer
  css-blank-pseudo  *
  Depends on vulnerable versions of postcss
  node_modules/css-blank-pseudo
  css-has-pseudo  *
  Depends on vulnerable versions of postcss
  node_modules/css-has-pseudo
    postcss-preset-env  >=6.0.0
    Depends on vulnerable versions of css-has-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-double-position-gradients
    node_modules/postcss-preset-env
      @angular-devkit/build-angular  *
      Depends on vulnerable versions of @angular-devkit/build-webpack
      Depends on vulnerable versions of css-minimizer-webpack-plugin
      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-prefers-color-scheme  *
  Depends on vulnerable versions of postcss
  node_modules/css-prefers-color-scheme
  postcss-attribute-case-insensitive  4.0.0 - 4.0.2
  Depends on vulnerable versions of postcss
  node_modules/postcss-attribute-case-insensitive
  postcss-color-functional-notation  >=2.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-color-functional-notation
  postcss-color-gray  >=5.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-color-gray
  postcss-color-hex-alpha  4.0.0 - 6.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-color-hex-alpha
  postcss-color-mod-function  >=3.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-color-mod-function
  postcss-color-rebeccapurple  >=4.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-color-rebeccapurple
  postcss-custom-media  7.0.0 - 7.0.8
  Depends on vulnerable versions of postcss
  node_modules/postcss-custom-media
  postcss-custom-properties  8.0.0 - 10.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-custom-properties
  postcss-custom-selectors  5.0.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  *
  Depends on vulnerable versions of postcss
  node_modules/postcss-double-position-gradients
  postcss-env-function  >=2.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-env-function
  postcss-focus-visible  >=4.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-focus-visible
  postcss-focus-within  >=3.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-focus-within
  postcss-font-variant  4.0.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.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-image-set-function
  postcss-initial  3.0.0 - 3.0.4
  Depends on vulnerable versions of postcss
  node_modules/postcss-initial
  postcss-lab-function  >=2.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-lab-function
  postcss-logical  >=2.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-logical
  postcss-media-minmax  4.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-media-minmax
  postcss-nesting  7.0.0 - 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  >=4.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  >=4.0.0
  Depends on vulnerable versions of postcss
  node_modules/postcss-selector-matches
  postcss-selector-not  4.0.0 - 4.0.1
  Depends on vulnerable versions of postcss
  node_modules/postcss-selector-not
  resolve-url-loader  3.0.0-alpha.1 - 4.0.0
  Depends on vulnerable versions of postcss
  node_modules/resolve-url-loader

48 vulnerabilities (40 moderate, 8 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

When trying to fix the problems with npm audit fix nothing changes. npm audit fix --force reduces the vulnerabilities to 9 moderate and 7 high ones but when i try to run the project, following error is displayed, because of a version mismatch:

Schema validation failed with the following errors:
  Data path "" must NOT have additional properties(inlineStyleLanguage).

I already tried fixing the vulnerabilities by following the solution described in this answer, but that broke the project.

Furthermore i created a project with v11-lts of the angular-cli but the same problems accured with different vulnerabilities:

# npm audit report

css-what  <5.0.1
Severity: high
Denial of Service - https://npmjs.com/advisories/1754
fix available via `npm audit fix --force`
Will install @angular-devkit/[email protected], 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
    svgo  >=1.0.0
    Depends on vulnerable versions of css-select
    node_modules/svgo
      postcss-svgo  >=4.0.0-nightly.2020.1.9
      Depends on vulnerable versions of svgo
      node_modules/postcss-svgo
        cssnano-preset-default  *
        Depends on vulnerable versions of postcss-svgo
        node_modules/cssnano-preset-default
          cssnano  >=4.0.0-nightly.2020.1.9
          Depends on vulnerable versions of cssnano-preset-default
          node_modules/cssnano
            @angular-devkit/build-angular  *
            Depends on vulnerable versions of @angular-devkit/build-webpack
            Depends on vulnerable versions of cssnano
            Depends on vulnerable versions of resolve-url-loader
            Depends on vulnerable versions of webpack
            Depends on vulnerable versions of webpack-dev-server
            node_modules/@angular-devkit/build-angular

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 @angular-devkit/[email protected], which is a breaking change
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/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/watchpack
        webpack  4.44.0 - 4.46.0
        Depends on vulnerable versions of watchpack
        node_modules/webpack
          @angular-devkit/build-angular  *
          Depends on vulnerable versions of @angular-devkit/build-webpack
          Depends on vulnerable versions of cssnano
          Depends on vulnerable versions of resolve-url-loader
          Depends on vulnerable versions of webpack
          Depends on vulnerable versions of webpack-dev-server
          node_modules/@angular-devkit/build-angular
    webpack-dev-server  2.0.0-beta - 3.11.2
    Depends on vulnerable versions of chokidar
    node_modules/webpack-dev-server
      @angular-devkit/build-webpack  *
      Depends on vulnerable versions of webpack-dev-server
      node_modules/@angular-devkit/build-webpack

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 @angular-devkit/[email protected], which is a breaking change
node_modules/resolve-url-loader/node_modules/postcss
  resolve-url-loader  3.0.0-alpha.1 - 4.0.0
  Depends on vulnerable versions of postcss
  node_modules/resolve-url-loader
    @angular-devkit/build-angular  *
    Depends on vulnerable versions of @angular-devkit/build-webpack
    Depends on vulnerable versions of cssnano
    Depends on vulnerable versions of resolve-url-loader
    Depends on vulnerable versions of webpack
    Depends on vulnerable versions of webpack-dev-server
    node_modules/@angular-devkit/build-angular

16 vulnerabilities (9 moderate, 7 high)

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

Is there a way, to fix all vulnerabilities?

After updating the @angular-devkit/build-angular package via npm install @angular-devkit/build-angular@latest, like imam hulagur described in his answer, the vulnerabilities were reduced to 2 (1 moderate, 1 high). Afterwards i tried to run npm audit and following output helped to fix one further vulnerability

                       === npm audit security report ===                        

# Run  npm update svgo --depth 6  to resolve 1 vulnerability

  High            Denial of Service                                             

  Package         css-what                                                      

  Dependency of   @angular-devkit/build-angular [dev]                           

  Path            @angular-devkit/build-angular > css-minimizer-webpack-plugin  
                  > cssnano > cssnano-preset-default > postcss-svgo > svgo >    
                  css-select > css-what                                         

  More info       https://npmjs.com/advisories/1754

So now there is only one vulnarability left:

                       === 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   @angular-devkit/build-angular [dev]                           

  Path            @angular-devkit/build-angular > webpack-dev-server >          
                  chokidar > glob-parent                                        

  More info       https://npmjs.com/advisories/1751

Path and Version of the Package:

+-- @angular-devkit/[email protected]
| +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]  deduped
| | `-- [email protected]
| `-- [email protected]
|   `-- [email protected]
|     `-- [email protected]
`-- @angular/[email protected]
  `-- [email protected]
    `-- [email protected]
angular npm npm-audit angular12
Original Q&A
1

There are 1 best solutions below

3
On

First add a field resolutions with the dependency version you want to fix to your package.json, for example:

"resolutions": {
  "css-what": "5.0.1"
}

Then add npm-force-resolutions to the preinstall script so that it patches the package-lock file before every npm install you run:

"scripts": {
  "preinstall": "npx npm-force-resolutions"
}

Now just run npm install as you would normally do:

npm install

I hope this will help you to resolve that issue.

Related Questions in ANGULAR

Related Questions in NPM

Related Questions in NPM-AUDIT

Related Questions in ANGULAR12

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Popular Questions

Copyright © 2021 Jogjafile Inc.