相关章节
10、https乱码
乱码的原因是缺少 https 证书
10.1 在macOs上安装 https 证书
下面点安装步骤是 macOs 上的 先要安装证书
菜单栏--》 help --> SSL Proxying --> install charles root certificate
第一安装 会弹出提示
这个提示不用管，我们会通过手动的方式对证书添加信任，请一定一定要使用搜索，我自己找这个证书项找半天,我都怀疑我charles 版本不对，都重新安装了一遍了 【笑哭了.png】
设置以后，重启charles
10.2 设置端口，host
安装PC版的证书以后，查看 https的内容，还是乱码， 需要进一步设置
一定要勾选
Proxy-> SSL Proxying Settings->SSL Proxying:勾选Enable SSL Proxying
通用设置，拦截所有站点 443端口
mac可能需要输入一次用户密码才能设置通过
可以看到简书的这个站点端口不是 443 那么我们要单独设置一下
此时，再看，就可以正确看到https的相应正文了
❝有的站点并不是一成不变的443端口，我们也可以直接设置host 不设置* 号， 设置具体的host地址和端口
注意，有的请求抓包无效果，会在右侧的 Overview 面板的 Notes 有提示，一般都是说 host 没有加入到我们的名单中（SSL Proxying Sttings）
10.3 上面的操作都设置，发现没有请求在控制面板中
请注意检查,是不是无意中将 stop recording 关了， 这个按钮标示不再抓包
下图是 正常运行点，点亮再次查看是否有请求在 Structure 面板中
10.4 window上安装 https证书-PC版
https://www.cnblogs.com/fighter007/p/9152832.html
11. 代理数据
11.1 localhost 无法被代理的解决办法
这个和操作系统有关，有2种解决方式 假如本地开发起了一个 8080的服务
http://localhost:8080
- url地址使用 http://本机ip:8080 例如： http://129.168.1.8:8080
❝mac查看本机ip， 终端， ifconfig
- 添加一个本地域名 将 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
11.2 将本地的一个json格式数据代理到接口返回--做接口拦截
场景描述： 开发环境，数据库没那么多数据，又不想写SQL，假装不会，哈哈哈
新建一个 txt文件 或者json文件， 将数据代理到刚才的接口中
要求，数据是严格的JSON格式 在线JSON校验
data.txt
[ { "id":1, "name":"张三" }, { "id":2, "name":"李四" }]
再次请求，发现数据已经不走服务端，而直接被代理到本地了
注意： 如果要代理的本地文件找不到或者接口所需要的数据在 txt 中不是严格的json 则继续走原来系统中的， 忽略map local
11.3 将线上的数据代理到本地进行调试
❝线上的生产库数据，在某个环节/界面报错， 将某个接口数据代理到本地，本地的代码是开启source-map 的，可以直接进行debug
❝某些数据，在2个系统中都可以用，我们差不多的系统，直接拿源代码进行迁移，但是在做版本copy， 新版本中，可能由于后台还未能将数据导入到现在到库中， 可以使用代理的方式，达到数据先行，直接开发
❝生产环境js报错， 无法很好的调试，代理到本地进行加载调试；
缺点: 线上的js和本地的js是一致的，不能被混淆，压缩； 如果通过 webpakck进行打包过，打包上线关闭source-map 则这个场景无法实现，因为文件名已经不一致，导致代理失效
对应演示
先演示将A系统的数据代理到B系统，并进行返回
本地有2个服务 http://localhost:8080 还有一个 http://localhost:3001
都有 /getList接口， 现在8080 端口的服务请求后台数据库的数据，因为还没做数据的初始化，目前为空； 想直接用现成的 3001 服务的数据
目的： 将 3001 服务的数据作为数据源，代理到 8080 服务
效果
11.4 线上代理到本地环境，token鉴权怎么解决
上面11.3 演示到只是没有接口鉴权的场景， 如果后台每个 请求接口都先进行权限验证，如果验证不通过，则直接打回，不去访问数据库，则凉凉； 我们知道 开发环境的token 和线上部署应用的token 绝对是2个不同的
线上环境 用户的toke 是 1xxxxx
本地登陆后，后台生成的token 是 2xxxxxx
charles 操作步骤
知识点：
- map remote 代理接口 （本地代理到线上）
- rewrite 重写请求头 （解决token鉴权问题）
操作步骤：
打开charles
为了查看方便， 我们只记录 我们想要的接口地址 Proxying--》 Recording Settings--》include
http://a.b.c.com:3001 不会设置的看 第8步骤
这里 a.b.c.com:3001 其实就是 http://localhost:3001 增加本地域名 见 11.1
为了排除一些干扰项 禁用缓存 Tools--> No Cathing
设置代理远程接口 Tools --> Map remote
5、重写请求头 一旦我们设置了map remote 那此时的接口就不能理解为是 dev环境发送请求，就应该理解是 我这个接口现在就是线上生产环境的， 所以，下面 重写请求头 就必须使用线上地址
这里是非常关键的
- 我们要重写token 就是去以开发环境的身份伪造请求，那么我们需要修改 请求头
- Match 是匹配项 我们就想重写 header 中 token 的这个值 这里只是举例，其实你可以匹配value ； 因为我们这里的场景就是我就用线上的token 就行了 我不关心开发环境产生的token 所以，这里的 value 我不用填写
- Replace 中的value 一定是 我们线上我们想代理的接口的token 这里千万不要用本地开发环境产生的token 因为，这样 请求接口校验一定是校验不通过的， 那么在我们完整的登陆鉴权流程中，就会将我本地的用户 退出登陆
- 直接访问，现在我们通过起本地环境，成功通过重写请求头中的token 伪造了登陆， 拿到了线上生产库的数据
注意：
- 我们通过代理线上的【查询接口】的数据在本地调试，是没啥问题的， 但是一旦代理 【提交】接口的数据，那是具有风险的，你查询，不管查询多少遍，接口具备幂等性，是不会产生影响的， 但是你提交接口，直接就修改了当前数据的状态，可能你就直接帮用户调用了 退单接口（假如用户辛辛苦苦算好优惠价格组合了， 打开app一看，数据丢失，mmp 就来了）
- 还有 如果是纯前端，不太懂后台的，这种操作风险极高， 因为有的业务逻辑可能影响几张表，几个系统，那么一个失误的操作，可能就是一堆的 后台，测试人员围着你这条数据进行排查了
12、charles 抓取app数据
抓手机上的包，电脑和手机要在同一局域网 菜单栏--》 help --> SSL Proxying --> install charles root certificate on a mobile device or remote browser
前提条件：
- 手机和电脑在同一局域网下
- 手机同样需要安装 证书
手机安装证书步骤：
- charles 打开 顶部菜单 help --> SSL Proxying
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
❝证书问题，检查 步骤 10
二、抓不到包
❝检查 步骤2，步骤 4， 步骤7 这3个地方
三、数据只记录到根路径，子路径没被记录
❝查看 9 断点中的讲解
四、一个站点数据只记录几个，好多需要的资源没被记录
❝现在的站点资源可能来源多个域名下，先检查 Recording Settings 中有没有将目标站点的 host都添加上
五、charles 导入了证书， 证书已经被设置为信任，依旧乱码
❝检查 Proxy --> SSL Proxying Settings 是不会没添加 启用 SSL proxy 代理，然后添加 *:443
六、在手机端，证书传到手机来，浏览器打开没有自动安装
-
将证书发送到微信聊天中，点击试试，看能否安装
-
重新下载其他浏览器试试， 类似QQ浏览器，UC浏览器
-
手动安装证书
七、本地代理线上接口，有token的情况下，总是失败
核对 11.4 中的讲解重点
八、官网下载的charles 用了几天就频繁闪退
❝老弟，该交钱了，用旧版本的，或者盗版的就没问题
