VSCode上でCodeWhispererとCopilotを両方使うと、捗る (AIが脆弱性診断→AIが解説)

Qiita Advent Calendar 2023 「Visual Studio Code」 24日目の記事です。
https://qiita.com/advent-calendar/2023/vscode

言いたいこと

VSCode上でAmazon CodeWhispererに脆弱性診断をさせてGitHub Copilot Chatにその解説をさせると、とても捗るよ。

(2024/05/01追記)
CodeWhispererがAmazon Qに吸収されたみたいです。
今から読む人は、CodeWhispererをAmazon Qに読み替えていただければと思います。

もう少し細かい説明

GitHub CopilotやAmazon CodeWhispererって何？

GitHub Copilotは、IDE上でAIがコーディングの補完をしてくれるGitHub提供のサービスです。
Amazon CodeWhispererは、IDE上でAIがコーディングの補完をしてくれるAWS提供のサービスです。

つまり競合しています。比較用に両方を使ったことがある人はいても、日常的に同時使用している人は少ないのではないでしょうか。
ですが、メイン機能であるコーディング補完は一旦おいておいて、CodeWhispererの脆弱性診断機能の結果をCopilot Chatに解説させるという使い方がかなり良いと気づいたので紹介します。

準備をする

CodeWhispererを使えるようにする

• AWS BuilderIDを持っていない場合は、作成してください。

https://profile.aws.amazon.com/

• VSCodeの拡張機能でAmazon Toolkitをインストールしてください。

https://marketplace.visualstudio.com/items?itemName=AmazonWebServices.aws-toolkit-vscode

• Amazon Toolkitに、BuilderIDにログインしてください。

GitHub Copilot Chatを使えるようにする

• GitHub Copilotに課金しましょう。

https://docs.github.com/ja/copilot/using-github-copilot/getting-started-with-github-copilot

• https://github.com/settings/copilotからGitHub Copilot Chatを有効化してください。

• VSCodeの拡張機能でGitHub Copilot Chatをインストールして、GitHubにログインしてください。

https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat

実際にやってみる。

準備ができたら、実際にやってみましょう。

脆弱なコードを用意する

サンプルにふさわしい脆弱なコードが手元になかったので、確実に脆弱性診断に引っかかるAPIを新規作成しました。(エラーにならないけど致命的に脆弱なコードを書くのは地味に苦戦しました。普段は書かないし、AIに頼んでも書いてくれない)

index.ts

import { fastify, FastifyRequest, FastifyReply } from "fastify";
import sqlite3 from "sqlite3";

const svr = fastify();
const db = new sqlite3.Database("db/my.db");

svr.post("/", async (req: FastifyRequest, res: FastifyReply) => {
  const text = req.body as string;
  // テキストをsqliteに保存
  db.run(`INSERT INTO posts (title) VALUES ("${text}")`);
  res.send({ success: true });
});

svr.listen({ port: 8000 })

Amazon CodeWhispererで脆弱性診断をする

最初に脆弱性診断をしたいコードをエディタで開いてください。CodeWhispererでは開いているコード + 依存関係のあるコードをスキャンしてくれます。
開いたら以下の手順で脆弱性診断を実行します。

1. 事前準備でAWS Toolkitの設定をしていれば、VS Codeに下部にCodeWhisperが存在しているはずなので、これを押下します。
2. メニューが表示されるので、Run Secutity Scanを選んでください。

3. 問題の一覧が表示され、問題箇所のコードが強調表示されます。

この状態でコードの該当箇所にカーソルを当てると詳細を開くことができますが、指摘が難解で分かりにくいです。英語ですし。

Copilot Chatに脆弱性診断結果を解説してもらう

分かりにくいのでCopilot Chatに説明してもらいましょう。
該当箇所にカーソルを当てると内容がポップアップされますので、クイックフィックスを選びます。

Copilotを使用して修正するとCopilotを使用して説明するが出てきます。修正したいのを一旦ガマンして説明するを選びます。(修正の場合は修正コードのみ提示されます。解説が無いので正しい修正か判断できません。結果誤った修正を適用してしまうことがありますので説明を推奨します。)

すると、Chatで脆弱性の説明とコードの修正案を提示してくれます。

すごい！

誤診に対してはCopilotが問題ないと言ってくれる

この方法のとても便利な点として、脆弱性診断結果が実際には放置しても問題ない場合はCopilotが問題ないと言ってくれる点にあります。
具体的には以下のキャプチャを御覧ください。Pythonのコードに対して脆弱性診断をした結果OSコマンドインジェクションの指摘がされています。しかしColilotに解説をお願いすると、問題ないと教えてくれます。

実際に脆弱性診断をやって困るのは、指摘されたけど本当に直さないといけないのか分からないケースかと思います。Copilotに聞くと、問題ないときは問題ないとはっきり答えてくれるので非常に助かります。

ということで、AIによる脆弱性診断と別なAIとのChatの組合せがとても便利だよという話でした。

ちょっと思うこと。

両方使うと捗ると書きましたが、これって凄いのはCopilot Chatの方ですよね。

従来の脆弱性診断は専門用語が多いので「直せ」と言われても良く分からないことが多いです。CodeWhispererは生成AIが修正方針を提示してくれるみたいな謳い文句が付いていますが、正直あまり提示してくれないです。また脆弱性の説明は付いていますがコードを絡めた解説が無いので修正には繋がりません。開発者がエディタ上で気軽に実行できる点は良いですが、中身は従来の脆弱性診断と大差ないと思います。

先日、Amazon QというCopilot Chatに対抗できるサービスも登場したことですし、今回紹介した内容と同等のことをAWSだけで完結して欲しいと期待します。

余談

この便利さに気づいたのは、VSCodeにDuetAIを導入してみた記念(?)にCopilotとCodeWhisperとDuetAIを同時に使ったら誰が勝つのだろうと思って遊んでいたのがきっかけです。ありがとうGoogle!!