Flutter 项目实战之网络抓包

Posted 2021-10-05 Xiao冰同学

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Flutter 项目实战之网络抓包相关的知识，希望对你有一定的参考价值。

Flutter项目实战之网络抓包

前言

首先在项目实战中，网络请求与接口的交互是必不可少的操作，但是移动端开发者没有 Web开发者那样完善的抓包工具，所以我们就需要一些抓包软件来替代浏览器的控制台来对APP的网络请求进行抓包分析数据，从而更有利于我们的日常工作。本次笔者将通过Flutter与抓包软件fiddler的双重教程，既可以让 Flutter开发者学习到抓包，又能让其他移动端开发者学习到Fidder工具的使用。

首先认识一下抓包软件 Fiddler。可能早期的开发者都认识这款开发工具，因为这款软件不如 charles那样跨平台，再加上很多开发者都是用 Mac 开发，所以饱受诟病。但是 Fiddler 现在已经不是以前的 Fiddler了，而且是 Fiddler Everywhere，已经可以在多个主流系统平台上完美运行了。笔者将内容分为两个部分 Fiddler 跟 Flutter，另外会使用 Mac跟 Windows分别演示效果。

环境

软件或框架名称	作用
Fiddler EveryWhere 2.0.0	用于抓包
dio 3.1.0	Flutter的网络请求框架，相当于android的 OKHttp，可以配置代理

前期准备

先查看自己的IP地址

Mac OS X

控制台命令: ifconfig

图 1

Windows

控制台命令：ipconfig

图2

Fiddler教程

Fidder 官网下载成功之后，使用默认选项直接安装即可。

笔者使用的最新版 2.0.2，安装成功之后进入登录页.如图3

图3

如果没有账号的话，可以点击 “New User?SIgn up” 注册。

进入 Fiddler 首页之后

图4

其实Mac跟Windows下的首页都差不多，所以就不放Windows的图了。

先去 “设置”,点击下图画圈的位置，如图5

图5 弹出设置的对话框，先点击connections选项卡，查看黄色画圈的是监听的端口号“8866”，还有要（红色画圈）检查 “Allow remote computers to connect” 这个要勾中，因为我之前出现过一种情况那就是明明手机跟电脑连接的同一个Wifi但是无法抓取到我的应用的网络，后来经过排查发现这个选项没有被勾中导致的。如**图6**

图6

这样就可以配置 HTTPS证书，从而完成抓取HTTPS的请求网络数据，如图7。可能有读者对HTTPS的原理流程不了解的，可以参考一下笔者的这篇博客 HTTPS流程详解希望能对您有所帮助。

图7

这样初步的配置就完成了。可以抓取浏览器的数据了。

Flutter 配置抓包

Flutter 1.22.6.stable
dio 3.0.10

 	Dio dio = Dio();
    dio.options.connectTimeout = 1000 * 30;  // 设置最大连接超时时间 30秒
    dio.options.receiveTimeout = 1000 * 30;  // 设置最大接受超时时间 30秒
    dio.options.contentType = Headers.jsonContentType;  // 设置数据的返回格式 json
    dio.options.headers['channel'] = Platform.operatingSystem; // 设置自定义的 请求头 channel，值为系统平台的名称;如果为Android平台，则为 channel: Android
    if (kDebugMode)  // 当前运行模式为 debug调试模式下开启代理，避免上线出现问题，设置代理的服务的URL 为 192.168.1.5:8866，也就是笔者电脑的 IP地址
      (dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate = (client) { 
          client.findProxy = (uri) {
            return 'PROXY 192.168.1.5:8866';
          };
      };

通过上面的注释，相信读者应该会很了解，并且能根据自己的实际项目进行配置。

但是有个问题就是如果抓取的请求太多，我们如何做有效的过滤呢？

所以笔者的技巧就是加上专有的请求头，也就是上文代码的 channel这个请求头，既可以标记请求的客户端平台，又可以对抓包有效过滤，一举两得。可以在图8所示，点击画圈的那个图标。