Skip to main content

最初のコードの脆弱性を見つけて修正する

デモ リポジトリの code scanning アラートを解決して、コードをセキュリティで保護する基本について説明します。

コーディングを学習している段階では、プロジェクトに誤って脆弱性を持ち込んでしまうことはよくあります。 作業を共有する前にこれらのセキュリティの問題に対処しないと、攻撃者がそれを利用してコードを操作し、機密データにアクセスする可能性があります。そのため、できるだけ早く特定してパッチを適用することが重要です。

幸いなことに、パブリック リポジトリの脆弱性を自動的に検出、説明、修正する code scanning などのツールがあります。 このチュートリアルでは、 code scanningを使用して作業をセキュリティで保護する方法について説明します。

デモ リポジトリの設定

セキュリティの脆弱性を持つデモ プロジェクトをフォークすることから始めましょう。 このプロジェクトは単純な Web ページを構築しますが、プロジェクトを配置しないため、この演習ではセキュリティ リスクはありません

  1.        [
           `new2code/code-scanning-demo`
           ](https://github.com/new2code/code-scanning-demo) リポジトリに移動します。
    
  2. ページの右上にある [ Fork] をクリックします。
  3. 表示されたページで、[Create fork] をクリックします。

コードの脆弱性を見つける

プロジェクトを設定したので、フォークの code scanning をオンにして、コードの脆弱性を確認してみましょう。

  1.        GitHubに戻り、リポジトリのホーム ページで [**<svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-shield" aria-label="shield" role="img"><path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg> Security and quality**] をクリックします。
    
  2.        Code scanningアラートの行で、**[code scanningを設定]** をクリックします。
    
  3. [ツール] セクションの [CodeQL 分析] の横にある [ 設定] を選択し、[ 既定] をクリックします。
  4. 表示されたポップアップで、[CodeQLを有効にする] をクリックします。 これにより、コードの脆弱性をスキャンする GitHub Actions ワークフローがトリガーされます。
  5. ワークフローの状態を確認するには、ナビゲーション バーの [ Actions] をクリックします。
  6. ワークフローが完了したら、ナビゲーション バーの [ Security and quality] をクリックします。
  7. ワークフローによって検出された code scanning アラートを表示するには、サイド ナビゲーションで [ Code scanning] をクリックし、[ Reflected cross-site scripting](反映されたクロスサイト スクリプティング) をクリックします。

          code scanning アラートについて

          code scanningコードの脆弱性が特定されたので、アラートで提供される情報を分解しましょう。

位置

アラートには、脆弱性を生み出すコード行を中心に、ファイルの小さなプレビューが表示されます。 この例では、脆弱性はサイト内でユーザー指定の入力を実装する index.js ファイルの 8 行目に検出されています。

詳しく見てみると、7 行目で、悪意のあるコードをチェックせずにユーザーによる入力に greet を割り当てるときに根本的な問題が発生していることがわかります。 コード内の脆弱性を段階的に表示するには、脆弱な行の下の吹き出しで [Show paths] をクリックします。

code scanning アラートの場所のスクリーンショット。 [Show paths] ボタンがオレンジ色で囲まれています。

説明と推奨事項

ファイル プレビューの下に、 code scanning 脆弱性の詳細な説明が表示されます。 推奨される修正プログラムと、脆弱なコードと修正されたコードの例を表示するには、[さらに表示] をクリック

code scanning アラートの詳細のスクリーンショット。 [Show more] というラベルのドロップダウンがオレンジ色で囲まれています。

ここでは、ユーザーによる入力を使う前にサニタイズすることをお勧めします。 つまり、入力に悪意のあるコードが含まれるかチェックし、必要に応じてクリーンする必要があります。

ヒント

推奨される修正プログラムを完全に理解していない場合は、Copilot Chatに説明を依頼してみてください。

タイムライン

最後に、ページの下部にアラートのタイムラインが表示されます。 タイムラインには脆弱性が最初に検出されたコミットが含まれており、脆弱性を修正すると自動的に更新されます。

code scanning アラートのタイムラインのスクリーンショット。

脆弱性を自動的に修正する

プロジェクトを迅速かつ簡単にセキュリティで保護するために、GitHub Copilot 自動修正にcode scanningを使用しましょう。

  1. アラート のタイトルの下のボックスに、"Copilot自動修正のCodeQLを使用してこのアラートの修復を高速化する" と表示されている場合は、[Generate fix] をクリックします。

  2. 修正候補 Copilot 生成された後、提案されている変更を記述し、変更のプレビューを表示し、追加された依存関係を呼び出します。 少し時間を取って、 Copilotの作品を読んでください。

  3. 修正を含む pull request を作成するには、[Commit to new branch] をクリックし、[Commit change] をクリックします。

  4. ドラフトの pull request が作成されたら、ページの下部にある [Ready for review] をクリックして、マージできるようにします。

  5. 修正を適用するには、[Merge pull request] をクリックして、[Confirm merge] をクリックします。

    pull request がマージされ、 code scanning ワークフローが再度実行されると、アラートは自動的に閉じられ、脆弱性を修正するコミットがタイムラインに追加されます。

メモ

実際のプロジェクトでは、コードにコミットする前に、 Copilot によって提案された変更を常に確認する必要があります。

次のステップ

デモ リポジトリで code scanning を試したので、 独自のプロジェクトで有効に して、現在および将来の脆弱性をすばやく見つけて修正します。

自分で記述したコードをセキュリティで保護したので、依存関係のセキュリティを調べて、コードのセキュリティ保護に向けた次のステップに進みます。 「初めての依存関係の脆弱性の検出と修正」を参照してください。