首页 > 其他 > 详细

Charles 安装使用

时间:2021-03-29 15:28:19      阅读:37      评论:0      收藏:0      [点我收藏+]

目录

  一、Charles 原理

  二、Charles 安装

  三、Charles 的证书下载(web)

    3.1 为什么下载charles的ssl证书

    3.2 配置charles 步骤

    3.3 charles 的功能操作

      3.3.1 断点调试

      3.3.2 本地修改

      3.3.3 弱网调试

      3.3.4 模拟403\404

      3.3.5 屏蔽web网页的抓包信息

      3.3.6 关注接口

      3.3.7 简单压力测试

  四、charles的证书下载(模拟器)

    4.1 断点测试

    4.2 弱网测试

    4.3 关注接口

    4.4 压力测试

    4.5 模拟403/404

    4.6 本地修改

    4.7 屏蔽模拟器抓包信息

  五、charles的证书下载(app)

    5.1 为什么下载charles的ssl证书

    5.2 证书下载

      5.2.1 断点测试

      5.2.2 简单压力测试

      5.2.3 弱网测试

      5.2.4 屏蔽手机端抓包信息

      5.2.5 模拟403/404

      5.2.6 关注接口

      5.2.7 本地修改

一、Charles 原理

  技术分享图片

 

 

 

  HTTPS抓包的原理还是挺简单的,简单来说,就是Charles作为“中间人代理”,拿到了 服务器证书公钥 和 HTTPS连接的对称密钥,前提是客户端选择信任并安装Charles的CA证书,否则客户端就会“报警”并中止连接。这样看来,HTTPS还是很安全的。

  说白了就是Charles既能拦截发起的请求,也能拦截返回的响应

二、Charles 安装

  点击安装文件charles-proxy-4.2.8-win64.msi

  技术分享图片

 

 

   点击下一步

  技术分享图片

 

 

   勾选同意,点击”next”按钮

  技术分享图片

 

 

   指定安装的路径,继续点击”next”按钮

  技术分享图片

 

 

   点击“install” 按钮

  技术分享图片

 

 

   等待安装

  技术分享图片

 

 

   点击”Finish”按钮

  技术分享图片

 

 

 三、Charles 的证书下载(web)

  3.1 为什么下载charles 的 ssl 证书

  默认情况下,charles不能解析https协议的接口,里面的请求和响应数据都是乱码格式,所以我们需要下载ssl证书,来获取里面的数据

  技术分享图片

 

 

   3.2 配置Charles 步骤

  点击help,选中ssl Proxying ,点击Install Charles Root Certificate

  技术分享图片

 

 

   点击”安装证书”按钮

  技术分享图片

 

 

   点击”下一步”按钮

  技术分享图片

 

 

   选中”将所有的证书都放入下列存储”,点击”游览”按钮

  技术分享图片

 

 

   选中”受新任的根证书颁发机构”,点击”确定”按钮

  技术分享图片

 

 

   点击”下一步”按钮

  技术分享图片

 

 

   点击”完成”按钮,导入成功

  技术分享图片

 

 

   点击”proxy”按钮,选中Proxy Settings

  技术分享图片

 

 

   勾选允许传输http代理,接着点击”OK”按钮

  技术分享图片

 

 

   点击’proxy”按钮,选中SSL Proxyig settings

  技术分享图片

 

 

   点击勾选运行代理,点击“add”按钮

  技术分享图片

 

 

   填写Host和Port都为*,正则表达式为匹配所有,再点击”OK”按钮

  技术分享图片

 

 

   重启Charles,即可

  技术分享图片

 

 

   验证是否可以获取web端的https接口

  技术分享图片

 

 

   查看Charles

  技术分享图片

 

 

   3.3 Charles 的功能操作

  断点测试

  本地修改

  弱网测试

  模拟403\404

  关注接口

  屏蔽wb 网页的抓包信息

  简单压力测试

  技术分享图片

 

 

   3.3.1 断点测试

  方法一:breakpoints (修改request)

  1. 接口处 鼠标右击, 选择breakpoints (允许本接口使用breakpionts功能)

  技术分享图片

 

 

   2. 开始设置断点值

  技术分享图片

 

 

   技术分享图片

 

 

   技术分享图片

 

 

   3. 重新请求接口 (charles的界面变为可编辑状态),修改请求参数,执行请求

  技术分享图片

 

 

   技术分享图片

 

 

 

  4. 拦截请求并模拟可独断发送请求成功

  技术分享图片

  方法二: breakpionts (修改response)

  1. 接口处 鼠标右击,选择breakpionts (允许本接口使用breakpionts 功能)

  技术分享图片

 

 

   2. 开始设置断点值

  技术分享图片

 

 

   技术分享图片

 

 

   3. 重新请求接口 (charles的界面变为可编辑状态),修改请求参数,执行请求

  技术分享图片

 

 

   技术分享图片

 

 

   4. 拦截响应并模拟服务端返回响应成功

  技术分享图片

 

 

   3.3.2 本地修改

  对于maplocal 功能的理解

  接口返回值通过抓包工具处理成了 一个本地文件。这个本地文件中的设定值被作为接口返回值了

  1. 复制 response 内容,保存为.txt文件,存在电脑本地

  技术分享图片

 

 

   技术分享图片

 

 

   注意:

  保存为 .txt后, 将文件“另存为” 编码方式选择 utf-8,否则接口可能无法识别汉字导致出现乱码

  2. 在本地修改 txt 文件

  技术分享图片

 

 

   3. 修改response 指向 (选中需要修改response值得接口后点击右键, 选中maplocal 功能)

  技术分享图片

 

 

   技术分享图片

 

 

   4. 完成后重新刷新页面, 效果如下

  技术分享图片

 

 

   5. 不用的时候, 关掉maplocal

  技术分享图片

 

 

   3.3.3 弱网测试

  1. 模拟超慢网速(会导致接口数据返回超时的那种)

  设置带宽的延迟时间(毫秒)

  注:可以根据下图中的翻译体会下导致网络延迟的原因:

  技术分享图片

 

 

   技术分享图片

 

 

   选择最慢的网速进行测试

  技术分享图片

 

 

   你会发现页面一直再转圈圈

  技术分享图片

  3.3.4 模拟403\404

  1. 右击网站的包选择 blacklist

  技术分享图片

 

 

   选择 tools------>blacklist

  技术分享图片

 

 

   技术分享图片

 

 

   模拟403

   技术分享图片

 

 

   技术分享图片

 

 

   模拟404

  技术分享图片

 

 

   技术分享图片

 

 

   3.3.5 屏蔽web网页的抓包信息

  应用场景:屏蔽web 网页的抓包信息

  proxy--> windows proxy(前面没有对钩,就不会抓到PC;浏览的包)

  proxy--> macOS proxy(mac 电脑)

  打钩代表抓取web端

  技术分享图片

 

 

   不打钩代表抓取 APP 端

  技术分享图片

 

 

   3.3.6 关注接口

  抓包列表中有好多抓包结果是我们不会关注的,用下面的方法可以让这些我们不关注的接口在列表中隐藏

  1. 添加关注接口

  技术分享图片

 

 

   技术分享图片

 

 

   2. 启动关注接口

  技术分享图片

 

 

   3. 重新抓包结果

  不在上一步配置中的接口,都会隐藏在other host 中

  技术分享图片

 

 

   3.3.7 简单的压力测试

  这个只需要进行简单的了解,因为压力测试有专门的测试工具 jmeter

  接口请求次数,并发量,请求延时时间均可配置

  1. 选中需要进行测试的接口, 鼠标右键,选中【repeat advance】

  技术分享图片

 

 

   2. 选择接口进行测试,这里我选择10次

  技术分享图片

  3. 结果如下

  技术分享图片

 

 

四、Charles 的证书下载(模拟器)

  注意:当你的模拟器ip发生修改以后需要再设置代理时修改对应的ip, 同时再打开Charles时会弹出一个提示,问你是否允许捕捉app接口,你需要点击是,不然在模拟器中浏览器百度会打不开

  1. 打开夜神或雷电模拟器

  技术分享图片

 

 

   2. 去掉window proxy 的勾选项(对app端测试)

  技术分享图片

 

 

   3. 点击勾选proxy 选中proxy setting

  技术分享图片

 

 

   4. 启动 http 代理端口(默认8888)

   技术分享图片

 

 

   5. 在help中勾选SSL Proxying 中的 Mobile Device 安装

  技术分享图片

 

 

   6. 显示如下图所示信息

  技术分享图片

 

 

   7. 点击设置按钮

  技术分享图片

 

 

   8. 点击WiFi

  技术分享图片

 

 

   9. 长按已连接的wifi并点击修改网络

  技术分享图片

 

 

   10. 勾选高级选项

  技术分享图片

 

 

   11. 选中手动并填写代理信息

  技术分享图片

 

 

   12. 打开模拟器中的浏览器并输入网址:chls.pro/ssl , 下载证书

    输入网址后会自动下载证书,成功后下拉菜单点开,效果入选

  技术分享图片

 

 

   点击确定后会显示证书已经安装

  13. 打开模拟器上的浏览器进行百度搜索,观察Charles捕获的接口

  技术分享图片

 

 

   4.1 断点测试

  14、拦截请求模拟客户端发送请求

   技术分享图片

 

 

   技术分享图片

 

 

   技术分享图片

 

 

   技术分享图片

 

 

   
  14.1 点击ok后,重新刷新模拟器百度页面,效果如下

   技术分享图片

 

 

   14.2 修改参数并重新刷新页面

  技术分享图片

 

 

   技术分享图片

 

 

   到这里拦截客户端请求并模拟客户端发送请求就成功了!!!

  4.2 弱网测试

  1、点击proxy---->Throttle Settings

  技术分享图片

 

 

   2. 选择最慢,进行测试

  技术分享图片

 

 

   你会发现网页很慢很慢

  技术分享图片

 

 

   

  4.3 关注接口

  技术分享图片

 

 

   技术分享图片

 

 

   4.4 压力测试

   技术分享图片

 

 

   技术分享图片

 

 

   效果如下

  技术分享图片

 

 

   4.5 模拟403\404

   技术分享图片

 

 

   技术分享图片

 

 

  模拟404

  技术分享图片

 

 

   技术分享图片

 

 

   效果如下

  技术分享图片

 

 

   模拟403

  技术分享图片

 

 

   效果如下

  技术分享图片

 

 

   4.6 本地修改

  1. 右键点击捕捉的接口,选择保存在本地

  技术分享图片

 

 

   2. 编辑修改本地文件,并保存

  技术分享图片

 

 

   3. 右键点击捕捉的接口,选择map local

  技术分享图片

 

 

   技术分享图片

 

 

   4. 刷新页面

  技术分享图片

 

 

   4.7 屏蔽模拟器抓包信息

  1、不打勾表示捕捉app端接口

  技术分享图片

 

 

   2. 打勾表示捕捉web端的接口

  技术分享图片

 

 

 五、charles 的证书下载(APP)

  5.1 为什么下载charles的证书

  默认情况下,charles不能解析https协议的接口,里面的请求和响应数据都是乱码格式,所以我们需要下载ssl证书,来获取里面的数据

  技术分享图片

 

 

   5.2 证书下载

  前提:保证电脑和手机在同一网络段(手机和电脑连接同一个wifi/热点)

  1. 在proxy中找到proxy settings

  技术分享图片

 

 

   2、设置端口port以及勾选Enale transparent HTTP proxying

  技术分享图片

 

 

   3. 在proxy中找到SSL proxy settings

  技术分享图片

 

 

   4. 新增https对应的host以及端口号

  这里的端口号最好改为*

  技术分享图片

 

 

   5. 点击help选择ssl Proxying,点击第三个(下载移动端证书)

  技术分享图片

 

 

   6. 弹出对应的ip和端口

  技术分享图片

 

 

   7. 设置移动端代理

  技术分享图片

 

 

       技术分享图片

  设置完代理,打开Charles后会有一个弹窗

   技术分享图片

 

 

   选择是,手机才能访问百度

  8、使用手机下载ssl证书,用手机游览器输入:chls.pro/ssl,前往

  技术分享图片

 

 

   技术分享图片

 

 

   9、验证是否能抓到app端接口

  技术分享图片

 

 

   技术分享图片

 

 

   5.2.1 断点调试

  1、开启breakpoints

  技术分享图片

 

 

   技术分享图片

 

 

   技术分享图片

 

 

   2. 刷新页面,并修改参数

  技术分享图片

 

 

   效果如下

  技术分享图片

 

 

   5.2.2 简单压力测试

  技术分享图片

 

 

   技术分享图片

 

 

   效果如下

  技术分享图片

 

 

   5.2.3 弱网测试

  技术分享图片

 

 

   技术分享图片

 

 

   效果如下

  技术分享图片

 

 

   5.2.4 屏蔽手机端抓包信息

  1. 不打勾表示捕捉手机端抓包信息

  技术分享图片

 

 

   2. 打勾表示捕捉web抓包信息

  技术分享图片

 

 

   5.2.5 模拟403/404

  技术分享图片

 

 

   技术分享图片

 

 

   模拟403

  技术分享图片

 

 

   技术分享图片

 

 

   模拟404

  技术分享图片

 

 

   技术分享图片

 

 

   5.2.6 关注接口

  技术分享图片

 

 

   技术分享图片

 

 

   5.2.7 本地修改

  技术分享图片

 

 

   技术分享图片

 

 

   在本地修改txt文件为 美好的一天从学习开始!

  技术分享图片

 

 

   技术分享图片

 

 

   效果如下

  技术分享图片

 

Charles 安装使用

原文:https://www.cnblogs.com/xinzaiyuan/p/14592214.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!