アプリ開発ナレッジ

アプリ開発のナレッジを掲載します

Create-React-Appでfound 24 vulnerabilities (8 moderate, 15 high, 1 critical) run `npm audit fix` to fix them, or `npm audit` for detailsの警告が出る対処法

Windows環境でnodeを使うといろいろなところで支障が出るとネットの記事に書いていましたが、例にもれずそのあおりを受けました

環境

  • Windows 10
  • nvm --version 1.1.7
  • node --version v14.18.0
  • npm --version 6.14.15

事象

npx craate-react-app [アプリ名]
のコマンドを打つと、実行はされるが、以下のような警告が発生
気持ち悪いので、どうにかしたい

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

found 24 vulnerabilities (8 moderate, 15 high, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

対処

この場合、

npm audit fix

のコマンドでうまくいくケースがおおいらしいが、自分の環境ではうまくいかず、手動でどうにかしないといけない模様

[参考]
npm audit fixでは解決できなかった脆弱性の修正

npm audit

を実行。24個の修正対象パッケージが表示される。以下抜粋

                       === npm audit security report ===


                                 Manual Review
             Some vulnerabilities require your attention to resolve

          Visit https://go.npm.me/audit-guide for additional guidance


  Moderate         Inefficient Regular Expression Complexity in
                  chalk/ansi-regex

  Package         ansi-regex

  Patched in      >=5.0.1

  Dependency of   react-scripts

  Path            react-scripts > webpack-dev-server > yargs > cliui >
                  string-width > strip-ansi > ansi-regex

  More info       https://github.com/advisories/GHSA-93q8-gq69-wqmw

...他多数

  Critical        Prototype Pollution in immer

  Package         immer

  Patched in      >=9.0.6

  Dependency of   react-scripts

  Path            react-scripts > react-dev-utils > immer

  More info       https://github.com/advisories/GHSA-33f9-j839-rf8h


  High            Uncontrolled Resource Consumption in ansi-html

  Package         ansi-html

  Patched in      No patch available

  Dependency of   react-scripts

  Path            react-scripts > @pmmmwh/react-refresh-webpack-plugin >
                  ansi-html

  More info       https://github.com/advisories/GHSA-whgm-jr23-g3j9

....他多数

found 24 vulnerabilities (8 moderate, 15 high, 1 critical) in 1956 scanned packages
  24 vulnerabilities require manual review. See the full report for details.

ここでcriticalになってるimmerを調べる

npm ls immer

すると、依存関係がわかる

project_name@0.1.0 C:\Users\[MyUser]\Documents\Development\ReactTutorial\tutorial
`-- react-scripts@4.0.3
  `-- react-dev-utils@11.0.4
    `-- immer@8.0.1

これはpackage.jsonには記述されていない箇所なので、この依存関係を修正していく
package-lock.jsonの方を修正する(lockの方ね)
immerで検索してヒットした箇所のバージョンを変更する

[修正前]

"immer": "8.0.1",

[修正後]

"immer": "9.0.6",

node-modulesを削除して、

npm install 

を実行

これをエラーがなくなるまで警告が出ているパッケージに繰り返す
パッチがないものもあり、最後まで警告解消できないものもある
気持ち悪いが仕方ない....

npm install 実行後、npm audit実行

                       === npm audit security report ===


                                 Manual Review
             Some vulnerabilities require your attention to resolve

          Visit https://go.npm.me/audit-guide for additional guidance


  High            Uncontrolled Resource Consumption in ansi-html

  Package         ansi-html

  Patched in      No patch available

  Dependency of   react-scripts

  Path            react-scripts > @pmmmwh/react-refresh-webpack-plugin >
                  ansi-html

  More info       https://github.com/advisories/GHSA-whgm-jr23-g3j9


  High            Uncontrolled Resource Consumption in ansi-html

  Package         ansi-html

  Patched in      No patch available

  Dependency of   react-scripts

  Path            react-scripts > webpack-dev-server > ansi-html

  More info       https://github.com/advisories/GHSA-whgm-jr23-g3j9

found 2 high severity vulnerabilities in 1941 scanned packages
  2 vulnerabilities require manual review. See the full report for details.


しかしながら、この状態でまた何らかのパッケージをインストール(npm install redux)すると、package-lockがもとに戻ってまたエラーが出てしまった
本番環境に挙げるときにこの作業するか、Linux環境作ってそこで実行する方がいいのかもと思った......


修正したpackage-lock.jsonは一応どこかに保管して差し替えて使おうと思う(自分の場合はuser直下のprojectsフォルダ直下に格納)
次にCreate-React-Appした際にこのlockファイルにさしえることで今回の手間を削減できるはず