Vue.jsで脆弱性のあるパッケージを調査したい
ここでは、Vue.jsのプロジェクトで使用しているパケージの脆弱性を調べて、解消するまでを解説します。
あわせて読みたい
【HTML・プログラミング独学】初心者でも独学したい！プログラミングが身につく厳選おすすめサイト
プログラミングは初心者だけど、独学で勉強してみたい！ プログラミングを全くしたことがない初心者でも独学で勉強できるおすすめサイトを厳選して紹介します！ 【初心...
目次
Vue.jsで脆弱性のあるパッケージの調査と対処方法
脆弱性のあるパッケージを確認する
yarn auditコマンドを実行して脆弱性のあるパッケージを確認します。
コマンドを実行すると以下のような脆弱性のあるパッケージの一覧が表示されます。
一覧が表示されたあと、最後にサマリーが表示されます。
今回は148件検出されました…
内訳は、Low（低）：4件、Moderate（中）：59件、High（高）：72件、Critical（緊急）：13件 でした。
$ yarn audit
yarn audit v1.22.5
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ high │ Regular expression denial of service in glob-parent │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ glob-parent │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in │ >=5.1.2 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ @vue/cli-service │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ @vue/cli-service > copy-webpack-plugin > glob-parent │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://www.npmjs.com/advisories/1067329 │
└───────────────┴──────────────────────────────────────────────────────────────┘
・・・（省略）
148 vulnerabilities found - Packages audited: 1213
Severity: 4 Low | 59 Moderate | 72 High | 13 Critical
Done in 2.02s.検出されたパッケージを更新して脆弱性を解消する
yarn upgradeコマンドで検出されたパッケージを更新します。
# 検出されたパッケージすべてを更新する
# package.jsonで定義されたバージョンの範囲で更新されます（package.json自体は更新されません）
$ yarn upgrade
# 検出されたパッケージすべてを最新バージョンに更新する
# package.jsonの定義を無視して最新バージョンに更新します（package.json自体も更新されます）
# メジャーバージョンが変わったりするので注意が必要です
$ yarn upgrade --latest
# 個別にパッケージとバージョンを指定して更新する
# package.jsonの定義を無視して更新します（package.json自体も更新されます）
# e.g.) yarn upgrade nth-check@2.0.2
$ yarn upgrade [パッケージ名]@[バージョン]
# 個別に最新パッケージに更新する
# package.jsonの定義を無視して最新バージョンに更新します（package.json自体も更新されます）
$ yarn upgrade [パッケージ名] --latest漏れがないか確認する
パッケージを更新し終わったら、再びyarn auditコマンドを実行して対応漏れがないかを確認します。
$ yarn audit
0 vulnerabilities found - Packages audited: 871脆弱性がゼロになりました！
yarn upgradeしてもyarn auditで検出される場合
脆弱性のあるパッケージの依存関係が依存ツリーの深い部分にある場合、yarn upgradeではバージョンを上げることができないケースがあります。
その場合は、package.jsonに「resolutions」フィールドを指定することでツリーの深い部分にあるパッケージバージョンを固定することができます。
"dependencies": {
・・・
},
"resolutions": {
"nth-check": "^2.0.1",
"glob-parent": "^5.1.2"
}package.jsonを保存したらyarn installを実行します。
その後、再びyarn auditでチェックします。
ここで何も検出されなければ完了となります。
お疲れ様でした！
あわせて読みたい
【HTML・プログラミング独学】初心者でも独学したい！プログラミングが身につく厳選おすすめサイト
プログラミングは初心者だけど、独学で勉強してみたい！ プログラミングを全くしたことがない初心者でも独学で勉強できるおすすめサイトを厳選して紹介します！ 【初心...
よく使うお役立ちコマンド
パッケージの確認時によく使うその他のコマンドを紹介します。
yarn info
パッケージのバージョンを確認する
$ yarn info [パッケージ名] versions
e.g.) yarn info nth-check versions
yarn info v1.22.5
[
'1.0.0',
'1.0.1',
'1.0.2',
'2.0.0',
'2.0.1',
'2.1.0',
'2.1.1'
]yarn list
インストール済みパッケージのバージョン一覧を表示（1階層まで）
$ yarn list --depth=0
yarn list v1.22.5
├─ @achrinza/node-ipc@9.2.2
├─ @ampproject/remapping@2.2.0
├─ @babel/code-frame@7.16.7
├─ @babel/compat-data@7.17.10
├─ @babel/core@7.18.2
・・・（省略）
yarn outdated
現在インストール済みパッケージの新しいバージョンが存在するか調べる。
Major・Minor・Patchによって色分けされて表示されます。
$ yarn outdated
yarn outdated v1.22.5
info Color legend :
"<red>" : Major Update backward-incompatible updates
"<yellow>" : Minor Update backward-compatible features
"<green>" : Patch Update backward-compatible bug fixes
Package Current Wanted Latest Package Type URL
@vue/cli-plugin-babel 4.3.1 4.3.1 5.0.4 devDependencies https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plugin-babel#readme
@vue/cli-plugin-eslint 4.3.1 4.3.1 5.0.4 devDependencies https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plugin-eslint#readme
@vue/cli-service 4.3.1 4.3.1 5.0.4 devDependencies https://cli.vuejs.org/
・・・（省略）