Flutter中http請求抓包解決方案

大灰狼的小綿羊哥哥 發表於 2020-11-27

前言

前陣子有同學反饋Flutter中的http請求無法通過fiddler抓包,作者喜歡使用Charles抓包工具,於是抽時間寫了個小demo測試了一下,結論是在手機上設定代理,Charles確實抓不到請求資料包。於是對該問題進行了分析:

  1. 確定使用的是http發起的get請求,理論上http協議應該可以被Charles抓到包的,如果沒有抓到包,那可能是沒有走代理,於是乎通過將筆記本連線的wifi斷開測試了一下手機上APP發起http請求,發現請求成功,證實確實沒有走代理;

  2. 為什麼http請求沒有通過wifi走代理呢,因為之前安卓原生使用的一些http框架都是正常走代理的啊,那是不是有可能程式碼中有api方法可以設定請求不走代理,於是乎就研讀了一下Flutter中http相關的原始碼,最終找到了答案。

http請求原始碼跟蹤

http.dart中的HttpClient是一個抽象類,成員方法的具體實現在http_impl.dart中,http的get請求實現如下:

Future<HttpClientRequest> getUrl(Uri url) => _openUrl("get", url);

Future<_HttpClientRequest> _openUrl(String method, Uri uri) {
  .
  .
  .
  // Check to see if a proxy server should be used for this connection.
  var proxyConf = const _ProxyConfiguration.direct();
  if (_findProxy != null) {
    // TODO(sgjesse): Keep a map of these as normally only a few
    // configuration strings will be used.
    try {
      proxyConf = new _ProxyConfiguration(_findProxy(uri));
    } catch (error, stackTrace) {
      return new Future.error(error, stackTrace);
    }
  }
  return _getConnection(uri.host, port, proxyConf, isSecure)
      .then((_ConnectionInfo info) {
    .
    .
    .
  });
}
複製程式碼

首先,我們可以發現方法中有一行註釋// Check to see if a proxy server should be used for this connection.,意思是“檢查是否應該使用代理伺服器進行此連線”;

然後,有一個proxyConf物件初始化和根據_findProxy來建立新的proxyConf物件的語句,然後通過_getConnection(uri.host, port, proxyConf, isSecure)來建立連線,_getConnection的原始碼如下:

Future<_ConnectionInfo> _getConnection(String uriHost, int uriPort,
    _ProxyConfiguration proxyConf, bool isSecure) {
  Iterator<_Proxy> proxies = proxyConf.proxies.iterator;

  Future<_ConnectionInfo> connect(error) {
    if (!proxies.moveNext()) return new Future.error(error);
    _Proxy proxy = proxies.current;
    String host = proxy.isDirect ? uriHost : proxy.host;
    int port = proxy.isDirect ? uriPort : proxy.port;
    return _getConnectionTarget(host, port, isSecure)
        .connect(uriHost, uriPort, proxy, this)
        // On error, continue with next proxy.
        .catchError(connect);
  }

  return connect(new HttpException("No proxies given"));
}
複製程式碼

從程式碼中我們可以看到根據代理配置資訊來將請求的host和port進行重置,然後建立真實的連線。

跟蹤以上原始碼我們發現dart中http請求是否走代理是需要配置的,而_findProxy變數和配置的代理資訊有關。

http__impl.dart檔案中的_HttpClient類中定義了_findProxy的預設值

Function _findProxy = HttpClient.findProxyFromEnvironment;
複製程式碼

HttpClient類中findProxyFromEnvironment方法的實現

static String findProxyFromEnvironment(Uri url,
    {Map<String, String> environment}) {
  HttpOverrides overrides = HttpOverrides.current;
  if (overrides == null) {
    return _HttpClient._findProxyFromEnvironment(url, environment);
  }
  return overrides.findProxyFromEnvironment(url, environment);
}
複製程式碼

_HttpClient類中_findProxyFromEnvironment方法的實現

static String _findProxyFromEnvironment(
    Uri url, Map<String, String> environment) {
  checkNoProxy(String option) {
    if (option == null) return null;
    Iterator<String> names = option.split(",").map((s) => s.trim()).iterator;
    while (names.moveNext()) {
      var name = names.current;
      if ((name.startsWith("[") &&
              name.endsWith("]") &&
              "[${url.host}]" == name) ||
          (name.isNotEmpty && url.host.endsWith(name))) {
        return "DIRECT";
      }
    }
    return null;
  }

  checkProxy(String option) {
    if (option == null) return null;
    option = option.trim();
    if (option.isEmpty) return null;
    int pos = option.indexOf("://");
    if (pos >= 0) {
      option = option.substring(pos + 3);
    }
    pos = option.indexOf("/");
    if (pos >= 0) {
      option = option.substring(0, pos);
    }
    // Add default port if no port configured.
    if (option.indexOf("[") == 0) {
      var pos = option.lastIndexOf(":");
      if (option.indexOf("]") > pos) option = "$option:1080";
    } else {
      if (option.indexOf(":") == -1) option = "$option:1080";
    }
    return "PROXY $option";
  }

  // Default to using the process current environment.
  if (environment == null) environment = _platformEnvironmentCache;

  String proxyCfg;

  String noProxy = environment["no_proxy"];
  if (noProxy == null) noProxy = environment["NO_PROXY"];
  if ((proxyCfg = checkNoProxy(noProxy)) != null) {
    return proxyCfg;
  }

  if (url.scheme == "http") {
    String proxy = environment["http_proxy"];
    if (proxy == null) proxy = environment["HTTP_PROXY"];
    if ((proxyCfg = checkProxy(proxy)) != null) {
      return proxyCfg;
    }
  } else if (url.scheme == "https") {
    String proxy = environment["https_proxy"];
    if (proxy == null) proxy = environment["HTTPS_PROXY"];
    if ((proxyCfg = checkProxy(proxy)) != null) {
      return proxyCfg;
    }
  }
  return "DIRECT";
}
複製程式碼

從以上程式碼中可以發現代理配置從environment中讀取,設定代理時必須指定http_proxyhttps_proxy等。而從_openUrl方法實現中proxyConf = new _ProxyConfiguration(_findProxy(uri));得出預設情況下environment是為空的,所以要想在Flutter的http請求中使用代理,則要指定相應的代理配置,即設定httpClient.findProxy的值。

示例程式碼:

_getHttpData() async {
  var httpClient = new HttpClient();
  httpClient.findProxy = (url) {
    return HttpClient.findProxyFromEnvironment(url, environment: {"http_proxy": 'http://192.168.124.7:8888',});
  };
  var uri =
      new Uri.http('t.weather.sojson.com', '/api/weather/city/101210101');
  var request = await httpClient.getUrl(uri);
  var response = await request.close();
  if (response.statusCode == 200) {
    print('請求成功');
    var responseBody = await response.transform(Utf8Decoder()).join();
    print('responseBody = $responseBody');
  } else {
    print('請求失敗');
  }
}
複製程式碼

以上程式碼設定後即可使用Fiddler或Charles抓包了。

注:

  • 程式碼中已設定代理,手機wifi不再需要進行代理設定;

  • 192.168.124.7該IP為我們需要抓包的Charles所在電腦IP;

第二種抓包解決方案

如果使用Flutter寫的APP不手動設定代理,則可以使用另一種方案來抓包。

通過電腦設定熱點 -> 使用手機連線電腦熱點上網 -> 在電腦上使用Wireshark抓資料包。

具體步驟如下(macOS系統下):

1. 開啟系統偏好設定,找到“共享”

Flutter中http請求抓包解決方案

2. 開啟“共享”,顯示以下視窗,並選擇共享以下來源的連線為指定的有線網路,用以下埠共享給電腦選擇為Wi-Fi

Flutter中http請求抓包解決方案

3. 點選右下角Wi-Fi選項按鈕,顯示如下,填寫對應資訊後點選“好”儲存

Flutter中http請求抓包解決方案

4. 回到剛才的“共享”視窗,開啟左側視窗中的服務“網際網路共享”

Flutter中http請求抓包解決方案

5. 然後開啟Wireshark軟體介面,首頁選擇對應開熱點的網路雙擊

Flutter中http請求抓包解決方案

6. 請求介面域名t.weather.sojson.com對應的IP為 58.222.18.24,則在上面輸入框中輸入請求過濾條件 "ip.dst == 58.222.18.24",然後通過手機APP發起網路請求

檢視介面的IP地址

$ ping t.weather.sojson.com
PING nm.ctn.aicdn.com (58.222.18.24): 56 data bytes
64 bytes from 58.222.18.24: icmp_seq=0 ttl=54 time=16.792 ms
64 bytes from 58.222.18.24: icmp_seq=1 ttl=54 time=16.926 ms
64 bytes from 58.222.18.24: icmp_seq=2 ttl=54 time=15.804 ms
複製程式碼

Flutter中http請求抓包解決方案

7. 選擇對應的http請求,箭頭指定行,右鍵點選,選擇Follow->HTTP Stream選項

Flutter中http請求抓包解決方案

8. 彈出具體網路請求資訊視窗如下

Flutter中http請求抓包解決方案

寫在最後

本篇分享了兩種Flutter中http資料包的抓包解決方案,大家可以根據實際情況來選擇使用。如果有其他Flutter相關的問題,歡迎大家通過公眾號發訊息留言。

說明:

文章轉載自對應的“Flutter程式設計指南”微信公眾號,更多Flutter相關技術文章開啟微信掃描二維碼關注微信公眾號獲取。

Flutter中http請求抓包解決方案