Charles抓包工具小白学习笔记
一、 抓包工具的原理和使用
1、 为什么要学习使用抓包？
1） 从功能测试角度，可以通过抓包查看隐藏字段
Web 表单中会有很多隐藏的字段，这些隐藏字段一般都有一些特殊的用途，比如收集用户的数据，预防 CRSF 攻击，防网络爬虫，以及一些其他用途。这些隐藏字段在界面上都看不到，如果想检测这些字段，就必须要使用抓包工具。
2） 通过抓包工具了解协议内容，方便开展接口和性能测试
性能测试方面，性能测试其实就是大量模拟用户的请求，所以我们必须要知道请求中的协议内容和特点，才能更好的模拟用户请求，分析协议，因此就需要用到抓包工具；
接口测试方面，在接口测试时，虽然我们尽量要求有完善的接口文档。但很多时候接口文档不可能覆盖所有的情况，或者因为文档滞后，在接口测试过程中，还是需要借助抓包工具来辅助我们进行接口测试。
3） 需要通过抓包工具，检查数据加密
安全测试方面，我们需要检查敏感数据在传输过程中是否加密，也需要借助抓包工具才能检查。
4） 处理前后端 bug 归属之争
在我们提交bug的时候，经常会出现前端（客户端展示）和后端（服务端的逻辑）的争议，那么可以通过抓包工具，确认是数据传递问题还是前端显示的问题。如果抓出来的数据就有问题的话，那么一般是后端的问题；如果抓出来的数据是正确的，那么基本上可以断定是前端显示的问题。
5）通过抓包分析，可以更好的理解整个系统
使用抓包工具辅助测试，可以很好的了解整个系统，比如数据传输过程前后端的关系，以及整个系统的结构。特别是对现在的微服务架构的产品，抓包能够更好的梳理和掌握整个系统各个服务之间的关系，大大增加测试的覆盖度。另外还可以增进对代码、HTTP协议方面知识的理解。
2、 抓包工具有哪些？
1） F12，浏览器通过F12打开开发者调试模式，查看请求和响应。
2） Httpwatch
3） Wireshark
4） Fodder
5） Charles
3、 web端Charles工具的使用
web端抓包不需要做任何的设置，打开工具在浏览器输入url地址，发送请求，抓包工具就可以获取相应的请求和响应。
4、 app端抓包原理
1）手机需设置代理，将charles的电脑设置为代理服务器，就可以对手机进行抓包。
2）Charles抓包配置
启动 Charles 后，第一次 Charles 会请求给它设置系统代理的权限，点击右侧允许按钮，登录密码授予 Charles 该权限。
电脑端配置：
代理设置：
可以设置抓包数据类型，包括http与socket数据。可以根据需要在proxies栏下勾选。
打开Charles在选择Proxy -〉Proxy Settings -〉Port 默认 8888，将Enable transparent HTTP proxying 勾选。在终端输入ipconfig，查看ipv4地址。
如果需要抓Mac上的浏览器数据，需要在macOS栏，勾选http.
Charles启动时默认是会抓取Mac 的请求数据包的，可将 macOS Proxy 取消勾选；
取消软件自动检查更新提示：点击 help -〉Check for updates, 取消勾选；
注意：Chrome 和 Firefox 浏览器默认不使用系统的代理服务器设置，若要截取，需要在 Chrome 中设置成使用系统的代理服务器设置，或直接将代理服务器设置成127.0.0.1:8888。
手机端配置：手机打开无线网络（与电脑在同一网段），打开手机设置 -〉wifi -〉配置代理：输入电脑IP和charles设置的端口8888，保存退出，在电脑和Charles中选择allow，之后手机发送请求Charles就可以获取。
3）app端配置抓取https加密包
Install Charles Root Certificate
Install Charles Root Certificate in iOS Simulators
Install Charles Root Certificate on a Mobile Device or Remote Browser
3.1 电脑端配置证书：
3.3.1 证书安装：打开Charles在选择 help -〉SSL Proxying -〉Install Charles Root Certificate
3.2.2 HTTPS抓包
Proxy -〉SSL Proxying Setting -〉勾选 Enable SSL Proxying -〉点击add -〉输入
Host: * -〉Port: 443 -〉点击 OK。
注：如果没有配置Https，访问https数据时会访问失败，会话（Structure）栏显示小锁标识。
已设置https抓包
3.2.3 可接入控制
Charles是通过 Proxy -〉Access control Settings来控制允许访问列表。如果没有允许本机器IP，访问不会走Charles，也抓不了包。
3.2 手机端配置：
3.2.1 打开Charles在选择 help -〉SSL Proxying -〉Install Charles Root Certificate on a Mobile Device or Remote Browser，会出现如图
3.2.2 打开Charles在选择 help -〉SSL Proxying -〉Install Charles Root Certificate on a Mobile Device or Remote Browser，会出现如图
3.2.3 手机设置代理，安装证书
手机设置代理
手机浏览器输入chls.pro/ssl 后加载，同时查看电脑的charlse，点击Allow，再刷新手机浏览器
下载配置描述文件
安装证书
android：
魅族为例：设置 -〉指纹、密码和安装 -〉设备管理和凭证 -〉从存储盘安装 -〉下载文件存储路径：Download/Browser -〉长按证书 -〉重命名 -〉点击重命名之后的证书 -〉展示弹长，点确定 -〉查看手机通知 -〉点击“已安装证书授权中心”的通知 -〉展示弹窗，点击检查证书 -〉弹安全证书，点击信任 -〉再回到“设备管理和凭证”页，点击用户凭证，显示刚刚安装的证书，表示证书安装成功
iPhone：设置 -〉通用 -〉关于本机 -〉证书信任设置 -〉针对根证书启用完全信任（iOS10以上版本需启用，否则无法抓取https包），点击证书信任设置，勾选对Charles Proxy 证书的信任
3.2.4 当手机第一次访问charles时，会弹出是否允许弹框，点击继续，即同意此手机连接。
二、 抓包重点关注哪些内容
1、 功能测试角度
重点关注Request、Response，举例：测试app登录操作时，登录失败，页面没有相关的错误提示，此时就需要使用抓包工具抓包去分析是前端问题还是后端问题，如果接口有问题（Response接口返回值存在错误数值），则可以定位为后端开发问题；如果接口正常响应且返回值正确，则可以定位为前端开发问题。
2、 接口测试角度
在接口测试当中，抓包工具的作用是辅助测试，前提条件是接口必须被前端开发调用；
重点关注Heardes、Request、Response：
Heardes：其头部信息中主要关注开发自定义的请求头参数数据
HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。
HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。
HTTP工作原理
HTTP三点注意事项：
HTTP是无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。
HTTP是媒体独立的：这意味着，只要客户端和服务器知道如何处理的数据内容，任何类型的数据都可以通过HTTP发送。客户端以及服务器指定使用适合的MIME-type内容类型。
HTTP是无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。
•1 HTTP消息结构
HTTP请求报文由3部分组成（请求行+请求头+请求体）：
①是请求方法，GET和POST是最常见的HTTP方法，除此以外还包括DELETE、 HEAD、OPTIONS、PUT、TRACE。不过，当前的大多数浏览器只支持GET和POST，Spring 3.0提供了一个HiddenHttpMethodFilter，允许你通过“_method”的表单参数指定这些特殊的HTTP方法（实际上还是通过POST提交表单）。服务端配置了HiddenHttpMethodFilter后，Spring会根据_method参数指定的值模拟出相应的HTTP方法，这样，就可以使用这些HTTP方法对处理方法进行映射了。
②为请求对应的URL地址，它和报文头的Host属性组成完整的请求URL，③是协议名称及版本号。
④是HTTP的报文头，报文头包含若干个属性，格式为“属性名:属性值”，服务端据此获取客户端的信息。
⑤是报文体，它将一个页面表单中的组件值通过
param1=value1¶m2=value2的键值对形式编码成一个格式化串，它承载多个请求参数的数据。不但报文体可以传递请求参数，请求URL也可以通过类似于“/chapter15/user.html? param1=value1¶m2=value2”的方式传递请求参数。
对照上面的请求报文，我们把它进一步分解，你可以看到一幅更详细的结构图：
2请求头
请求头部由关键字/值对组成，每行一对，关键字和值用英文冒号“:”分隔。请求头部通知服务器有关于客户端请求的信息，典型的请求头有：
• User-Agent：产生请求的浏览器类型。
• Accept：客户端可识别的内容类型列表。
• Host：请求的主机名，允许多个域名同处一个IP地址，即虚拟主机。
3.空行
最后一个请求头之后是一个空行，发送回车符和换行符，通知服务器以下不再有请求头。
4.请求数据
请求数据不在GET方法中使用，而是在POST方法中使用。POST方法适用于需要客户填写表单的场合。与请求数据相关的最常使用的请求头是Content-Type和Content-Length。
Accept-Language: zh-cn,zh;q=0.5、Accept-Encoding: gzip, deflate、Content-Length: 14 http 协议默认信息不用关心
开发自定义的请求头：Connection: keep-alive（长链接）、Cookie: JSESSIONID=369766FDF6220F7803433C0B2DE36D98（开发自定义的值）
如果开发自定义的请求头缺失，接口就会报错，与开发沟通哪些请求头是必填的
Request：重点关注Request请求参数
如果开发再请求中增加新的参数，测试时使用旧的请求接口就会报错，通过抓包可以查看到新增的参数，做接口测试前必须与开发确认接口文档是否为最新文档。
注：最好手里面有相关的接口文档
HTTP响应消息
HTTP响应也由三个部分组成，分别是：状态行、响应头、空行、响应正文。
正如你所见，在响应中唯一真正的区别在于第一行中用状态信息代替了请求信息。状态行（status line）通过提供一个状态码来说明所请求的资源情况。
状态行格式如下：
HTTP-Version Status-Code Reason-Phrase CRLF
其中，HTTP-Version表示服务器HTTP协议的版本； Status-Code表示服务器发回的响应状态代码； Reason-Phrase表示状态代码的文本描述。
HTTP状态码
当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含HTTP状态码的信息头（server header）用以响应浏览器的请求。 HTTP状态码的英文为HTTP Status Code。状态代码由三位数字组成，第一个数字定义了响应的类别，且有五种可能取值。
· 1xx：指示信息--表示请求已接收，继续处理。
· 2xx：成功--表示请求已被成功接收、理解、接受。
· 3xx：重定向--要完成请求必须进行更进一步的操作。
· 4xx：客户端错误--请求有语法错误或请求无法实现。
· 5xx：服务器端错误--服务器未能实现合法的请求。
常见状态代码、状态描述的说明如下。**
200 OK：客户端请求成功。
400 Bad Request：客户端请求有语法错误，不能被服务器所理解。
401 Unauthorized：请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用。
403 Forbidden：服务器收到请求，但是拒绝提供服务。
404 Not Found：请求资源不存在，举个例子：输入了错误的URL。
500 Internal Server Error：服务器发生不可预期的错误。
503 Server Unavailable：服务器当前不能处理客户端的请求，一段时间后可能恢复正常，举个例子：HTTP/1.1 200 OK（CRLF）。
HTTP响应头
HTTP content-Type
Content-Type，内容类型，一般是指网页中存在的Content-Type，用于定义网络文件的类型和网页的编码，决定浏览器将以什么形式、什么编码读取这个文件，这就是经常看到一些Asp网页点击的结果却是下载到的一个文件或一张图片的原因。
HTTP content-type 对照表
关于HTTP请求GET和POST的区别
1.GET提交，请求的数据会附在URL之后（就是把数据放置在HTTP协议头＜request-line＞中），以?分割URL和传输数据，多个参数用&连接;例如：login.action?name=hyddd&password=idontknow&verify=%E4%BD%A0 %E5%A5%BD。如果数据是英文字母/数字，原样发送，如果是空格，转换为+，如果是中文/其他字符，则直接把字符串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进制表示的ASCII。
POST提交：把提交的数据放置在是HTTP包的包体＜request-body＞中。上文示例中红色字体标明的就是实际的传输数据
因此，GET提交的数据会在地址栏中显示出来，而POST提交，地址栏不会改变
2.传输数据的大小：
首先声明,HTTP协议没有对传输的数据大小进行限制，HTTP协议规范也没有对URL长度进行限制。而在实际开发中存在的限制主要有：
GET:特定浏览器和服务器对URL长度有限制，例如IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器，如Netscape、FireFox等，理论上没有长度限制，其限制取决于操作系统的支持。
因此对于GET提交时，传输数据就会受到URL长度的限制。
POST:由于不是通过URL传值，理论上数据不受限。但实际各个WEB服务器会规定对post提交数据大小进行限制，Apache、IIS6都有各自的配置。
3.安全性：
POST的安全性要比GET的安全性高。注意：这里所说的安全性和上面GET提到的“安全”不是同个概念。上面“安全”的含义仅仅是不作数据修改，而这里安全的含义是真正的Security的含义，比如：通过GET提交数据，用户名和密码将明文出现在URL上，因为(1)登录页面有可能被浏览器缓存，(2)其他人查看浏览器的历史纪录，那么别人就可以拿到你的账号和密码了。
三、修改抓包数据
1.请求参数
在某些条件下，需要修改接口的请求参数才能进入我们需要测试的那个场景当中。
通过app操作传递的参数给服务端，服务器接收到请求中传递的参数做相应的响应（例如：1，关闭，0，打开；传参：A=1响应：关闭）；A=0响应：打开），由于每次app操作传递的参数都是A=1，所以需要先抓包，之后选中获取的请求，右键，点击Breakpoints（再次选中此请求右键，Breakpoints显示已勾选）重新请求，点击Breakpoints，Edit Request，选中参数进行修改，修改完成点击Execute校验返回参数是否正确
测试时使用的场景：支付时，修改支付金额、商品数量
1.响应参数
接口：特殊的请求参数给予特定响应值；
客户端：特殊的请求参数给予特定的界面，特定的场景；
抓包，选中获取的请求，右键，点击Map Local，勾选Case-sensitive，选择Choose，选中本地接口文档添加成功，点击OK，响应值就是添加的接口文档中的信息
参考文献：
https://www.jianshu.com/p/bf1bc812a8de
https://www.jianshu.com/p/aeacdadfa7c2
https://www.cnblogs.com/lauhp/p/8979393.html
