背景

在開(kāi)發(fā)Flutter中，我們經(jīng)常需要對(duì)網(wǎng)絡(luò)請(qǐng)求進(jìn)行調(diào)試，而Flutter自帶的devtool的network又不太好用，有時(shí)會(huì)出現(xiàn)請(qǐng)求成功，但是又看不到response返回（難道是我姿勢(shì)不對(duì)？）。于是我就嘗試通過(guò)抓包來(lái)查看請(qǐng)求

工具準(zhǔn)備

• 安裝charles
• 有時(shí)我們需要抓https的請(qǐng)求，此時(shí)用charles抓包的內(nèi)容是加密的，看不到明文，這時(shí)候需要安裝下Charles的證書來(lái)解決。點(diǎn)擊help > SSL Proxying > Install Charles Root Certificate，安裝到系統(tǒng)的鑰匙串中。（這里借下了光哥小冊(cè)里的截圖）

點(diǎn)擊證書，將信任選項(xiàng)改成始終信任

開(kāi)啟charles的代理。開(kāi)啟后，確認(rèn)Proxy選項(xiàng)卡與下方畫紅線的地方顯示一樣

配置Flutter代理

完成工具準(zhǔn)備后，由于Flutter默認(rèn)不走系統(tǒng)代理，所以我們還需要手動(dòng)在Flutter項(xiàng)目中配置代理，charles才能正確抓到包。這里提供兩種方案，一種是在請(qǐng)求庫(kù)的配置里設(shè)置代理，另一種是利用Flutter原生的類來(lái)完成

方式一、http請(qǐng)求庫(kù)配置代理

dio配置代理

flutter項(xiàng)目里通常用dio庫(kù)做http請(qǐng)求，我們可以通過(guò)dio的httpClientAdapter屬性配置我們的本地代理。代碼如下：

import 'package:dio/dio.dart';
var dio = Dio();
(dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate =
  (client) {
  client.findProxy = (uri) {
    return 'PROXY localhost:8888';
  };
  client.badCertificateCallback =
    (X509Certificate cert, String host, int port) => true; //忽略證書
};

其中client.findProxy函數(shù)用來(lái)返回我們的代理接口，charles的默認(rèn)的系統(tǒng)代理端口是8888，所以這里配置成

PROXY localhost:8888就可以了。下面一句client.badCertificateCallback函數(shù)也很關(guān)鍵，如果不進(jìn)行配置，charles在抓包https請(qǐng)求時(shí)會(huì)出現(xiàn)下圖錯(cuò)誤：

這個(gè)錯(cuò)誤產(chǎn)生的原因，經(jīng)我查閱網(wǎng)上資料是因?yàn)镕lutter請(qǐng)求https時(shí)用的是自己的CA認(rèn)證證書，所以charles在認(rèn)證證書時(shí)沒(méi)有通過(guò)，導(dǎo)致抓包錯(cuò)誤。所以我們直接通過(guò)client.badCertificateCallback函數(shù)返回true來(lái)忽略證書就好了。

web_socket_channel配置代理

有了上面dio的配置后，還不夠，因?yàn)槲覀兊?code>websocket請(qǐng)求還是無(wú)法抓包。如果你項(xiàng)目中需要抓取websocket，可以使用web_socket_channel這個(gè)庫(kù)。需要注意的是這個(gè)庫(kù)不能從官網(wǎng)拉取，因?yàn)楣俜降?code>web_socket_channel的還不支持代理，我在官方的代碼倉(cāng)庫(kù)看到有幾個(gè)與支持代理相關(guān)的pr請(qǐng)求，但是官方都還沒(méi)有進(jìn)行合并分支，所以我就自己fork倉(cāng)庫(kù)修改了一下，我們可以改成以下方式進(jìn)行安裝：

dependencies:
  web_socket_channel:
      git:
        url: https://github.com/IFreeOvO/web_socket_channel.git
        ref: master

然后我們開(kāi)始配置web_socket_channel，不過(guò)有了之前配置dio的經(jīng)驗(yàn)后，我們配置web_socket_channel也是使用了差不多的思路，代碼如下：

import 'package:web_socket_channel/io.dart';
// 創(chuàng)建一個(gè)自己的HttpClient對(duì)象
SecurityContext ctx = SecurityContext.defaultContext;
HttpClient client = HttpClient(context: ctx)
  ..findProxy = ((uri) {
    return 'PROXY localhost:8888';
  })
  ..badCertificateCallback = (cert, host, port) {
  return true;
};
_channel = IOWebSocketChannel.connect(
  'wss://xxx.com',
  customClient: client, // 使用定制的HttpClient
);

方式二、重寫原生方法

在入口文件main.dart里定義一個(gè)HttpOverrides的子類，重寫它的createHttpClient方法。原理也是一樣的，把findProxy和badCertificateCallback方法進(jìn)行替換。然后掛載到全局。

// 重寫HttpOverrides
class MyHttpOverrides extends HttpOverrides {
  @override
  HttpClient createHttpClient(SecurityContext? context) {
    var http = super.createHttpClient(context);
    http.findProxy = (uri) {
      return 'PROXY localhost:8888';
    };
    http.badCertificateCallback =
        (X509Certificate cert, String host, int port) => true;
    return http;
  }
}
void main() {
  HttpOverrides.global = MyHttpOverrides(); // 使用自己的HttpOverrides類
  runApp(MyApp());
}

這種方案的好處是不受第三方請(qǐng)求庫(kù)限制，配置完后https和websocket都能正確抓包。效果如圖：

以上就是Flutter配置代理抓包實(shí)現(xiàn)過(guò)程詳解的詳細(xì)內(nèi)容，更多關(guān)于Flutter配置抓包的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論