Charles原理 以及 抓取WEB HTTPS 并操作

Charles原理

1. 客户端向服务器发起HTTPS请求
2. Charles拦截客户端的请求，伪装成客户端向服务器进行请求
3. 服务器向“客户端”(实际上是Charles)返回服务器的CA证书
4. Charles拦截服务器的响应，获取服务器证书公钥，然后自己制作一张证书，将服务器证书替换后发送给客户端。(这一步，Charles拿到了服务器证书的公钥)
5. 客户端接收到“服务器”(实际上是Charles)的证书后，生成一个对称密钥，用Charles的公钥加密，发送给“服务器”(Charles)
6. Charles拦截客户端的响应，用自己的密钥解密对称密钥，然后用服务器证书公钥加密，发送给服务器。(这一步，Charles拿到了对称密钥)
7. 服务器用自己的私钥解密对称密钥，向“客户端”(Charles)发送响应
8. Charles拦截服务器的响应，替换成自己的证书后发送给客户端
9. 至此，连接建立，Charles拿到了服务器证书的公钥 和 客户端与服务器协商的对称密钥，之后就可以解密或者修改加密的报文了。
   HTTPS抓包的原理简单来说就是Charles作为"中间代理人"，拿到了服务器证书公钥和HTTPS连接的对称密钥，前提是客户端选择信任并安装Charles的CA证书，否则客户端就会“报警”并终止连接，

Charles安装

• 官方网站：www.charlesproxy.com/

• 直接安装就完事儿了
  

• 运行Charles bin目录下的 Charles.exe 或者搜索应用 Charles 即可运行
  (不知道为什么图标和Charles logo不一样)
  

Charles功能(一部分)

1. 通过断点调试可以 修改request 以及 response
2. 可以本地修改response 完成重定向 （Map Local）
3. 进行弱网测试 Throttle Settings 加载不出来的时候给提示信息 但是程序不可以崩溃
4. 模拟 404 403 的情况 (Black List)
5. 简单的压力测试 (Advance Repeat) 不过我们一般使用Jemeter等工具进行压测
6. 等等…

面试题你用Charles 做过什么

1.类似登录的 所有输入框中有长度限制的 我们需要跳过前台的验证去测试后台是否 做了判断
2. 一些类似食品的图片展示的文字描述 ，规定 3行之后使用小数点省略 ，如果数据库中没有超过三行长度的数据 ，我们可以修改数据库进行测试。但是有的公司不允许修改数据库，而且如果是上线了的话数据库是不可以修改的 所以找通过Charles 抓取HTTPS respone (breakpoints 或 map local)进行测试
3. 根据响应的状态码 我们可以定位是前端还是后端的问题 这就需要对 状态码了解
4. 弱网测试 throttle settings 如果网络不好加载不出来数据的时候 显示友好提示 不可以导致系统崩溃
5. 等…

Charles抓取WEB HTTPS 并简单操作

按钮解释

1. 扫把 clear the Current Session 把当前会话的记录删除
2. Start / Stop Recoding 亮了就是 拦截 灰了就是不拦截
3. 乌龟 Start/Stop Throttling 开启或关闭弱网测试
4. Enable/Disable BreakPoints 开启或关闭断点调试
5. 🖊 Compose a bew request based on the selection 修改选中的请求并作为新的请求执行，Charles内返回响应

1.下载WEB SSL Proxy证书 开启Proxy

1. Help > SSL Proxying > Intall Charles Root Certificate

    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201201193451862.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4MTQ3NQ==,size_16,color_FFFFFF,t_70)
   

2. Proxy > Proxy Setting 选中 开启透明http代理 给一个端口号 不冲突即可 8888

3. Proxy > SSL Proxy Settings 添加Location *:443 拦截所有ip 的 https 请求

    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201201193522653.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4MTQ3NQ==,size_16,color_FFFFFF,t_70)
   

4. 现在访问网络的话就会被Charles 抓取到
   

5. 这里的视图 分为了一个Host 和 Other Hosts ，实际情况会经常用到 因为我们要测试的接口可能是在上百各种的一个
   View > Focused Host > Add 需要的host

2. 通过BreakPoints 断点调试 修改 HTTPS request

1. 选中测试的URL 右键 点击BreakPoints 开启断点调试

2. 再次右键 COPY URL

    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201201194327983.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4MTQ3NQ==,size_16,color_FFFFFF,t_70)
   

3. Proxy > BreakPoints Settings > 选中Enable BreakPoint

4. 点击Add 讲URL 复制到 Host中 再点击其他随便一个输入框 自动完成格式化
   

5. 将 Qeury 参数改为 * 意思是匹配所有的传参

6. 选中Request 即拦截 HTTPS Request

7. 再次刷新页面 Charles 跳转进入BreakPoints
   

8. 点击 Edit Request 即可修改 请求的 请求数据 ()
   

9. 点击 Execute 执行 即可发送修改后的请求
   

3. 通过BreakPoints 断点调试的方式修改 Https Response

1. 与通过 BreakPoints 修改 request 类似 ，选中一个url 右键 开启断点调试

2. 右键 Copy URL

3. Proxy > BreakPoints Settings > Add 复制url 修改 参数 之后 选中 response
   

4. 刷新页面
   response 被拦截 了 我还以为网络不好 结果等了半个小时 真开心 🙂
   

5. 点击这个Edit Response 可以修改 下方的 选项 响应头 ， cookie ， 和响应正文 (text文本显示 / html 格式显示)

6. 点击execute 执行 发送响应到浏览器

4. 通过 🖊 rewrite 的方式 修改 HTTPS request

1. 选中一个 url 点击 pencal 🖊
   

2. 就可以修改请求参数 等信息

   

3. 修改之后点击 execute 执行 即可在 Charles 客户端直接响应 点击response 即可查看响应
   

5. 通过map local 的方式 本地存储修改 response 可以实现重定向

1. 选中一个url 右键 点击 save response
   

2. 可以txt 或其他文件格式 保存

3. 修改本地保存的文件 保存的时候 以utf -8 的格式保存，防止乱码

4. 选中url 右键 选择 map local
   

5. 修改 参数为 * 匹配所有的参数 选择map to 为自己修改的保存的文件 甚至可以是任何一个其他的文件 ，
   

6. 刷新请求路径 响应的就是 我们修改后的的文件内容

7. 如果想要关闭的话 在 Tools > Map Local 即可关闭map local 或者 移出对某一个url的响应修改

8. 

   

6. 模拟弱网环境

1. Proxy > Throttle Setting

   

2. 选中 Enable Throttling 即可修改网络 从上到下网络变快
   各种参数也可以自行调整
   

3. 发现小乌龟图标绿了 而且sleeping 弱网模式开启了 刷新页面 即可查看效果

7. 模拟 404 403

1. 选中url 右键 选择 开启 Black List 黑名单列表

2. Tools > Black List
   选中Enable Black List 可以选择 Drop connection 404 或者 Return 403 response
   
3. 点击ok 之后 刷新页面 即可实现模拟 404 / 403

Tips

1. Focused Host

   
   项目中我们要测试一个接口 可能要从很多接口中去找 所以我们可以选中聚焦于一个接口
   View > Focused Hosts 添加接口即可

2. 视图中显示request 和 response

   edit > Perferences > Viewers 取消勾选 第二个 combine request and response
   不结合 让 reqeust 和 response可以单独显示