抓包神器：Charles

淡淡的烟草味﹌ 2021-09-03 07:00 498阅读 0赞

## Charles 是在 PC 端常用的网络封包截取工具，在做开发时，我们为了调试与服务器端的网络通讯协议，常常需要截取网络封包来分析。除了调试端口外，Charles 也可以用于分析第三方应用的通讯协议。配合 Charles 的 SSL 功能，Charles 还可以分析 Https 协议。    ##

Charles 通过将自己设置成系统的网络访问代理服务器，使得所有的网络访问请求都通过它来完成，从而实现了网络封包的截取和分析，也就是抓包啦。

**Charles 主要的功能包括：**

*  截取 Http 和 Https 网络封包。
 *  支持重发网络请求，方便后端调试。
 *  支持修改网络请求参数。
 *  支持网络请求的截获并动态修改。
 *  支持模拟慢速网络。

同类型的工具还有 大名鼎鼎的 Fidder：telerik.com/fiddler

## ***1.***使用背景 ##

在与公司 App 端 同事调试接口时，有的时候可能会出现一些非常莫名其妙的问题。有的时候可能难以定位这个问题到底是属于前端展示 Bug ，还是说接口数据异常。

通常这个时候，可能后端就需要去服务端日志然后结合日志数据进行排查。但是限于工具 网络等等复杂的情况，这样的方式其实真的蛮低效的。

这个时候就需要这样的一个工具，可以实时的看运行 App 的接口返回情况。结合前端 视图 展示，能在很短的时间内找到问题出现的原因。这样就可以快速的修复问题了。

## ***2.*** 下载 ##

官网下载地址：

www.charlesproxy.com/download/

Charles 是收费软件，可以免费试用 30 天。试用期过后，未付费的用户仍然可以继续使用，但是每次使用时间不能超过 30 分钟，并且启动时将会有 10 秒种的延时。因此，该付费方案对广大用户还是相当友好的，即使你长期不付费，也能使用完整的软件功能。

但是，我选择破解  ，我用 Charles 是来提升排查问题的时间的。结果你给我搞这些东西 我就受不了了。主要还是破解比较容易。哈哈哈哈

破解方式可以关注微信公众号 逛逛GitHub，回复 1208 获取。选择当前自己的版本下载一个 Jar 包就可以了。

### ***3.*** Charles 配置 ###

当 Charles 安装好之后，这个时候就可以抓取 Http 的包了，但是我们为 App 提供的接口 一般都是 Https 的。所以我们需要安装证书。

**安装证书**

`Help -> SSL Proxying ->Install Charles Root Certificate`

![format_png][]

证书安装好之后，还需要信任一下。就可以了

**Https 抓取配置**

![format_png 1][] ![format_png 2][]

## **iPhone 抓包配置** ##

这里为什么是 iPhone 抓包配置，主要是因为 Android 抓包配置太麻烦了。然后 iPhone 就只需要简单的安装证书就可以了。

![format_png 3][]

如上图，点击 **Install Charles Root Certificate on a Mobile Device Or Remote Browser**

![format_png 4][]

点击之后的提示框中 192.168.1.106:8888 为手机将要设置网络代理的地址。chls.pro/ssl 为手机下载证书地址。

确认手机和电脑在同一个网络下，访问 chls.pro/ssl 下载并安装证书。而后信任证书。

**安装证书**

![format_png 5][]

**信任证书**

设置 - 通用 - 关于本机 - 证书信任设置 - 勾选安装的证书

![format_png 6][]

**手机配置代理**

在将 WIFI 的代理配置成 192.168.1.106. 这样就可以顺利抓取到 手机的 Https 的包了。

![format_png 7][]

完成 上诉设置后，iPhone 就可以抓包了。

## ***4.*** Chrome 抓包配置 ##

Chrome 抓包配置和手机差不多，也是需要安装插件，然后配置代理。

配置代理，在 设置 - 高级 - 代理配置中。配置为 Charles 代理。接下来介绍主要功能：

**Repeat**

将已执行过的请求重复执行。

应用场景，**服务器压力测试**。

**Compose**

临时修改一些请求的参数，点击 Execute 就可以已修改后的请求发送。

![format_png 8][]

**Rewrite**

Rewrite 功能功能适合对某一类网络请求进行一些正则替换，以达到修改结果的目的

![format_png 9][]

**Map Remote Config**

地址从定向，将访问 A 服务器的请求代理到访问 B 服务器。

![format_png 10][]

**Map Local Config**

将指定请求的 响应 替换为 本地文件

![format_png 11][]

***5.*** 实战一

接下来对蔚来 理想的 App，对其消息系统进行抓包分析。得到比较适合我们自己的**消息系统设计**。

### **理想 ONE** ###

![format_png 12][]

理想的消息系统设计师一种集中式的设计，将所有的消息集中管理，**评论、赞、通知、私信、车辆**。

在消息中心拉去通知类消息

![format_png 13][]

对接口进行抓包如下。

https://api-app.lixiang.com/mms-api/v1-0/message?status=3&pageNumber=0&appId=chj_app_m01&channelType=1&pageSize=20&category=notice

接口设计上 通过 `category` 来区分是哪个渠道上的消息，现在我们请求的是通知 类型的消息，所以 category 为 notice。

接口的**响应参数**如下

{
        "success": true,
        "code": 0,
        "msg": "SUCCESS",
        "data": {
            "pageSize": 20,
            "pageNumber": 0,
            "numberOfElements": 1,
            "totalPages": 1,
            "totalElements": 1,
            "elements": [{
                "requestId": "rC21P1A80H2DJJQIGR00",
                "messageId": "C21P1A80H2DJJQIGR0000000",
                "appId": "chj_app_m01",
                "recipient": "3250332467430584322",
                "sender": null,
                "title": "理想社区用户公约（试行）",
                "summary": "亲爱的理想用户，为了维护社群的真实，友好的氛围，我们制定了理想的社群规范。",
                "contentId": null,
                "action": "{\"accountId\":0,\"avatar\":\"\",\"comment\":\"\",\"commentId\":0,\"commentType\":1,\"createTime\":1598072448536,\"level\":1,\"messageType\":\"notice\",\"nickName\":\"\",\"productId\":754,\"surfacePlot\":\"https://p.ampmake.com/lixiangzhizao_app/pc_push_system/787334842102195.jpg\",\"type\":1}",
                "tag": ["[Ljava.lang.String;@474616fd"],
                "category": "notice",
                "status": 1,
                "encryption": null,
                "sendOn": 1598072449000,
                "receiveOn": 0,
                "createdOn": 1598072448000,
                "updatedOn": 1599009229000
            }]
        }
    }

我们将返回值和界面放在一起对比一下:

![format_png 14][]

对比之后，界面元素的各个字段就比较清晰了。action 对象中，用来控制 查看详情 按钮，具体根据不同的 category 来控制不同的行为，因为现在的通知消息为一篇 文章，所以 点击 查看详情，就是拉去对应文章的信息，action  中 productId 就是指向的文章的主键 Id

![format_png 15][]

点击跳转至 详情页，上方展示了 【详情页页面】 【接口 URL 地址】 【接口详情】。可以看到对应的 productId 就是 754.

**消息分类**

评论 comment

![format_png 16][]

点赞 favour

![format_png 17][]

通知 notice

车辆 vehicle

### **蔚来 NIO** ###

![format_png 18][]

蔚来的消息入口是放在 IM 中的一个会话，和理想的设计不太一样，消息点击进入之后 分为 **互动** 和 **通知**，对互动消息列表的抓包结果如下。

![format_png 19][]

在抓包时发现，在每次请求消息列表 这个接口的时候，还会附带一个 **history\_read** 的一个接口

/api/1/message/history_read?app_id=10002&app_ver=4.4.0&device_id=2c0d36fa578c45c6819e0567399b8704&lang=zh-cn&region=cn&timestamp=1599026946&sign=4be15ff9fa6e02e2fe5b24bb06c74a03

猜测应该是控制当前用户已经读取过当前时间之前的消息。下次进入系统就不会再提示了。

![format_png 20][]

在对比 通知里面的消息结构。基本的消息结构就比较明确了。

![format_png 21][]

上图是在 **蔚来** 发表了一条 **说说** 之后，获取得到了 11 个点赞，28个评论后，第一次登陆时的在主界面 调用 **history\_info** 接口，拉去消息列表。可以看到在 **notification** 分类下有 1 条未读消息，在 **social\_events** 分类下有 28 条未读消息。

在 data.msg 数组中，每个类型下都有一条消息。结合界面可以发现，这一条消息就是用来在界面最外面展示的。

![format_png 22][] ![format_png 23][]

第一张图是 **点赞** 消息对应的 消息结构，第二张图是 **评论** 对应的消息接口。

基本可以确定 **蔚来 NIO** 的消息结构里面主要包括

*  read 是否已读。
 *  data 内容信息，博客信息和点赞评论信息。
 *  description 消息描述，这个字段应该是用于 消息推送 的时候的内容。
 *  title 在 App 消息列表中呈现的标题。
 *  scenario 场景，当前场景为关注，点赞、收藏，都在这里面。
 *  like 点赞，comment 收藏
 *  category 类别，应该用来区分 互动类通知 和 系统类通知。
 *  msg\_id 消息ID，因为这样的操作可能会触发消息推送，所以每条需要添加 唯一 ID。
 *  ink\_value 需要跳转到对应的地址 nio:// 这种形式 应该是 客户端的一种方式。

***6. ***实战二

社区帖子添加标签是一个很常用的功能，大部分的社区 App 都有实现，诸如 微博，豆瓣，Oppo社区，理想，蔚来。真正在进入此需求之前，最好了解下相关平台的产品。

![format_png 24][] ![format_png 25][]

以上分别是 豆瓣、蔚来、Oppo社区、理想汽车 的 Tag 展示方案。

*  Tag 可以支持一个或者多个

**开始抓包 分析接口**

![format_png 26][]

后面所贴出的 返回结果针对 Topic 部分JSON， 其他部分省略。

### **豆瓣** ###

![format_png 27][]

豆瓣列表 展示

{
        "topic_label_bg_color":"#F7F7F7",
        "topic_label_bg_img":"",
        "name":"读书时写的有趣批注",
        "topic_icon_large":"",
        "url":"https://www.douban.com/gallery/topic/164512/",
        "uri":"douban://douban.com/gallery/topic/164512",
        "topic_icon":"",
        "topic_label_hashtag_color":"#5DC66F",
        "topic_label_text_color":"#39A94C",
        "type":"gallery_topic",
        "id":"164512"
    }

豆瓣主题详情

{
        "subscription_count": 1267,
        "creator": null,
        "is_subscribed": false,
        "invite_type": "",
        "screenshot_title": "分享海报",
        "screenshot_url": "douban://partial.douban.com/screenshot/gallery/topic/164512/_content",
        "guests": [],
        "card_subtitle": "88篇内容・164.1万次浏览",
        "screenshot_type": "rexxar",
        "id": "164512",
        "is_closed": false,
        "focused_subject": null,
        "topic_label_bg_color": "#F7F7F7",
        "topic_label_bg_img": "",
        "has_create_button": true,
        "group": null,
        "topic_tabs": [],
        "post_count": 88,
        "name": "读书时写的有趣批注",
        "label": "",
        "topic_label_hashtag_color": "#5DC66F",
        "ad_monitor_urls": [],
        "is_ad": false,
        "unpublic_reason": "",
        "participant_count": 92,
        "tags": [],
        "subject_card": null,
        "cover_url": "",
        "introduction": "今天重翻了我从前看的书，对于自己写的批注感到好笑，虽然很多是无厘头的碎碎念，但也很有趣不是么？让我看看你们写的吧，一起分享这快乐！",
        "content_type": 6,
        "is_public": true,
        "topic_label_text_color": "#39A94C",
        "sharing_url": "https://www.douban.com/doubanapp/dispatch?uri=/gallery/topic/164512/",
        "wechat_timeline_share": "url",
        "topic_icon_large": "",
        "click_track_urls": [],
        "uri": "douban://douban.com/gallery/topic/164512",
        "create_button_text": "",
        "topic_icon": "",
        "mask_color": "",
        "mask_type": ""
    }

**核心信息**：类型、跳转地址、名称、文字背景色、文字颜色、文字背景图片、图标，描述，文章发布数

### **蔚来** ###

![format_png 28][]

帖子列表

{
        "name": "EC6提车季",
        "topic_id": "20872"
    }

帖子详情

{
        "topic_id": 20872,
        "topic_name": "EC6提车季",
        "img_url": "https://cdn-app.nio.com/user/2020/9/24/419faa45-35eb-412b-86c1-d4a3cfd33a36.jpeg",
        "summary": "2020年12月31日前(含)参与话题互动，分享你的提车作业或用车体验，每月抽选10位用户各获得500积分奖励",
        "create_user_id": "660135565",
        "create_type": 1,
        "sort_id": 77,
        "ugc_count": 256,
        "attend_user_count": 12640,
        "new_hot_tag": 0,
        "create_time": 1600962984,
        "update_time": 1600997614,
    }

蔚来的 Tag 显示逻辑是，在文章列表页 只是显示比较简单的 Topic 名称和 ID，只是作为展示使用。当进入 Topic 专题页时 拉取当前 Topic 详细信息。

**核心信息**：名称，图片、描述、文章 UGC 数量，参与人数。

### **理想** ###

![format_png 29][]

帖子列表 （右）

{
        "productId": 95830,
        "name": "有理想的假期",
        "browseNum": 0,
        "participantsNum": 0,
        "contentNum": 0,
        "type": 1,
        "topicMark": 1
    }

帖子详情（左）

{
        "success": true,
        "code": 0,
        "data": {
            "productId": 95830,
            "name": "有理想的假期",
            "type": 1,
            "description": "当国庆节遇上中秋节，就迎来了疫情之后的第一个黄金周长假，在家憋了大半年，这次长假你准备好今年的“报复性”旅行了吗？赶紧来分享你的自驾旅途，晒路线、晒美食、晒装备...关键是还有机会赢SWITCH游戏机！",
            "image": "https://p.ampmake.com/aisp/community/aisp/community/6ece59aa-7604-4f52-bcc3-2577f9a9f678.jpg",
            "imageRes": "1600*900",
            "browseNum": 650,
            "participantsNum": 164,
            "contentNum": 273,
            "router": "https://www.lixiang.com/community/detail/topic/95830.html",
            "createdAt": 1601012653000,
            "topicMark": 1
        },
        "msg": "成功"
    }

在进入帖子详情时，会拉取 Tag 详细信息。随后获取当前 Tag 下的帖子。从返回结果 router 字段 可以看出  **理想汽车** 主题实现是通过 H5 进行实现的。

**核心信息：** H5，浏览数，发布数，内容，类型，描述，图片，图片大小

### **Oppo 社区** ###

![format_png 30][]

帖子列表

[{
        "id": 970,
        "name": "抬头，看树！"
    }]

帖子详情

{
        "id":941,
        "name":"我怎么这么好看",
        "weight":1029,
        "status":1,
        "related":0,
        "perm":1,
        "style":0,
        "type":"",
        "guide":"发出你的自拍吧！",
        "description":"发出你的自拍吧！",
        "small_img":"https://imgfs.oppo.cn/uploads/topic/2020/07/31/17315884601.jpg",
        "pc_img":"https://imgfs.oppo.cn/uploads/topic/2020/07/31/17320924401.jpg",
        "big_img":"https://imgfs.oppo.cn/uploads/topic/2020/07/31/17320396101.jpg",
        "insert_time":1596187981,
        "insert_by":15122500992,
        "compere_ids":"",
        "category_id":1,
        "category_name":"人像",
        "group_id":"",
        "related_topic":"",
        "reply":"1.2万",
        "follower":64,
        "thread":"1.3万",
        "read":"33.3万",
        "is_follow":0,
        "username":[
    
        ]
    }

抓包发现，Oppo 社区 部分接口 采用的是 protobuf 协议。不太好抓。对应 的网页 是 Json 的形式

**关键信息：** H5，名称，图片，地址，类型，回复量，参与量，读取，状态。

## 话题选择页 ##

![format_png 31][]

可以看出大致的都差不多可能需要关注的几个点

*  话题有热门非热门的区分
 *  话题具备类型

好了，这篇是抓包工具 Charles 应用的一篇教程，前端和后端的工程师肯定会用到这个工具，大家可以转发、点个在看，以后肯定能用到。

投稿作者：胡川港

知乎主页：www.zhihu.com/people/hu-chuan-gang-58

GitHub主页：https://github.com/xiaoxiunique

![format_png 32][]

Java后端交流群已成立
    公众号运营至今，离不开小伙伴们的支持。为了给小伙伴们提供一个互相交流的平台，特地开通了官方交流群。扫描下方二维码备注 进群 或者关注公众号 Java后端 后获取进群通道。

推荐阅读 1. 张一鸣活捉上班摸鱼员工遭怒怼2. Spring MVC 过时了吗？3. 2W 字详解设计模式4. 连夜撸了一个简易聊天室5. 推荐一款 Java 对象映射神器

[format_png]: /images/20210730/f02f1ecb6665427d8ac9b7bd8c2872c6.png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9vVEtIYzZGOHRzZ2tBV0ZXemtRa1dpYjYzZ2dLZjhlTHZTTEJaRFRHMXZQYVV3aWJrRm9XWnBnc1VIQUlTNXUxa1RpYUpBMXd0aWF5ajhueDloRjRUczhDWmcvNjQw?x-oss-process=image/format,png
[format_png 2]: /images/20210730/d259f499665d4636ad1aae856fe1c0e1.png
[format_png 3]: /images/20210730/a56eced37af046d49776ba244142544c.png
[format_png 4]: /images/20210730/15a093a7ad7c4d158dca5ccf9b74062e.png
[format_png 5]: /images/20210730/577ceb29e4334800b6df1fa42eea3ae4.png
[format_png 6]: /images/20210730/db6127c55903485da40628a11d0c7a85.png
[format_png 7]: /images/20210730/b1d152a641a84b439d6022ac7abc08b4.png
[format_png 8]: /images/20210730/0a2561b044f04f40a47e12d4775159be.png
[format_png 9]: /images/20210730/597ffd023ffe448f865385ad23c61acf.png
[format_png 10]: /images/20210730/5a3355dfedac4c069f2f8826e715c15f.png
[format_png 11]: /images/20210730/c3e465f31bc148d3bbbd4a9212dda9c2.png
[format_png 12]: /images/20210730/a7fe275b91a147709f45dbf3d2e9669f.png
[format_png 13]: /images/20210730/ef753a2c17ca42eaa132cae6968127e0.png
[format_png 14]: /images/20210730/a72a85999cdf4fbd968b185e507e1890.png
[format_png 15]: /images/20210730/a3c42eef80e74c7cbbd4da4ddc43a8b5.png
[format_png 16]: /images/20210730/abdc97fae42544139335f2fa94ada8ef.png
[format_png 17]: /images/20210730/5950ac80558c44928bbedb7b857bc1ad.png
[format_png 18]: /images/20210730/f780caefaf454c41a59727f8860d1b52.png
[format_png 19]: /images/20210730/9ec7b3b5e415416d87f8f71ffb0e587e.png
[format_png 20]: /images/20210730/20887b537f2d4b8e89a2a3f93547d985.png
[format_png 21]: /images/20210730/c6c4a83b60954a69a52204aed6ce06a1.png
[format_png 22]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9vVEtIYzZGOHRzZ2tBV0ZXemtRa1dpYjYzZ2dLZjhlTHZLbXBPbjdsN1RQOXJqR2liZFVZUzZhdktYaWFmQmM3M25yNVE0YVE0dWdMVUJQTHJma2lhaWN2b2RRLzY0MA?x-oss-process=image/format,png
[format_png 23]: /images/20210730/a4a1ec219ab447d58e6377e67854697e.png
[format_png 24]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9vVEtIYzZGOHRzZ2tBV0ZXemtRa1dpYjYzZ2dLZjhlTHYzN0UyMVFXcXFOaWJ0TkUxWGZmTThFTmxveVhpYkh1ckZQVjV4VnZiNlkwWmlhaWN5blhvMzFsQk1nLzY0MA?x-oss-process=image/format,png
[format_png 25]: /images/20210730/3d66873708b14831bebc26a403e6c8e4.png
[format_png 26]: /images/20210730/4731fd21dabc40d698359d3d54dd889b.png
[format_png 27]: /images/20210730/343b991ecbd145f78612691cbcada89b.png
[format_png 28]: /images/20210730/49ee42e0a19d4af4a5bb35ec954529c7.png
[format_png 29]: /images/20210730/0f0956a7c0ee4cf1982ed301a74fe775.png
[format_png 30]: /images/20210730/00fa7e23aa4941278e511b1705b2e397.png
[format_png 31]: /images/20210730/fffeaeaa9d104e62a0d2cf8b00fdbfed.png
[format_png 32]: /images/20210730/6eda04d4560548d8bb73ec1a79236caf.png