{"meta":{"title":"最初のコードの脆弱性を見つけて修正する","intro":"デモ リポジトリの code scanning アラートを解決して、コードをセキュリティで保護する基本について説明します。","product":"概要","breadcrumbs":[{"href":"/ja/get-started","title":"概要"},{"href":"/ja/get-started/learning-to-code","title":"コードの学習"},{"href":"/ja/get-started/learning-to-code/finding-and-fixing-your-first-code-vulnerability","title":"コードをセキュリティで保護する"}],"documentType":"article"},"body":"# 最初のコードの脆弱性を見つけて修正する\n\nデモ リポジトリの code scanning アラートを解決して、コードをセキュリティで保護する基本について説明します。\n\nコーディングを学習している段階では、プロジェクトに誤って脆弱性を持ち込んでしまうことはよくあります。 作業を共有する前にこれらのセキュリティの問題に対処しないと、攻撃者がそれを利用してコードを操作し、機密データにアクセスする可能性があります。そのため、できるだけ早く特定してパッチを適用することが重要です。\n\n幸いなことに、パブリック リポジトリの脆弱性を自動的に検出、説明、修正する code scanning などのツールがあります。 このチュートリアルでは、 code scanningを使用して作業をセキュリティで保護する方法について説明します。\n\n## デモ リポジトリの設定\n\nセキュリティの脆弱性を持つデモ プロジェクトをフォークすることから始めましょう。 このプロジェクトは単純な Web ページを構築しますが、プロジェクトを配置しないため、この演習では**セキュリティ リスクはありません**。\n\n1. [\n   `new2code/code-scanning-demo`\n   ](https://github.com/new2code/code-scanning-demo) リポジトリに移動します。\n2. ページの右上にある \\[ <svg version=\"1.1\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" class=\"octicon octicon-repo-forked\" aria-label=\"repo forked icon\" role=\"img\"><path d=\"M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z\"></path></svg>**Fork**] をクリックします。\n3. 表示されたページで、**\\[Create fork]** をクリックします。\n\n## コードの脆弱性を見つける\n\nプロジェクトを設定したので、フォークの code scanning をオンにして、コードの脆弱性を確認してみましょう。\n\n1. 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**] をクリックします。\n2. Code scanningアラートの行で、**\\[code scanningを設定]** をクリックします。\n3. \\[ツール] セクションの \\[CodeQL 分析] の横にある \\[ **設定**] を選択し、\\[ **既定**] をクリックします。\n4. 表示されたポップアップで、\\[**CodeQLを有効にする**] をクリックします。 これにより、コードの脆弱性をスキャンする GitHub Actions ワークフローがトリガーされます。\n5. ワークフローの状態を確認するには、ナビゲーション バーの \\[ <svg version=\"1.1\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" class=\"octicon octicon-play\" aria-label=\"play icon\" role=\"img\"><path d=\"M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z\"></path></svg>**Actions**] をクリックします。\n6. ワークフローが完了したら、ナビゲーション バーの \\[ **<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**] をクリックします。\n7. ワークフローによって検出された code scanning アラートを表示するには、サイド ナビゲーションで \\[ <svg version=\"1.1\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" class=\"octicon octicon-codescan\" aria-label=\"codescan icon\" role=\"img\"><path d=\"M8.47 4.97a.75.75 0 0 0 0 1.06L9.94 7.5 8.47 8.97a.75.75 0 1 0 1.06 1.06l2-2a.75.75 0 0 0 0-1.06l-2-2a.75.75 0 0 0-1.06 0ZM6.53 6.03a.75.75 0 0 0-1.06-1.06l-2 2a.75.75 0 0 0 0 1.06l2 2a.75.75 0 1 0 1.06-1.06L5.06 7.5l1.47-1.47Z\"></path><path d=\"M12.246 13.307a7.501 7.501 0 1 1 1.06-1.06l2.474 2.473a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM1.5 7.5a6.002 6.002 0 0 0 3.608 5.504 6.002 6.002 0 0 0 6.486-1.117.748.748 0 0 1 .292-.293A6 6 0 1 0 1.5 7.5Z\"></path></svg>**Code scanning**] をクリックし、\\[ **Reflected cross-site scripting]\\(反映されたクロスサイト スクリプティング**) をクリックします。\n\n## code scanning アラートについて\n\ncode scanningコードの脆弱性が特定されたので、アラートで提供される情報を分解しましょう。\n\n### 位置\n\nアラートには、脆弱性を生み出すコード行を中心に、ファイルの小さなプレビューが表示されます。 この例では、脆弱性はサイト内でユーザー指定の入力を実装する `index.js` ファイルの 8 行目に検出されています。\n\n詳しく見てみると、7 行目で、悪意のあるコードをチェックせずにユーザーによる入力に `greet` を割り当てるときに根本的な問題が発生していることがわかります。 コード内の脆弱性を段階的に表示するには、脆弱な行の下の吹き出しで **\\[Show paths]** をクリックします。\n\n![code scanning アラートの場所のスクリーンショット。 \\[Show paths\\] ボタンがオレンジ色で囲まれています。](/assets/images/help/repository/code-scanning-alert-location-learners.png)\n\n### 説明と推奨事項\n\nファイル プレビューの下に、 code scanning 脆弱性の詳細な説明が表示されます。 推奨される修正プログラムと、脆弱なコードと修正されたコードの例を表示するには、\\[**さらに表示**] をクリック<svg version=\"1.1\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" class=\"octicon octicon-chevron-down\" aria-label=\"chevron down icon\" role=\"img\"><path d=\"M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z\"></path></svg>。\n\n![code scanning アラートの詳細のスクリーンショット。 \\[Show more\\] というラベルのドロップダウンがオレンジ色で囲まれています。](/assets/images/help/repository/code-scanning-alert-details-learners.png)\n\nここでは、ユーザーによる入力を使う前にサニタイズすることをお勧めします。 つまり、入力に悪意のあるコードが含まれるかチェックし、必要に応じてクリーンする必要があります。\n\n> \\[!TIP] 推奨される修正プログラムを完全に理解していない場合は、[Copilot Chat](https://github.com/copilot)に説明を依頼してみてください。\n\n### タイムライン\n\n最後に、ページの下部にアラートのタイムラインが表示されます。 タイムラインには脆弱性が最初に検出されたコミットが含まれており、脆弱性を修正すると自動的に更新されます。\n\n![code scanning アラートのタイムラインのスクリーンショット。](/assets/images/help/repository/code-scanning-alert-timeline-learners.png)\n\n## 脆弱性を自動的に修正する\n\nプロジェクトを迅速かつ簡単にセキュリティで保護するために、GitHub Copilot Autofixにcode scanningを使用しましょう。\n\n1. アラート のタイトルの下のボックスに、\"Copilot AutofixのCodeQLを使用してこのアラートの修復を高速化する\" と表示されている場合は、\\[<svg version=\"1.1\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" class=\"octicon octicon-shield-check\" aria-label=\"shield check icon\" role=\"img\"><path d=\"m8.533.133 5.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.667l5.25-1.68a1.748 1.748 0 0 1 1.066 0Zm-.61 1.429.001.001-5.25 1.68a.251.251 0 0 0-.174.237V7c0 1.36.275 2.666 1.057 3.859.784 1.194 2.121 2.342 4.366 3.298a.196.196 0 0 0 .154 0c2.245-.957 3.582-2.103 4.366-3.297C13.225 9.666 13.5 8.358 13.5 7V3.48a.25.25 0 0 0-.174-.238l-5.25-1.68a.25.25 0 0 0-.153 0ZM11.28 6.28l-3.5 3.5a.75.75 0 0 1-1.06 0l-1.5-1.5a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l.97.97 2.97-2.97a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z\"></path></svg>**Generate fix**] をクリックします。\n2. 修正候補 Copilot 生成された後、提案されている変更を記述し、変更のプレビューを表示し、追加された依存関係を呼び出します。 少し時間を取って、 Copilotの作品を読んでください。\n3. 修正を含む pull request を作成するには、**\\[Commit to new branch]** をクリックし、**\\[Commit change]** をクリックします。\n4. ドラフトの pull request が作成されたら、ページの下部にある **\\[Ready for review]** をクリックして、マージできるようにします。\n5. 修正を適用するには、**\\[Merge pull request]** をクリックして、**\\[Confirm merge]** をクリックします。\n\n   pull request がマージされ、 code scanning ワークフローが再度実行されると、アラートは自動的に閉じられ、脆弱性を修正するコミットがタイムラインに追加されます。\n\n> \\[!NOTE] 実際のプロジェクトでは、コードにコミットする前に、 Copilot によって提案された変更を常に確認する必要があります。\n\n## 次のステップ\n\nデモ リポジトリで code scanning を試したので、 **独自のプロジェクトで有効に** して、現在および将来の脆弱性をすばやく見つけて修正します。\n\n自分で記述したコードをセキュリティで保護したので、**依存関係**のセキュリティを調べて、コードのセキュリティ保護に向けた次のステップに進みます。 「[初めての依存関係の脆弱性の検出と修正](/ja/get-started/learning-to-code/finding-and-fixing-your-first-dependency-vulnerability)」を参照してください。"}