21 接口mock实战+ 雪球 app 抓包与 mock 实战

21-3 接口mock实战

1) 课程贴

https://ceshiren.com/t/topic/12400

CHARLES 安装配置

功能

• 支持 SSL 代理
• 支持流量控制
• 支持重发网络请求，方便后端调试
• 支持修改网络请求参数
• 支持网络请求的截获并动态修改
• 可以自动将 json 或 xml 数据格式化，方便查看

下载安装

Charles 官网：https://www.charlesproxy.com/

移动端代理配置 1

• 1.设备和电脑处于同一wifi
• 2.移动端网络设置
  • 服务器 ip 地址
  • 设置端口
• 3.安装证书
  • 系统浏览器访问 chls.pro/ssl
  • iOS：描述文件中安装证书
  • iOS：信任证书

实战内容

参考资料

• charles 官网：https://www.charlesproxy.com/ 6
• win10 系统 charles 证书安装：https://blog.csdn.net/weixin_43291944/article/details/90675879 18
• 接口练习环境：https://httpbin.ceshiren.com/

charles 安装配置

1.确认监听端口

2.把 charles 设置为系统代理（抓电脑上的数据时设置）

3.安装本地证书
入口

windows 配置过程参考帖子
mac 配置

• 选择始终信任
  

4.设置 ssl
入口

设置规则

5.设置移动端抓包
确认远端的开关打开

进入移动端证书安装提示弹窗

查看本地 ip 地址还有charles 监听的端口

移动端设置网络

安装证书：浏览器中输入 chls.pro/ssl 会自动下载，点击下载好的证书，自动安装
charles 中弹出的弹窗选择 allow

抓包分析接口

抓包原理

charles 使用场景

1.移动端测试中：查看接口数据，简单定位 bug
2.接口测试中，对比分析接口请求失败的原因

curl命令挂代理

• curl 命令发起的请求信息 curl --proxy http://127.0.0.1:8080
  
  
  3.mock 测试：mock模拟接口返回的数据

接口分析

实战练习

过滤

• Filter：直接输入过滤的关键词
• Focus：在接口上点击鼠标右键，选择 focus

重发

• 简单重发：选择接口–鼠标右键–Repeat
• 简单压力：选择接口–鼠标右键–Repeat Advanced
  

修改请求

选择接口–鼠标右键–Compose

弱网测试

入口

设置

断点

设置方式

入口

课后练习

• 1.配置好 charles，安装好证书
• 2.练习课上的小例子

21-4 雪球app抓包与mock实战

课程贴：https://ceshiren.com/t/topic/12496

课堂 ppt
https://pdf.ceshiren.com/xly4/雪球app抓包与mock实战

实战内容

参考资料

• mitmproxy 官网：https://mitmproxy.org/
• 环境切换演练环境
  • 前端 http://stuq.ceshiren.com:8081/#/mapLocal
  • 开发环境接口 http://stuq.ceshiren.com:8089/report/showMapLocal
  • 测试环境接口 http://stuq.ceshiren.com:9098/report/showMapLocal

1）charles mock 实战

MOCK 原理与实用场景

• 应用场景
  • 第三方系统数据交互
  • 前后端数据交互
  • 硬件设备解耦
• 优点
  • 不依赖第三方数据
  • 节省工作量
  • 节省联调

应用场景

MOCK 核心要素

• 匹配规则：确定那些接口的哪些数据进行修改
• 模拟响应：将对应匹配规则的内容进行篡改，按照案例模拟需要的响应内容

rewrite

原理

url 的组成

设置方法

1. Tools → Rewrite
2. 勾选 Enable
3. 点击下方 Add 按钮新建规则
4. 在右侧制定重写规则
5. 点击 ok 生效
   

使用场景

• 动态修改响应数据

map local

原理

操作步骤

1. 准备本地的接口响应数据
2. 配置 MapLocal

• Map From ：填写要匹配的接口信息
• MapTo：选择本地文件

应用场景

• 大部分的修改响应数据推荐使用

map remote

原理

MAP REMOTE 实战

• 访问百度，转发至豆瓣
• 访问开发环境，转发至测试环境
  • 前端：http://stuq.ceshiren.com:8081/#/mapLocal
  • 开发环境接口：http://stuq.ceshiren.com:8089/report/showMapLocal
  • 测试环境接口：http://stuq.ceshiren.com:9098/report/showMapLocal

操作步骤

1. 选择接口，鼠标右键，选择 Map Remote，进入到设置界面
2. 填写接口信息
   

3.点击 ok 生效

应用场景

• 切换不同的测试环境

2）mitmproxy 安装配置

安装

1. python 环境：3.8
2. mitmproxy 版本：5.2.0

优先用第一种方式

pip install mitmproxy==5.2.0

第二种

pip install pipx
pipx install mitmproxy==5.2.0

环境验证

mitmdump --version

证书配置

1. 启动 mitmdump 工具
2. 配置网络代理
   
3. 浏览器中访问 mitm.it 配置证书
4. 选择对应的系统下载证书安装（安装过程同 charles）

移动端证书

1. 在手机配置代理，ip 配置为电脑的 ip 地址，端口配置为 mitmproxy 监听端口，默认 8080。
2. 启动 mitmprxy。
3. 在手机浏览器输入地址 mitm.it。
4. 选择 Android，下载并安装，即可成功抓取手机端的 https 的数据包。

MITMPROXY MOCK 实战

核心工具介绍

三大核心工具

• mitmproxy
  • 注意：不支持 windows
• mitmweb
• mitmdump

备注：主要以 mitmdump 的使用为主

MITMDUMP 参数介绍

• -s 参数，执行 python 脚本
• -p 参数，指定监听端口，默认监听8080

核心组件

• Addons(插件)
  https://docs.mitmproxy.org/stable/addons-overview/
  
  编写一个python文件供给mitmproxy加载，文件中定义addons列表，列表中调用定义的类的实例，在发请求时出，调用request方法

• Events（事件）
  https://docs.mitmproxy.org/stable/addons-events/
  

mock 原理

demo

map local

map local 百度

from mitmproxy import http

# request 名称不能修改
def request(flow: http.HTTPFlow) -> None:
    # 发起请求，判断 url 是不是需要进行 maplocal 的路径
    if flow.request.pretty_url == "https://www.baidu.com/":
        # 自己创建一个 response
        flow.response = http.HTTPResponse.make(
            200,  # 响应状态码
            b"Hello World",  # 响应体
            {"Content-Type": "text/html"}  # 响应头信息
        )

map local 雪球

from mitmproxy import http

# request 名称不能修改
def request(flow: http.HTTPFlow) -> None:
    # 确定 mock 的接口条件
    if "quote.json" in flow.request.pretty_url and "x=" in flow.request.pretty_url:
        # 打开保存在本地数据文件
        with open("/Users/mac/Desktop/quote.json") as f:
            flow.response = http.HTTPResponse.make(
                200,  # 响应状态码
                # 响应体
                f.read(),
                # 修改响应头信息
                {"Content-Type": "application/json"}
            )

rewrite

import json

from mitmproxy import http

def response(flow: http.HTTPFlow):
    # 确定 mock 的接口条件
    if "quote.json" in flow.request.pretty_url and "x=" in flow.request.pretty_url:
        # 拿到响应数据，转换为字典格式，保存到 data 变量中
        data = json.loads(flow.response.content)	# json.loads()=>将字符串转换为字典结构
        # 修改第一支股票的名称
        data['data']['items'][0]['quote']['name'] = "hogwarts"
        data['data']['items'][1]['quote']['name'] = "hogwarts0000002"
        data['data']['items'][1]['quote']['current'] = "0.01"
        # 把字符串格式的内容赋值给 response 的原始数据格式
        flow.response.text = json.dumps(data)

启动脚本

mitmdump -p 监听端口 -s python文件路径

课后练习

1. 用 Charles MapLocal 修改雪球行情页的股票名称改为自己的名字
2. 用 Charles Rewrite 实现股票颜色变换的的边界值测试

提交设置界面和效果的截图

其他

• https默认端口443
• http默认端口80

• 正则表达式修改信息
  

• 正则匹配
  \d+.\d+

\d 数字
+不管一位还是多位数字

• 修改头信息

• 增加请求信息

• map remote 切换环境

• map local

• map remote