Windows 上でリモートブラウザデバッグエントリを構築する

本文は、Windows ホスト上で Chrome を実行し、CDP 経由でリモートデバッグエントリを提供して、ローカルネットワーク内の Linux クライアントや MCP からの接続を可能にする方法を説明します。この方法の核は、Chrome が 127.0.0.1 だけをリスンし、portproxy で LAN アドレスにマッピングし、ファイアウォールで遠隔側の発信元を制限することです。

トポロジとフロー

下図は、Windows ホスト内部でのポートのフローと、クライアントが LAN アドレスからアクセスする方法を示しています。

flowchart TB
    subgraph Windows
        A[Chrome DevTools 127.0.0.1:9222] --> B[portproxy 192.168.31.2:9222]
        B --> C[Windows Firewall]
    end
    D[Linux Client] -->|CDP| B

    classDef local fill:#2c3e50,stroke:#ecf0f1,stroke-width:2px,color:#ecf0f1
    classDef proxy fill:#3498db,stroke:#2980b9,stroke-width:2px,color:#fff
    classDef firewall fill:#f39c12,stroke:#d35400,stroke-width:2px,color:#fff
    classDef client fill:#27ae60,stroke:#229954,stroke-width:2px,color:#fff

    class A local
    class B proxy
    class C firewall
    class D client

Chrome の起動

独立したユーザーディレクトリを使用し、remote debugging アドレスを明示的に指定することを推奨します。これにより、Chrome はローカルホストにのみデバッグポートを公開します。以下は 9222 ポートを例にした起動例で、実際の環境に応じて調整してください。

& "C:\Program Files\Google\Chrome\Application\chrome.exe" `
  --remote-debugging-address=127.0.0.1 `
  --remote-debugging-port=9222 `
  --user-data-dir="$env:TEMP\chrome-profile-mcp"

ポート転送の設定

portproxy を使用して、ローカルホストの 127.0.0.1:9222 を Windows の LAN アドレス 192.168.31.2:9222 にマッピングします。これにより、ローカルネットワークのクライアントがアクセスできるようになります。

netsh interface portproxy add v4tov4 `
  listenaddress=192.168.31.2 listenport=9222 `
  connectaddress=127.0.0.1 connectport=9222 `
  protocol=tcp

ルールが正しく適用されたか確認してください。現在の転送設定を確認できます。

netsh interface portproxy show v4tov4

ファイアウォールの設定

暴露範囲を制限するために、特定のクライアント IP からのみアクセスを許可することを推奨します。以下は、192.168.31.162 からの接続を許可する例です。

New-NetFirewallRule `
  -DisplayName "Allow CDP 9222 from Linux" `
  -Direction Inbound `
  -Action Allow `
  -Protocol TCP `
  -LocalPort 9222 `
  -RemoteAddress 192.168.31.162

接続の検証

ローカルホストと LAN アドレスの両方から /json/version が返されれば、フローは正常です。これにより、Chrome、portproxy、ファイアウォールのどの部分に問題があるかを迅速に特定できます。

curl http://127.0.0.1:9222/json/version
curl http://192.168.31.2:9222/json/version

下図は、検証リクエストが各コンポーネント間で転送されるプロセスを示しています。

sequenceDiagram
    participant Client as Client
    participant Proxy as Portproxy
    participant Chrome as Chrome
    Client->>Proxy: HTTP /json/version
    Proxy->>Chrome: 127.0.0.1:9222
    Chrome-->>Proxy: JSON
    Proxy-->>Client: JSON

MCP への接続

ポートの公開が完了したら、MCP は LAN アドレスを指すだけでよいです。以下は、chrome-devtools-mcp を直接使用して 192.168.31.2:9222 に接続する例です。

{
  "chrome-devtools": {
    "command": "npx",
    "args": [
      "-y",
      "chrome-devtools-mcp@latest",
      "--browser-url=http://192.168.31.2:9222"
    ]
  }
}

クリーンアップと復元

portproxy のルールは永続的です。使用しなくなった場合は、マッピングを削除し、ファイアウォールルールを除去して、デバッグポートの意図しない暴露を防ぐ必要があります。

netsh interface portproxy delete v4tov4 listenaddress=192.168.31.2 listenport=9222 protocol=tcp

ポートや IP を変更する場合は、Chrome のパラメータ、portproxy のルール、ファイアウォールルール、MCP の設定を同時に調整する必要があります。そうでないと、接続が不整合になります。

リモートデバッグポートはブラウザの完全な制御権限を持ち、パブリックネットワークに暴露すべきではありません。また、本番環境で長期的に有効にすることも推奨しません。どうしてもネットワークを跨いで使用する必要がある場合は、VPN やゼロトラストトンネルを優先し、最小権限と最小暴露面を維持してください。

• ←前へ
• 次へ→