MITMプロキシの背後にGitHub Copilotを配置して学んだこと

MITMプロキシの背後にGitHub Copilotを配置しました。わかったことはこれです。 Copilotのネットワークトラフィック、ハーネス、メモリ、そしてコンテキストがどのように製品になるかの内部を覗いてみましょう。 Rafael 2026年8月4日 31 シェア こんにちは、Rafaelです。毎週、AIシステムを構築するエンジニアの視点から、最近遭遇した興味深い課題や開発について取り上げています。 毎週の号を受け取るには購読してください 👇 購読する 過去数年間、AI搭載アプリやAI機能が数多く登場しました。Slackのような既存のプレイヤーは、迅速にAI機能をそのラインナップに追加しました。Cursor、Notion、ChatGPT Desktop、Claude DesktopのようなAIネイティブなアプリでは、AIは常にその存在理由の一部でした。これらのアプリがリリースするAI機能が増えるにつれて、私はそれらの内部構造を調べることにますます傾倒しました。うまくいけば、裏側で何が動いているのかを少しでも明らかにできるでしょう。少なくとも、デスクトップアプリ開発について一つか二つ学ぶことができるでしょう。 偶然にも、Copilotのクレジットを毎月早く使い切るようになったことに気づきました。これが、実験の主要な候補を選択することにつながりました。私はVS CodeとCopilotを深く掘り下げることにしました。 共通の denominador: Electron 上記のすべてのアプリに共通しているのは、Electronで構築されているという事実です。Electronは、開発者がデスクトップアプリケーションを構築・配布するのを支援するJavaScriptフレームワークです。平易な言葉で言えば、Node.jsランタイムとHTML、CSS、JavaScriptの成果物をバンドルし、それをChromium経由でレンダリングします。 Electronを使用しているアプリのリスト。ええ、たくさんあります。出典 これにより、異なるプラットフォーム（例えば、Windowsの場合はC#、macOSの場合はSwift）のために複数のネイティブ言語のコードベースを持つ必要がなくなり、開発者は単一のコードベースから複数のプラットフォームで実行されるデスクトップアプリケーションを簡単に構築できるようになります。（ネイティブモジュールや特定のパッケージングステップでは、プラットフォームごとの処理が依然として必要になることがよくありますが、アプリケーションロジックの大部分は共有されます。） Electronを共有しているため、それらは大まかなアーキテクチャを共有しています。これは、1つを調査して学んだことは、他のものにも転用できることを意味します。 Lighthouse Newsletterは無料です :) 友人や同僚が興味を持つであろう人々と共有して、私の仕事をサポートしてください 👇 シェア ネットワークパケット、そしてソース 私の最初の本能は、VS Codeのソースをざっと見て、私の質問に答えられるかどうかを確認することでした。問題は、まだ完全な質問セットを持っていなかったこと、そして何百万行ものコードを検索するのは、時間またはトークンを使いすぎるだろうということでした。ソースコードはアプリが何ができるかを示しますが、それが実行時に実際に何をするかを発見するのはより困難です。特に、まだ何を探しているのかわからない場合はなおさらです。 2つ目の問題がありました。VS Codeは、私が最初に始めたアプリの中でも例外です。そのソースコード（少なくともその大部分）はオープンです。Claude、ChatGPT、Codex、Notion、Slackの場合はそうではありません。それが私をリバースエンジニアリングのルートに押しやりました。まずトラフィックをパッシブに監視し、リクエストとレスポンスにどの質問が尋ねる価値があるかを教えてもらい、その後ソースコードに行って（または反証して）確認するという方法です。 それは、Electronのアーキテクチャとネットワークスタックに手を汚すことを意味しました。後で役立つスキルです。 Electronのネットワークアーキテクチャ 今では、ElectronアプリがChromiumをバンドルしていることを知っています。ブラウザは、アプリケーションのWebベースUIのレンダリングエンジンを提供しますが、レンダリングプロセスがHTTPおよびWebSocket接続に使用できるネットワークスタックも提供します。 これは、アプリがリモートバックエンドと通信できるようにするための一般的な（そして推奨される）オプションですが、唯一のオプションではありません。アプリケーションは、Nodeのhttp/https/fetchを使用してHTTPリクエストを行うこともできます。リクエストがどちらのパスを取るかは、それをインターセプトしようとする際に重要になります。 一部のケースでは、VS Codeのように、アプリケーションは分離されたアーキテクチャを持ち、拡張機能ホストとして機能する独立したプロセスのグループがあります。これは、異なる責任間の明確な境界を維持するのに役立ちます。VS Codeの場合、UI、コードIDE機能、プラグイン/拡張機能の間の明確な境界です。 VS Codeのアーキテクチャ。出典: VS Codeドキュメント Electronアプリからのネットワークトラフィックの検査 アプリケーションのネットワークトラフィックをインターセプトする古典的な方法の1つは、プロキシサーバーをセットアップし、そのアプリケーションがそれを使用するように構成することです。 プロキシはMITM（Man-in-the-Middle）として機能します。クライアントからのHTTPリクエストをインターセプトし、サーバーに転送し、サーバーのレスポンスをクライアントにリレーバックします。 豆知識: 企業ネットワーク環境では、特に規制の厳しい業界で、トラフィック検査の目的で同様のアプローチが一般的です。それにちなんで、これに使用される主なオープンソースツールの1つはmitmproxyと呼ばれており、次のステップで使用します。 重要な詳細として、今日のネットワークトラフィックのほとんどはセキュアHTTP（HTTPS）を介して行われます。これは、トラフィックがTLSを使用して暗号化されていることを意味します。mitmproxyのローカルに生成された証明書認証局（CA）を信頼することにより、クライアントはmitmproxyが各宛先に対してオンザフライで生成する証明書を受け入れることができます。単一のエンドツーエンド暗号化接続の代わりに、2つの接続が得られます。1つはアプリケーションとmitmproxyの間、もう1つはmitmproxyと宛先サーバーの間です。 したがって、mitmproxyはリクエストを復号化し、検査し、アップストリームで別のTLS接続を確立し、レスポンスをアプリケーションに転送できます。 開始方法 コードを追従したくないが、結果だけを見たい場合は、このセクションをスキップしても構いません。 mitmproxyのインストール macOSでは、brewを使用するのが最も簡単な方法です。 brew install mitmproxy VS Codeの設定 mitmproxy経由でトラフィックをルーティングするために、VS Codeの設定を変更する必要があります。Cmd+Shift+Pのホットキーの組み合わせを使用してユーザー設定を検索することで、これらの設定を変更できます。次に、以下の設定が次の値を持つことを確認する必要があります。 Http Proxy: http://localhost:8080 （mitmproxyはこのポートで接続をリッスンします） Http Proxy Strict SSL: unchecked （CAのリストに対してmitmproxyの証明書の検証をスキップしたいです） Http: Proxy Support: override （拡張機能のプロキシサポートを強制します） VS Codeの設定でネットワークトラフィックをmitmproxyにルーティング これらの変更を行った後、VS Codeを再起動してください。 mitm web UI 開始する前の最後のステップは、mitmproxyのWeb UIを起動することです。 mitmweb 数秒待つと、VS Codeからのネットワークトラフィックが流れているのが見えるはずです。 上部にいくつかのテキストフィールドが表示されます。ほとんどは現時点では無視できます。最も便利なのは最初の「Search」フィールドです。このフィールドは、キーワード検索、正規表現など、強力な検索機能を提供します。例えば、VS CodeがExtensions Marketplace APIに対して行うリクエストに特に興味がある場合は、marketplaceをフィルター文字列として使用するだけで済みます。 これにより、https://marketplace.visualstudio.com およびそのすべてのサブパスへのすべてのリクエストが一致します。 mitmweb - VS Codeからキャプチャされたフローのサンプルリスト 古い拡張機能ホストプロセス このすべての手順の後でも、プロキシが拡張機能のトラフィックをキャプチャしない場合があります。これは、VS Codeの拡張機能ホストプロセスグループが古くなっている場合に発生する可能性があります。これを確認するには、ターミナルから実行します。 ps -eo pid,ppid,lstart,command | grep -i -E "copilot|extensionHost|Code Helper" # 次のような表示になるはずです: 27896 27243 Fri Jul 24 15:40:11 2026. /Applications/Visual Studio Code.app/Contents/Frameworks/ # (...) 表示される日付を確認してください。VS Codeを再起動したときと同じ日付と時刻でない場合、拡張機能ホストプロセスはほとんどの場合古くなっています。これを解決するのは簡単です。 VSCodeで、コマンドパレットを開きます（Cmd+Shift+P）。 「Developer: Restart Extension Host」を実行します。 その後、再度ps grepを実行します。Code Helperの新しいPIDが今日のタイムスタンプで表示されるはずです。 タイプする前にCopilotが行うこと mitmwebでVS Codeからのネットワークリクエストを素早く確認すると、次のことがわかります。