最明白的charles教程 (四)

语言: CN / TW / HK
让你明明白白学知识,有代码,有讲解,抄的走,学的会!

我使用了 【mdnice】排版,导致,内容过于庞大,一次性无法放下,只能连载

相关章节

10、https乱码

charles-抓包乱码.png
charles-抓包乱码.png

乱码的原因是缺少 https 证书

10.1 在macOs上安装 https 证书

下面点安装步骤是 macOs 上的 先要安装证书

charles-SLL-设置-1.png
charles-SLL-设置-1.png

菜单栏--》 help --> SSL Proxying --> install charles root certificate

第一安装 会弹出提示

charles证书安装弹出提示.png
charles证书安装弹出提示.png

这个提示不用管,我们会通过手动的方式对证书添加信任,请一定一定要使用搜索,我自己找这个证书项找半天,我都怀疑我charles 版本不对,都重新安装了一遍了 【笑哭了.png】

快速搜索charles证书.png
快速搜索charles证书.png
charles证书信任设置.png
charles证书信任设置.png

设置以后,重启charles

10.2 设置端口,host

安装PC版的证书以后,查看 https的内容,还是乱码, 需要进一步设置

一定要勾选

Proxy-> SSL Proxying Settings->SSL Proxying:勾选Enable SSL Proxying :

通用设置,拦截所有站点 443端口

设置443端口拦截.png
设置443端口拦截.png
设置443.png
设置443.png
设置443-2.png
设置443-2.png

mac可能需要输入一次用户密码才能设置通过

可以看到简书的这个站点端口不是 443 那么我们要单独设置一下

对站点设置启用proxy.png
对站点设置启用proxy.png

此时,再看,就可以正确看到https的相应正文了

最终效果.png
最终效果.png

有的站点并不是一成不变的443端口,我们也可以直接设置host 不设置* 号, 设置具体的host地址和端口
注意,有的请求抓包无效果,会在右侧的 Overview 面板的 Notes 有提示,一般都是说 host 没有加入到我们的名单中(SSL Proxying Sttings)

10.3 上面的操作都设置,发现没有请求在控制面板中

请注意检查,是不是无意中将 stop recording 关了, 这个按钮标示不再抓包

下图是 正常运行点,点亮再次查看是否有请求在 Structure 面板中

stop-recording.png
stop-recording.png

10.4 window上安装 https证书-PC版

https://www.cnblogs.com/fighter007/p/9152832.html

11. 代理数据

11.1 localhost 无法被代理的解决办法

这个和操作系统有关,有2种解决方式 假如本地开发起了一个 8080的服务

http://localhost:8080

  1. url地址使用 http://本机ip:8080 例如: http://129.168.1.8:8080

mac查看本机ip, 终端, ifconfig

  1. 添加一个本地域名 将 127.0.0.1 指向自己定义的域名,随便什么都可以 a.b.c.com

mac或者linux 修改本地的host文件

mac推荐可视化修改 host文件的工具 SwitchHosts

mac操作如下

# 一定要用管理员权限
sudo vim /etc/hosts


添加域名,随便哪里做插入都可以
127.0.0.1 a.b.c.com
复制代码

window修改本地host

本地域名.png
本地域名.png
charles拦截本地域名.png
charles拦截本地域名.png

11.2 将本地的一个json格式数据代理到接口返回--做接口拦截

场景描述: 开发环境,数据库没那么多数据,又不想写SQL,假装不会,哈哈哈

新建一个 txt文件 或者json文件, 将数据代理到刚才的接口中

要求,数据是严格的JSON格式 在线JSON校验

data.txt

[
    {
        "id":1,
        "name":"张三"
    },
    {
        "id":2,
        "name":"李四"
    }
]
复制代码
map-local将本地数据代理到接口.png
map-local将本地数据代理到接口.png
选择本地文件.png
选择本地文件.png

再次请求,发现数据已经不走服务端,而直接被代理到本地了

注意: 如果要代理的本地文件找不到或者接口所需要的数据在 txt 中不是严格的json 则继续走原来系统中的, 忽略map local

11.3 将线上的数据代理到本地进行调试

场景1

线上的生产库数据,在某个环节/界面报错, 将某个接口数据代理到本地,本地的代码是开启source-map 的,可以直接进行debug

场景2

某些数据,在2个系统中都可以用,我们差不多的系统,直接拿源代码进行迁移,但是在做版本copy, 新版本中,可能由于后台还未能将数据导入到现在到库中, 可以使用代理的方式,达到数据先行,直接开发

场景3

生产环境js报错, 无法很好的调试,代理到本地进行加载调试;

缺点: 线上的js和本地的js是一致的,不能被混淆,压缩; 如果通过 webpakck进行打包过,打包上线关闭source-map 则这个场景无法实现,因为文件名已经不一致,导致代理失效

对应演示

场景1和场景2 是一个意思

先演示将A系统的数据代理到B系统,并进行返回

本地有2个服务 http://localhost:8080 还有一个 http://localhost:3001

都有 /getList接口, 现在8080 端口的服务请求后台数据库的数据,因为还没做数据的初始化,目前为空; 想直接用现成的 3001 服务的数据

目的: 将 3001 服务的数据作为数据源,代理到 8080 服务

map-remote.png
map-remote.png
map-remote-settiing.png
map-remote-settiing.png

效果

代理远程接口的效果.png
代理远程接口的效果.png

11.4 线上代理到本地环境,token鉴权怎么解决

源码地址

上面11.3 演示到只是没有接口鉴权的场景, 如果后台每个 请求接口都先进行权限验证,如果验证不通过,则直接打回,不去访问数据库,则凉凉; 我们知道 开发环境的token 和线上部署应用的token 绝对是2个不同的 线上环境 用户的toke 是 1xxxxx 本地登陆后,后台生成的token 是 2xxxxxx
charles 操作步骤

知识点:

  • map remote 代理接口 (本地代理到线上)
  • rewrite 重写请求头 (解决token鉴权问题)

操作步骤:

  1. 打开charles

  2. 为了查看方便, 我们只记录 我们想要的接口地址 Proxying--》 Recording Settings--》include

    http://a.b.c.com:3001 不会设置的看 第8步骤

    这里 a.b.c.com:3001 其实就是 http://localhost:3001 增加本地域名 见 11.1

  3. 为了排除一些干扰项 禁用缓存 Tools--> No Cathing

  4. 设置代理远程接口 Tools --> Map remote

5、重写请求头 一旦我们设置了map remote 那此时的接口就不能理解为是 dev环境发送请求,就应该理解是 我这个接口现在就是线上生产环境的, 所以,下面 重写请求头 就必须使用线上地址

这里是非常关键的

  • 我们要重写token 就是去以开发环境的身份伪造请求,那么我们需要修改 请求头
  • Match 是匹配项 我们就想重写 header 中 token 的这个值 这里只是举例,其实你可以匹配value ; 因为我们这里的场景就是我就用线上的token 就行了 我不关心开发环境产生的token 所以,这里的 value 我不用填写
  • Replace 中的value 一定是 我们线上我们想代理的接口的token 这里千万不要用本地开发环境产生的token 因为,这样 请求接口校验一定是校验不通过的, 那么在我们完整的登陆鉴权流程中,就会将我本地的用户 退出登陆
  1. 直接访问,现在我们通过起本地环境,成功通过重写请求头中的token 伪造了登陆, 拿到了线上生产库的数据

注意:

  • 我们通过代理线上的【查询接口】的数据在本地调试,是没啥问题的, 但是一旦代理 【提交】接口的数据,那是具有风险的,你查询,不管查询多少遍,接口具备幂等性,是不会产生影响的, 但是你提交接口,直接就修改了当前数据的状态,可能你就直接帮用户调用了 退单接口(假如用户辛辛苦苦算好优惠价格组合了, 打开app一看,数据丢失,mmp 就来了)
  • 还有 如果是纯前端,不太懂后台的,这种操作风险极高, 因为有的业务逻辑可能影响几张表,几个系统,那么一个失误的操作,可能就是一堆的 后台,测试人员围着你这条数据进行排查了

12、charles 抓取app数据

抓手机上的包,电脑和手机要在同一局域网 菜单栏--》 help --> SSL Proxying --> install charles root certificate on a mobile device or remote browser

前提条件:

  1. 手机和电脑在同一局域网下
  2. 手机同样需要安装 证书

手机安装证书步骤:

  1. charles 打开 顶部菜单 help --> SSL Proxying

手机安装https证书.png 2. 进入手机的 WLAN 界面 就是连接wifi的界面 3. 找到和电脑相同到 wifi, 进入高级, 有的直接显示一个 “代理”字样 4. 将代理中到内容填写为 电脑ip:8888 然后保存, 此时电脑到 charles 会提示,是否允许连接,点击 Allow 5. 打开手机浏览器,访问 http://chls.pro/ssl 手机会提示 一个下载链接(有的手机自带浏览器无法下载,或者不允许下载)

苹果手机安装证书以后, 有一个双层确定同意的过程 苹果手机安装证书

安卓手机安卓版本7+ 的,无法抓取 App的数据,因为系统层面的原因,系统不认用户安装的证书文件

  • 刷机 获取 root 就可以
  • App开发者在原生App中嵌入一段配置

安卓手机我测试是会出现一种情况,证书安装成功,只能抓取 app的 webview 数据,但是原生App是抓取不到 https乱码,还是因为证书原因 还有 安卓上打开 wifi中的代理, 即使charles 没做任何拦截处理,只是手机的流量经过了 charles 。部分app 会出现断网情况

如何抓取抖音视频及分析方法

13、charles 重写请求头

Tools--->Rewrite 操作步骤见 上面的 11.4 对于这个的详细说明 场景: 我们的请求想写入或者重写请求头

1、某个接口一直有问题,可能在和后台联调的时候,传递数据存在多种情况; 示例如下

axios.post('http://xxx/api/getList', {
  // 这个是附加在 GET请求地址后面的参数
  params: {
    a: 1,
    b: 2
  },
  // 接口请求头的参数
  headers: {
    name: 'zhangsan',
    age: 12,
    fileName: 'xxx'
  },
  // POST请求体的参数
  data: {
    c: 1
  }
})
复制代码

这样的接口,我遇到过,及其不规范,你说它是 GET请求吧,它有 data 请求体数据; 你说它是POST类请求吧,它有URL地址传参 我们可以通过重写请求头,请求体,host 等等,方式来模拟多种多样的数据,而不用直接修改我们的代码

QA环节

一、https显示 unknow ,解决步骤就是 8.2

二、抓不到包,检查 标题2, 和 8.3

三、数据只记录到根路径,子路径没被记录 查看上面的断点讲解

四、一个站点数据只记录几个,好多需要的资源没被记录

现在的站点资源可能来源多个域名下,先检查 Recording Settings 中有没有将目标站点的 host都添加上

五、charles 导入了证书, 证书已经被设置为信任,依旧乱码

检查 Proxy --> SSL Proxying Settings 是不会没添加 启用 SSL proxy 代理,然后添加 *:443

六、在手机端,证书传到手机来,浏览器打开没有自动安装

• 将证书发送到微信聊天中,点击试试,看能否安装; • 重新下载其他浏览器试试, 类似QQ浏览器,UC浏览器 • 手动安装证书

七、本地代理线上接口,有token的情况下,总是失败

核对 11.4 中的讲解重点

八、官网下载的charles 用了几天就频繁闪退

老弟,该交钱了,用旧版本的,或者盗版的就没问题

分享到: