Flutter配置代理抓包如何實現

今天小編給大家分享一下Flutter配置代理抓包如何實現的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

背景

在開發Flutter中，我們經常需要對網絡請求進行調試，而Flutter自帶的devtool的network又不太好用，有時會出現請求成功，但是又看不到response返回（難道是我姿勢不對？）。于是我就嘗試通過抓包來查看請求

工具準備

• 安裝charles

• 有時我們需要抓https的請求，此時用charles抓包的內容是加密的，看不到明文，這時候需要安裝下Charles的證書來解決。點擊help > SSL Proxying > Install Charles Root Certificate，安裝到系統的鑰匙串中。

點擊證書，將信任選項改成始終信任

開啟charles的代理。開啟后，確認Proxy選項卡與下方畫紅線的地方顯示一樣

配置Flutter代理

完成工具準備后，由于Flutter默認不走系統代理，所以我們還需要手動在Flutter項目中配置代理，charles才能正確抓到包。這里提供兩種方案，一種是在請求庫的配置里設置代理，另一種是利用Flutter原生的類來完成

方式一、http請求庫配置代理

dio配置代理

flutter項目里通常用dio庫做http請求，我們可以通過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函數用來返回我們的代理接口，charles的默認的系統代理端口是8888，所以這里配置成

PROXY localhost:8888就可以了。下面一句client.badCertificateCallback函數也很關鍵，如果不進行配置，charles在抓包https請求時會出現下圖錯誤：

這個錯誤產生的原因，經我查閱網上資料是因為Flutter請求https時用的是自己的CA認證證書，所以charles在認證證書時沒有通過，導致抓包錯誤。所以我們直接通過client.badCertificateCallback函數返回true來忽略證書就好了。

web_socket_channel配置代理

有了上面dio的配置后，還不夠，因為我們的websocket請求還是無法抓包。如果你項目中需要抓取websocket，可以使用web_socket_channel這個庫。需要注意的是這個庫不能從官網拉取，因為官方的web_socket_channel的還不支持代理，我在官方的代碼倉庫看到有幾個與支持代理相關的pr請求，但是官方都還沒有進行合并分支，所以我就自己fork倉庫修改了一下，我們可以改成以下方式進行安裝：

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

然后我們開始配置web_socket_channel，不過有了之前配置dio的經驗后，我們配置web_socket_channel也是使用了差不多的思路，代碼如下：

import 'package:web_socket_channel/io.dart';
// 創建一個自己的HttpClient對象
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里定義一個HttpOverrides的子類，重寫它的createHttpClient方法。原理也是一樣的，把findProxy和badCertificateCallback方法進行替換。然后掛載到全局。

// 重寫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());
}

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

以上就是“Flutter配置代理抓包如何實現”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。