欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Flutter中http请求抓包的完美解决方案

程序员文章站 2022-06-03 19:13:39
前言 前阵子有同学反馈flutter中的http请求无法通过fiddler抓包,作者喜欢使用charles抓包工具,于是抽时间写了个小demo测试了一下,结论是在手机...

前言

前阵子有同学反馈flutter中的http请求无法通过fiddler抓包,作者喜欢使用charles抓包工具,于是抽时间写了个小demo测试了一下,结论是在手机上设置代理,charles确实抓不到请求数据包。于是对该问题进行了分析:

  • 确定使用的是http发起的get请求,理论上http协议应该可以被charles抓到包的,如果没有抓到包,那可能是没有走代理,于是乎通过将笔记本连接的wifi断开测试了一下手机上app发起http请求,发现请求成功,证实确实没有走代理;
  • 为什么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_proxy或https_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数据包的抓包解决方案,大家可以根据实际情况来选择使用。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。