package-lock.jsonの脆弱性に対応する

GitHubにコードをpushしたところ、以下のように脆弱性を検知されたので対応方法を個人用にまとめておきます。

package-lock.jsonとは？

npm install を行うとpackage.jsonに記載された依存関係に基づきnode_modulesツリーが生成され、node_modulesディレクトリ下にパッケージ群がインストールされます。

この際、基本的にはpackage.jsonは理論上、「いつでもまったく同じnode_modulesツリーを生成」しますが、様々な理由でそのようにはならない場合もあるため、このような問題を防ぐためにnpmではpackage-lock.jsonを使用するようになっています。

package-lock.jsonが存在する場合、以降のインストールではpackage.jsonから再度依存関係を計算しなおすのではなく、package-lock.jsonの中身を見てnode_modulesをインストールを行います。

package-lock.jsonが変更されるタイミング

package.jsonが存在し、package-lock.jsonが存在しない場合に npm install 、npm updateを実行すると自動生成されます。

package-lock.jsonは直接編集するものではなく、前述のコマンドを実行することで自動的に生成されるものなので、今回はpackage.jsonを修正して生成していきます。

対応手順

npm-check-updatesをインストール

更新可能なパッケージを確認し、一括してpackage.jsonの依存パッケージの記述を変更するために、「npm-check-updates」をインストール。

$ npm install -g npm-check-updates

更新可能なパッケージの確認と更新

以下のコマンドで更新可能なパッケージを確認。

$ ncu
Checking /Users/kazono/workspace/git/test-repo/package.json
[====================] 15/15 100%

 @fortawesome/fontawesome-free   5.9.0  →  5.10.2
 del                             4.1.1  →   5.1.0
 gulp-autoprefixer              ^6.1.0  →  ^7.0.0
 gulp-header                     2.0.7  →   2.0.9

Run ncu -u to upgrade package.json

確認し、更新内容に問題がない場合は以下のコマンドでpackage.jsonを更新。

ncu -u
Upgrading /Users/kazono/workspace/git/test-repo/package.json
[====================] 15/15 100%

 @fortawesome/fontawesome-free   5.9.0  →  5.10.2
 del                             4.1.1  →   5.1.0
 gulp-autoprefixer              ^6.1.0  →  ^7.0.0
 gulp-header                     2.0.7  →   2.0.9

Run npm install to install new versions.

package-lock.jsonの再生成

package.jsonの更新が完了したので、package-lock.jsonを生成して終わり。

$ rm package-lock.json
$ npm update