目录1 网络资源和URL介绍1.1 网络资源1.2 URL介绍2 网络传输协议2.1 HTTP2.1.1 http请求2.1.1.1 请求行2.1.1.2 请求头2.1.1.3 请求体2.1.2 响应2.1.2.1 响应行2.1.2.2 响应头2.1.2.3 响应体3 F12查看页面网络数据包4 Charles抓取数据包4.1 抓包4.2 Charles4.2.1 介绍4.2.2 使用操作4.2.2.1 浏览器设置代理4.2.2.2 Charles开启代理4.3 前后端bug定位4.4 模拟弱网测试模拟带宽比较低的网络测试延迟4.5 异常数据测试绕过界面直接测试服务器5 抓取HTTPS的数据包5.1 Web端抓HTTPS的数据包5.2 手机端抓取HTTP的数据包5.3 手机端抓取HTTPS的数据包1 网络资源和URL介绍1.1 网络资源1、利用网络可以获取任何任何信息资源eg浏览器输入百度域名就可以打开百度的首页2、资源通过URL表示1.2 URL介绍1、URL(Uniform Resource Locator)统一资源定位符用来表示网络中资源存放的位置2、URL的组成1协议必按照什么规则通信的应用服务。用 :// 分隔egHTTP超文本传输协议除了传输文字之外其他都能传输的一种、HTTPS加密的传输访问网页一般默认转成https给你数据加密【扩展传输文件有FTP远程访问SSH】2域名或主机必访问的资源服务器的IP或域名。egwww.baidu.comwww表示万维网即互联网jd表示指定某一个服务器com代表是一个商业还是什么类型的为了人好记才发明的域名IP地址和域名的关系计算机之间互相通讯只认IP地址IPxxx.xxx.xxx.xxx代表计算机在网络中的位置域名的背后对应唯一的IP地址即www.baidu.com对应唯一的IP地址通过翻译者DNS来进行翻译3端口必标识特定的应用程序/服务程序通信的出入口。一般浏览器访问的时候不显示端口号egHTTP默认端口80:80HTTPS默认端口443:443端口一般和提供的服务有关通常是数据通信相关的服务web服务本质上是web服务对应的软件系统4资源路径可选存放的具体路径用 / 进行分隔5查询参数可选请求携带的参数。通过进行分隔多个参数之间通过符号连接参数名参数值eghttps://www.baidu.com①一般使用默认的端口号:443且不显示 ②找到html的文件 ③用分隔查询参数q手机3、URL表示形式协议://hostname[:port]/path/[?查询参数1查询参数2]2 网络传输协议1、协议网络中数据传输遵循的规则常见协议HTTP/HTTPS、SSH、FTP等2.1 HTTP1、HTTP(Hyper Text Transfer Protocol)超文本传输协议超越文字和数字一般指代图、视频、音频、动画网络中传输类似于网页类型的文档的协议2、HTTP访问过程①HTTP请求请求行、请求头、请求体②HTTP响应响应行、响应头、响应体3、http请求①请求行请求数据包的第一行内容②请求头从第二行到空行之间内容③请求体空行下方的内容4、http响应①响应行响应数据包第一行内容②响应头从第二行开的到空行之间内容③响应体空行下方的内容2.1.1 http请求2.1.1.1 请求行1、位置HTTP请求的第一行2、作用描述请求的方法、URL、协议版本信息3、请求方法作用按照什么方式操作资源4、常见的HTTP请求方法①GET从服务器获取资源查②POST在服务器新建一个资源增③PUT在服务器更新资源改④DELETE从服务器删除资源删2.1.1.2 请求头1、位置HTTP请求的第二行到空行之间2、作用描述请求客户端的属性信息我是啥啥啥服务器给你发的内容是啥类型3、请求头的Content-Type内容类型表示请求体里数据的数据类型即表示给服务器发消息带了什么样的数据可以看到页面的数据类型text/htmlHTML格式text/plain纯文本格式image/jpegjpg图片格式application/jsonJSON数据格式键值对application/x-www-form-urlencoded表单默认的提交数据格式页面的输入块、单选框、复选框叫表单multipart/form-data表单中进行文件上传时使用2.1.1.3 请求体1、位置空行下面的内容2、作用描述请求携带的数据3、请求体表示传输的数据不是所有方法都带只有在post和put方法中使用配合请求头Content-Type可以看到页面具体写的数据是啥2.1.2 响应2.1.2.1 响应行1、位置HTTP响应的第一行2、作用描述服务器的处理结果3、常见响应状态码三位数字组成①2xx成功资源访问一定能成功②3xx重定向资源访问可能成功也可能失败见得少重定向表示第一次请求中资源位置发生变化服务器发现客户端用旧的位置找服务器服务器给客户端回一个新的地址让客户端用新地址找服务要所以又来进行第二次请求eg比如原来文件在d盘放现在挪到e盘你还找我在d盘要我告诉你位置发生变化了生成响应状态码客户端会自动拿我给你的一个新的地址重新给我发送一次请求③4xx客户端错误资源访问一定失败客户端发送的数据有问题在请求里的行、头、体出现任何一个错误都有可能出现开头的响应状态码④5xx服务器错误资源访问一定失败eg比如客户端找服务器要资料服务器这会处理不了就会回一个5开头的信息常见的HTTP响应状态码eg协议版本状态码200结果描述OK2.1.2.2 响应头1、位置HTTP响应第二行到空白行2、作用描述服务器属性信息比如客户端你好我是什么什么服务器我给你回的是什么类型的消息3、组成由键值对组成2.1.2.3 响应体1、位置HTTP响应空白行以下2、作用服务器返回的数据3、数据类型有图片、json键:值、HTML设计前端的源代码、xml等3 F12查看页面网络数据包1、F12抓取指定的URL的登录接口获取HTTP请求数据标头主要看行和头负载请求体的东西响应响应体的东西2、把上一个数据包清空再进行操作获取新的数据包4 Charles抓取数据包4.1 抓包1、抓包packet capture使用工具抓取客户端与服务器交互数据包也称传输信息、报文的操作即在客户端和服务端之间设置网络代理抓取客户端和服务端之间传输的数据信息2、常见抓包工具F12浏览器Charles支持Windows、Mac、LinuxFiddler主要针对Windows、wireshark网卡、数据链路层更专业计算机网络等3、为啥抓包【场景】定位前后端bug最常见模拟弱网测试抓包工具模拟网络信号弱的场景下进行测试绕过界面限制进行测试即绕过界面做后端接口测试【页面级别的异常数据】页面的数据前端做了限制要确保后台是否有限制所以需要做模拟服务端进行mock测试【接口测试阶段会有】4、如何区分前后端bug①如果抓不到请求或请求有误是前端问题②如果有请求且正确但是没响应或者响应错误那就是后端的问题③如果抓包有请求也有响应且都正确但是页面显示还是报错了则还是前端问题页面渲染。5、怎么抓包web为例浏览器设置网络代理安装了抓包工具的电脑IP打开抓包工具开启抓包操作浏览器最后获取抓取的数据包4.2 Charles4.2.1 介绍1、Charles基本信息Charles是一款在Windows/Mac下常用的数据包截取工具支持Web/APP端网络数据包的抓取分析。中文名叫青花瓷它是一款基于HTTP协议的代理服务器通过成为电脑或者浏览器的代理然后截取请求和请求结果达到分析抓包的目的。2、 抓包原理在客户端和服务端之间设置网络代理3、官方下载地址:https://www.charlesproxy.com/30天免费试用4.2.2 使用操作建议以Firefox浏览为主4.2.2.1 浏览器设置代理1、在浏览器设置代理Charles默认端口8888只有安装时做一次以后都不用做2、关闭Charles后不能打开网页3、启动Charles后能够打开网页4.2.2.2 Charles开启代理1、检查是否开启HTTP代理没有开启的话勾选确定即可2、打开已设置过代理的浏览器去访问地址就可以直接抓包了建议先用以下地址访问eg搜索列表http://hmshop-test.itheima.net/Home/Goods/search.html?q手机传智播客传智播客http://121.43.169.97:8081/3、打开Charles左侧右侧4.3 前后端bug定位1、为啥抓包可以定位bug后台有数据库服务页面的信息都在数据库后台给数据给错页面没问题后台给对放页面是错的2、定位bug的思路①确认请求是否有问题请求有问题--是前端②确认响应是否有问题响应有问题--是前端注意如何确定响应的问题看返回的数据和数据库是否一致一致--则响应没问题不一致--则响应有问题③请求和响应都没问题但页面显示错--前端eg1定位该bug的步骤①通过浏览器访问地址去工具上看是否能抓到数据包②性别是个人信息登录成功才能看到个人信息所有确定要抓登录的包③看请求找登录的包看请求体是否和页面数据一样如果输入的和抓到的数据一样说明请求的数据没错④看响应借助数据库看响应体响应体里有后台给的性别信息发现和响应体的数据一样⑤综上那就是前端的bug请求没问题响应没问题那就是前端渲染的问题2如果请求的数据和页面输入的数据不一样发送的时候就已经错了那是谁的问题答前端3如果后台返回的数据和数据库里的不一样那是谁的问题答后端4.4 模拟弱网测试模拟带宽比较低的网络测试延迟1、弱网延时和带宽设置--模拟不同网络2、参数设置①设置网络带宽②操作对应页面/APP应用③Charles查看延迟时间/趋势变化④确认应用程序是否有异常上行往外传下载往内传存储数据Byte 字节传输数据bit 比特位1GB1024MB 1MB1024KB 1KB1024Byte 1Byte8bitbit/sbpsbit per second1000Mbps1000/8MBps125MB/s3、具体测试步骤①不开启弱网用正常网络访问页面抓取对应数据包查看传输时间【Duration】②设置好弱网参数后开启弱网再次访问上述同一页面抓取对应数据包查看传输时间③对比两次访问的【Duration】实现变化弱网情况下有延迟且页面不能出现崩溃规则判断以产品要求提供的数据为准eg某电商系统首页进入在3G网络下8s完成且页面不出现无响应、崩溃等问题视为通过eg弱网后发现时间拉长了需求模拟3G网络带宽访问tpshop首页查看延时多少?是否有异常?一个根目录表示一个页面第二个根目录表示第二个页面4.5 异常数据测试绕过界面直接测试服务器1、本质测服务器的接口2、假设页面做拦截校验了测试接口有没有做校验3、详细操作步骤eg购物车商品数量有上限200的限制页面无法输入201说明页面进行校验了不代表接口做拦截校验了可以绕过页面做服务端测试设置1打开浏览器输入待测地址2在Charles的 Proxy--Breakpoints设置断点勾选:Enable Breakpoints点击:Add添加设置断点的URL信息 可设置protocol、host、request、response3确认设置完成后点击OK4在浏览器模拟用户进行操作测试保证打开当前页面并打开断点5Charles开始抓取到当前数据包并闪烁提示红色向上箭头表示拦截到数据包6在Charles的Breakpoints 修改请求的数据--点击Execute7在Charles的Breakpoints修改响应的数据--点击Execute(注:可跳过修改响应直接执行)8弹出的断点数据包含一路Execute执行完毕最后点击关闭断点按钮示例结果①前端按钮做限制输入块没做限制②前端不考虑则绕过前端通过断点拦截前端后端也没做校验说修改成功5 抓取HTTPS的数据包HTTPS安全超文本传输协议5.1 Web端抓HTTPS的数据包注意一定要安装证书才可以https属于加密传输5.2 手机端抓取HTTP的数据包1、注意移动端抓包的前提代理服务器必须和移动端设备在一个局域网一般通过连接同一个WiFi解决与安装了Charles代码的电脑手机接入同一热点即可不能用移动网络抓难以控制中间的路由2、具体步骤1手机端WiFi设置给手机连接的WiFi设置代理填入安装了Charles的电脑的IP地址IPv4地址端口号一般是8888然后保存2操作手机APP/打开手机浏览器访问显示抓包信息【抓取http的数据包】5.3 手机端抓取HTTPS的数据包注意1、移动端设备如果是Android 7.0及以上版本做了安全处理需要root权限安装Charles证书参考资料:https://cloud.tencent.com/developer/article/14900332、移动端设备如果是iOS 10.0及以上版本需要在 设置-通用-关于 里面开启Charles证书信任如果iOS手机设置证书信任后不生效可以重启手机重试一遍1、Android手机安装Charles证书1下载Charles证书到本地电脑2以hash值的形式重命名证书为了证书能够安装到系统下使用电脑安装openssl工具如Win640penSSL-3_3_1. exe以管理员身份安装2安装到open ssl路径下4注意弹出页面直接关闭即可5电脑配置环境openssl添加环境变量openssl安装路径\bin注意这里是自己的openssl的安装路径6在Windows终端测试环境变量7上传重命名之后的证书到手机注意模拟器要开模拟器没有权限写入手机可以直接上传设置为有写入系统权限开启adb的root权限获取完之后可能显示