How to fix npm audit vulnerabilities angular 12.0.3

Question

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]

Separative

Answer 1

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.

Tessin

I already tried this solution but it didn't fix any of the vulnerabilities. Moreover wouldn't that destroy the project again regarding dependencies? – Separative

Nope, its related to transitive dependency where the main dependencies trying to install older version of transitive dependency which intern vulnerable to attacks like cross site scripting(XSS) etc. So we need to inform angular like dont install older version of transitive dependency please install one which I have mentioned in resolutions: {} and lock it inside package-lock.json in preinstall phase. – Tessin

this solution worked for me after update to Angular 12 on an Ionic project, in package.json: "resolutions": { "glob-parent": "^5.1.2" } and adding the script as per imam suggesting – Cinchonine