Charles

Charles

目标

  1. 通过Charles来分析前后端的问题

  2. 能够用Charles模拟弱网测试环境

  3. 使用Charls的断点构建 异常的测试场景

简介

青花瓷,一款基于HTTP协议的代理服务器,通过成为电脑或者浏览器的代理,然后截取请求和请求结果达到分析抓包的目的。跨平台

工作原理

sNzWmLuYUcR5ejK

功能

  1. 支持HTTP以及HTTPS代理

  2. 支持流量控制(弱网测试)

  3. 支持接口并发请求(性能测试,压测)

  4. 支持重发网络请求

  5. 支持断点调试功能

优点(相对于Fiddler)

IxsrbFA7RScH1QG

介绍总结

概念:代理服务器、跨平台、半免费、工作原理

流量控制:支持代理、流量控制、请求重发、断点调试

优点:支持多系统、页面简洁、反向代理、网络类型可选择

工具

6YaDkIm5cZTRN1U

PqIjTuYCGUkvNx2

vZbWQLj9PMmFhB4

kbveAcz5oZ6Plwh

38XhcRm7OFPCQej

FN9V3zspLKCEfat

KHz6GOlTtpEQ8yg

实战

实施步骤,1. Charles代理配置 2. 客户端代理配置 3. 操作客户端软件 4. 分析请求数据

实战1

如果有一个账号,他的名称很长,出来了两个问题,“出现了系统繁忙”,而且出现了两次。

发现 “出现了系统繁忙” 是在响应报文中,所以是后端发出来的

而出现两次,(其实看到后台只返回了一个返回结果),所以是前端的问题。

HTTPS抓包

内容会乱码,因为未配置证书抓去HTTPS,HTTPS相比HTTP多了一层安全加密的。

ntDZgy1KaMSvOGp

j6tvGM1HRgPBLAr

流量配置

wnWUAtSVeljLTyg

可以模拟弱网,时间分析慢,页面展示状态也慢

断点配置

7M1DBjLdElXYH6o

BxVjwE26eQo4ARg

实战

e2DNS3fRViyqPou

抓包实战总结

NtYVzEh37SmRQ2O

问题

重述一下项目的代理方式

1 首先本地host文件夹,将域名(*.)dinosaurstore.com映射到localhost

2 然后配置nginx的时候监听该域名,若监听到:要静态资源(/static/)的话,直接nginx返回;要动态资源的话,反向代理到后台的网关,此处用了负载均衡。

3 然后后台的网关,转发给各个微服务

在调试角度:

有时候某一个微服务的域名没有写到host中去(当然真实情况不需要配置的)

nginx没有写该域名的监听,然后因为负载均衡有些ip没有改(因为在本地,有时候局域网内IP会变化)

然后idea中的网关的配置文件没有转发正确,微服务没有注册

等等,都会造成我访问不到应有的商城界面,而且有时候不好找出错误,

我想如果能有一个工具能进行跟踪就好了,比如先从①输入的域名+80端口开始,然后跟踪到②反向代理给后台网关的ip+端口,再到网关③转发给特定的微服务的ip+端口。这样就能看到哪一段有问题了。

但是我试过用tcpdump,抓不到本地的包,那怎么办?回环数据包。

当然,如果这些微服务都不是在本机,而是在外网,那么不需要设置成捕获localhost这一步,但是好像用charles好像也不能看出来到底是gateway转发有问题还是nginx反向代理有问题?

1 Charles无法代理localhost的解决办法

Charles代理Chrome抓取localhost的包

使用这个网址里面第二个,rewrite就可以了。

但是这个即使解决了,也看不到响应的端口的问题。

2 使用Nginx做反向代理时,如何查看web请求被落地到哪台服务器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# /Users/dinosaur/mydockerdata/nginx/conf/conf.d/dinosaurstore.conf
# 添加两行,然后可以从响应头里面看到负载均衡到了哪一个服务器
add_header backendIP $upstream_addr; # 这句和下面一句可以从响应头里面看到负载均衡到了哪一个服务器
add_header backendCode $upstream_status;

server {
listen 80;
server_name *.dinosaurstore.com dinosaurstore.com;

#charset koi8-r;
#access_log /var/log/nginx/log/host.access.log main;

location /static/ {
root /usr/share/nginx/html; # root表示所有的资源都去这里面找,而不是反向代理到网关去找了
}

location / {
proxy_set_header Host $host;
proxy_pass http://dinosaurstore; # 总配置文件里面配置了上游服务器地址upstream,所以此处写这个即可
add_header backendIP $upstream_addr; # 这句和下面一句可以从响应头里面看到负载均衡到了哪一个服务器
add_header backendCode $upstream_status;
}
}

3 监听本地回环数据包(localhost包)

tcpdump监听本地闭环数据包

1
2
tcpdump -D 或者 ifconfig   # 查看Loopback这个闭环地址,现在是lo0
sudo tcpdump -i lo0 host 192.168.1.100 -v -w ./2022-08-09-1938.cap

4 wireshark导入cap文件

使用 Wireshark 导入/导出pcap文件——Wireshark 新手教程(3)

在里面可以看到源,目的,然后源port和目的port,会有三次握手等信息,我需要看的就是,看相应的微服务的端口是不是也做出了响应,做出了响应的话,应该通还是通的。

之后那么就看idea里面的错误日志了。(GC、mysql等的),比如未注册,微服务有错误等等。

例子

1
2
3
1 tcpdump -D 或者 ifconfig   # 查看Loopback这个闭环地址,现在是lo0
2 sudo tcpdump -i lo0 host 192.168.1.100 -v -w ./2022-08-09-1938.cap
3 把cap文件拖入wiresharp中进行分析

WR7kT2gGHF6qmSd

比如我把product这个微服务Gateway转发不到(就是访问dinosaurstore.com这个域名),那么上面只有我浏览器输入后自己的端口跟88的连接了,转发不到10000端口。

注意:

也就是说,能给88端口发送信息,就证明nginx反向代理成功了;然后转发不到10000端口,证明gateway转发不成功。

而用charles这个(rewrite之后能捕获localhost的了),但是也只跟在浏览器查看抓包一样,无法到达。

1eKZFMX35q2sYm8

有关网络工具的

1
2
3
traceroute www.baidu.com
# 路由跟踪 通过traceroute我们可以知道信息从你的计算机到互联网另一端的主机是走的什么路径。当然每次数据包由某一同样的出发点(source)到达某一同样的目的地(destination)走的路径可能会不一样,但基本上来说大部分时候所走的路由是相同的。

TCPdump

dump the traffic on a network

s3uHQCzRT4WFhbV

AS4vODN1YyHLotX

基于IP地址进行过滤:host、src、dst

sudo tcpdump host 124.222.48.192 # 两个方向的

sudo tcpdump dst 124.222.48.192 # dst代表目的地址是124.222.48.192,src是源,dst是目的地

基于网段进行过滤:net

sudo tcpdump net 192.168.1.0/24 # 该网段内的都会有

sudo tcpdump src/dst net 192.168.1.0/24

基于端口进行过滤:port

sudo tcpdump src/dst port 80 or 22

Sudo tcpdump portrange 8000-8080

基于协议的报文:protocal

sudo tcpdump icmp

ip ip6 arp imp tcp udp

注意http、dns、https、ssh这些应用层的协议,需要写成

sudo tcpdump port http

或者 sudo tcpdump port 53 (DNS)

基于包大小过滤:less greater

sudo tcpdump less 32

sudo tcpdump greater 1000

一些常用参数

aCDVtoTqw9yAkcJ

tcp -i any # 监听所有的接口,而不只是默认的eth0

DP7tmMRuHkKFb24

wSARVeLHkCWIyN1

Author: Jcwang

Permalink: http://example.com/2022/08/09/Charles/