reversing-network

ネットワークのリバースエンジニアリング（ブラウザー → HTTP）

robomotion-browser-mcp のネットワークキャプチャを使って基盤となる API をリバースエンジニアリングし、ブラウザー自動化をより高速で信頼性の高い HTTP リクエストに置き換えます。

併用先： exploring-browser — 探索中にそこでトラフィックをキャプチャし、その後ここで変換します。

こんなときに使用

ブラウザー自動化を使用	ネットワークのリバースエンジニアリングを使用
サイトで JavaScript による重いレンダリングが行われる	サイトのデータが API 呼び出しから取得される
明確な API エンドポイントがない	DevTools で API エンドポイントを特定できる
ログインに JavaScript の実行が必要	ログインのレスポンスヘッダー／本文にトークンが含まれる
サイトのセレクターが頻繁に変わる	API が安定しており、バージョン管理されている

ステップ 1：Browser MCP でネットワークトラフィックをキャプチャする

ネットワークキャプチャを有効にしてブラウザーを開き、対象の操作を実行します。

1. browser_open(stealth: true)
2. browser_start_network_capture(url_filter: "api.", capture_body: true)
3. browser_navigate(url: "https://example.com/search")
4. browser_snapshot()  — read the page to find interactive elements
5. browser_click / browser_type — perform the user action (search, login, etc.)
6. browser_get_requests(method: "POST")  — list captured API calls
7. browser_get_request_response(request_id: "...")  — inspect a specific pair

操作の合間に browser_snapshot() を使ってページの状態を確認します。対象の API 呼び出しが browser_get_requests に表示されるまで、クリック／入力／スナップショットを繰り返します。

ステップ 2：キャプチャしたリクエストを分析する

browser_get_request_response が返す JSON から、次の項目を確認します。

• リクエスト：request.method、request.url、request.headers、request.body
• レスポンス：response.status、response.headers、response.body、response.mimeType

以下を特定します。

1. エンドポイント URL — バージョンが含まれることがよくあります（/api/v2/products）
2. 必須ヘッダー — Authorization、X-API-Key、Cookie、Content-Type
3. リクエスト本文の形式 — JSON、form-data、GraphQL
4. 認証フロー — ログインによって Bearer トークンが返されますか？

ステップ 3：HTTP フローを構築する

import { flow, Message, Custom, Credential } from '@robomotion/sdk';

const myFlow = flow.create('main', 'API Scraper', (f) => {
  f.node('start', 'Core.Trigger.Inject', 'Start', {})

  // Step 1: Authenticate (if needed)
  .then('auth', 'Core.Net.HttpRequest', 'Login', {
    optUrl: Custom('https://api.example.com/auth/login'),
    optMethod: 'post',
    inBody: Custom(JSON.stringify({ username: '...', password: '...' })),
    inCustomHeaders: [{ scope: 'Custom', name: { name: 'Content-Type', value: 'application/json' } }],
    outBody: Message('auth_body'),
    outStatus: Message('auth_status')
  })

  // Step 2: Extract token from response
  .then('token', 'Core.Programming.Function', 'Extract Token', {
    func: `
      msg.bearer_token = 'Bearer ' + msg.auth_body.token;
      return msg;
    `
  })

  // Step 3: Build headers object with token
  .then('headers', 'Core.Programming.Function', 'Build Headers', {
    func: `
      msg.headers = {
        'Authorization': msg.bearer_token,
        'Content-Type': 'application/json',
        'User-Agent': 'Mozilla/5.0'
      };
      return msg;
    `
  })

  // Step 4: Call the actual data API
  .then('api', 'Core.Net.HttpRequest', 'Get Data', {
    optUrl: Custom('https://api.example.com/products?page=1'),
    optMethod: 'get',
    inHeaders: Message('headers'),
    outBody: Message('api_body'),
    outStatus: Message('api_status')
  })

  // Step 5: Parse and process
  .then('parse', 'Core.Programming.Function', 'Parse Response', {
    func: `
      msg.products = msg.api_body.items;
      return msg;
    `
  })

  .then('stop', 'Core.Flow.Stop', 'Done', {});
});

myFlow.start();

ステップ 4：ページネーションに対応する

ページネーションのある API では、次のループパターンを使用します。

// ForEach over page numbers or use cursor/offset from response
f.node('loop', 'Core.Programming.ForEach', 'Each Page', {
  optInput: Message('page_numbers'),  // [1, 2, 3, ...]
  optOutput: Message('page_num')
})
// ... make API call with page_num ...
f.node('goto', 'Core.Flow.GoTo', 'Next', {
  optNodes: { ids: ['LABEL_ID'], type: 'goto', all: false }
})

主なルール

1. フロー全体を構築する前に、必ず API のレスポンス形式を確認します
2. 認証情報は vault に保存します — API キーやトークンをハードコードしないでください
3. レート制限に対応します — 429 レスポンスには delayBefore または再試行ループを追加します
4. トークンの有効期限を確認します — 有効期限のあるトークンもあるため、必要に応じて更新処理を追加します
5. Core.Net.HttpRequest は組み込みです — 追加の依存関係は不要です（Core パッケージに含まれています）

一般的な HTTP ノードのプロパティ

正確な名前は robomotion describe node Core.Net.HttpRequest で確認してください。

プロパティ	値
URL（オプション）	optUrl: Custom('https://...') または Message('url')
Method（オプション）	optMethod: 'get' | 'post' | 'put' | 'delete' | 'patch'（小文字の列挙値）
Headers（入力）	inHeaders: Message('headers')（キーと値のオブジェクト）、または inCustomHeaders: [{ scope: 'Custom', name: { name: 'X', value: 'Y' } }]
Body（入力）	inBody: Custom(JSON.stringify({...})) または Message('body')
Response body（出力）	outBody: Message('resp_body') — Content-Type: application/json の場合は解析済み JSON、それ以外の場合は文字列
Response status（出力）	outStatus: Message('status')
Response headers（出力）	outHeaders: Message('resp_headers')

クリーンアップ

キャプチャが終わったら、フローの構築に失敗した場合でも、必ず browser_stop_network_capture と browser_close を呼び出してください。ブラウザーを開いたままにするとリソースを浪費し、後続の実行を妨げるおそれがあります。