演習 - Node.js プロジェクトで依存関係の更新を管理する

完了

あなたは、Tailwind Traders 社から、いくつか古い依存関係があるアプリの作業を任されました。 このアプリは小さく、いくつかの依存関係が存在するだけです。 コードの更新は簡単です。 最新の機能を利用できるよう、アプリを更新できるか試してみましょう。 この実行中に脆弱性が見つかった場合は、それらを修正してください。

はじめに

  1. ターミナル ウィンドウ (Ctrl + Shift + `) で、この演習用のファイルがあるフォルダーに変更します。

    cd ../7-exercise-dependency-management
    
  2. 次のコマンドを実行して、依存関係をインストールします。

    npm install
    

    インストールされているパッケージと脆弱性に関する出力が表示されるはずです。

  3. package.json ファイルを開き、dependencies セクションを確認します。

    "lodash": "^1.1.0",
    "node-fetch": "^1.0.2"
    

    パターンによって挿入 (^) 文字が指定されていることに注意してください。これは、依存関係をサポートするマイナー バージョンへの更新を示しています: 1.x

  4. index.js ファイルを開いて、アプリ内でパッケージの依存関係がどのように使われているかを確認します。

    const fetch = require('node-fetch')
    const _ = require('lodash');
    const path = require('path');
    const fs = require('fs');
    
    async function run() {
      const response = await fetch("https://dev.to/api/articles?state=rising");
      const json = await response.json();
      const sorted = _.sortBy(json, ["public_reactions_count"], ['desc']);
      const top3 = _.take(sorted, 3);
    
      const filePrefix = new Date().toISOString().split('T')[0];
      fs.writeFileSync(path.join(__dirname, `${filePrefix}-feed.json`), JSON.stringify(top3, null, 2));
    }
    
    run();
    

    このコードで node-fetch パッケージを使って REST API からデータをプルします。 応答を並べ替えて処理し、lodash パッケージを使って上位 3 つの結果を取得します。 結果はファイルに格納されます。

npm audit

脆弱性があるかどうかを確認するには、次のコマンドを実行します。

npm audit

次の例のような出力が表示されます。

# npm audit report

lodash  <=4.17.20
Severity: critical
Regular Expression Denial of Service (ReDoS) in lodash - https://github.com/advisories/GHSA-x5rq-j2xg-h7qm
Prototype Pollution in lodash - https://github.com/advisories/GHSA-fvqr-27wr-82fm
Prototype Pollution in lodash - https://github.com/advisories/GHSA-jf85-cpcp-j695
Command Injection in lodash - https://github.com/advisories/GHSA-35jh-r3h4-6jhm
Prototype Pollution in lodash - https://github.com/advisories/GHSA-4xc9-xhrj-v574
Regular Expression Denial of Service (ReDoS) in lodash - https://github.com/advisories/GHSA-29mw-wpgm-hmr9
fix available via `npm audit fix --force`
Will install lodash@4.17.21, which is a breaking change
node_modules/lodash

node-fetch  <=2.6.6
Severity: high
The `size` option isn't honored after following a redirect in node-fetch - https://github.com/advisories/GHSA-w7rc-rwvf-8q5r
node-fetch forwards secure headers to untrusted sites - https://github.com/advisories/GHSA-r683-j2x4-v87g
fix available via `npm audit fix --force`
Will install node-fetch@3.3.2, which is a breaking change
node_modules/node-fetch

2 vulnerabilities (1 high, 1 critical)

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

出力には、脆弱性と、問題を修正するパッケージのバージョンが示されます。

Will install lodash@4.17.21, which is a breaking change
Will install node-fetch@3.3.2, which is a breaking change

npm outdated

ターミナルで、次のコマンドを実行して、古い依存関係がないかどうかを確認します。

npm outdated

次の例のような出力が表示されます。

Package     Current  Wanted   Latest  Location                 Depended by
lodash        1.3.1   1.3.1  4.17.21  node_modules/lodash      7-exercise-dependency-management
node-fetch    1.7.3   1.7.3    3.3.2  node_modules/node-fetch  7-exercise-dependency-management

現在のバージョンと必要なバージョンは同じですが、最新バージョンは異なります。 package.json で指定されたセマンティック更新戦略は満たしていますが、脆弱性は依然として存在します。

npm update

  1. package.json ファイルを編集して、より重要なパッケージから始まる脆弱性を修正する大きな変更を明示的に許可します。

    "node-fetch": "^2.6.6"
    
  2. 更新で行われる内容を確認するには、次のコマンドを実行します。

    npm update --dry-run
    
    added 3 packages, removed 4 packages, and changed 1 package in 508ms
    
  3. package.json に基づいてプロジェクトを更新するには、次のコマンドを実行します。

    npm update
    
  4. node-fetch の脆弱性が修正されたことを確認するには、次のコマンドを実行します。

    npm audit
    
    # npm audit report
    
    lodash  <=4.17.20
    Severity: critical
    Regular Expression Denial of Service (ReDoS) in lodash - https://github.com/advisories/GHSA-x5rq-j2xg-h7qm
    Prototype Pollution in lodash - https://github.com/advisories/GHSA-fvqr-27wr-82fm
    Prototype Pollution in lodash - https://github.com/advisories/GHSA-jf85-cpcp-j695
    Command Injection in lodash - https://github.com/advisories/GHSA-35jh-r3h4-6jhm
    Prototype Pollution in lodash - https://github.com/advisories/GHSA-4xc9-xhrj-v574
    Regular Expression Denial of Service (ReDoS) in lodash - https://github.com/advisories/GHSA-29mw-wpgm-hmr9
    fix available via `npm audit fix --force`
    Will install lodash@4.17.21, which is a breaking change
    node_modules/lodash
    
    1 critical severity vulnerability
    
    To address all issues (including breaking changes), run:
      npm audit fix --force
    
  5. プロジェクトにテストがある場合は、それらを実行して、更新によって破壊的変更が発生していないことを確認します。

  6. 同じ手順を使って、lo-dash を脆弱性のない 4.17.20 バージョンに更新します。

    脆弱性は修正されましたが、node-fetch バージョンはまだメジャー バージョンよりも遅れています。 すべてのテストに合格したら、package.json ファイルで指定されたバージョンを最新バージョンに修正します。

    "node-fetch": "^3.3.2"
    
  7. 次に、以下のコマンドを実行してプロジェクトを更新します。

    npm update
    

    これで、プロジェクトに npm の脆弱性はなくなり、最新のメジャー バージョンになるはずです。

  8. package.json および package-lock.json ファイルをチェックインします。

    お疲れさまでした。 依存関係を更新し、プロジェクトの脆弱性を修正しました。

開発コンテナーをクリーンアップする

プロジェクトの完了後、開発環境をクリーンアップするか、通常の状態に戻したい場合があります。

GitHub Codespaces 環境を削除すると、アカウントに対して取得するコアごとの無料時間エンタイトルメントの量を最大化できることが保証されます。

重要

GitHub アカウントのエンタイトルメントの詳細については、「 GitHub Codespaces に月単位で含まれるストレージとコア時間」を参照してください。

  1. GitHub Codespaces ダッシュボード (https://github.com/codespaces) にサインインします。

    状態とテンプレートを含む全ての実行中の codespace のスクリーンショット。

  2. codespace のコンテキスト メニューを開き、[削除] を選択します。

    削除オプションがハイライトされた 1 つの codespace のコンテキスト メニューのスクリーンショット。