前端如何抓包

抓包

背景：h5 页面与原生 app 的交互需要与原生打通登录态，以及调用原生app 的接口。跟微信小程序开发不同，本地开发时微信有提供微信开发者工具，可以本地模拟调用。但这边h5需要每次都打包静态文件，上传服务器才能调试，非常麻烦。通过抓包工具比如 whistle 就可以做到拦截线上页面请求数据，再响应本地代码，本文主要讲述抓包的原理和抓包工具 whistle 使用。

1.抓包的定义

1. 定义：将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作
2. 作用：分析网络问题，业务分析，分析网络信息流通量，网络大数据金融风险控制，探测企图入侵网络的攻击等等

2.抓包的原理

1. HTTP/HTTPS 是应用层使用的通信协议，常见的应用层体系结构是客户端-服务器体系。但是不同端系统上的客户端程序和服务端程序是利用进程进行通讯。所以抓包就是类似商家，快递站和消费者之间的快递站的作用。即中间人的角色。
2. 中间人想要抓包，需在 HTTPS 加密通信之前：

• 截取客户端发送的包含证书的报文，伪装成服务端，把自己的证书发给客户端，然后拿到【客户端返回的包含对称加密通信密钥的报文】，生成中间人与客户端对称加密的密钥。

• 同样伪装成客户端，以服务端自己的非对称公钥加密【客户端返回的包含对称加密通信密钥的报文】发给服务端，获得服务端生成的对称加密密钥。

• 这样一来，加密通信建立完成，而中间人拿到了通信的数据密钥，可以查看、修改 HTTPS 的通信报文。

  注意：浏览器的根证书校验不在客户端的操作系统上，因此只能把中间人的根证书，导入到客户端的操作系统了，以此完成建立加密通信时对中间人证书的验证。

3.抓包工具whistle

1. 先安装 node,再全局安装 whistle

npm i -g whistle 

2. 启动命令

w2 start

3. 电脑上设置全局代理，默认的代理的端口为 8899

w2 proxy  设置全局代理
w2 proxy off   关闭全局代理
w2 strat -p 1222 设置端口号

4. 通过浏览器访问 http://127.0.0.1:8899/ 查看抓包、修改请求等。
5. 设置浏览器代理（不想全局代理）

• 浏览器安装 SwitchyOmega 插件，可以在github上查找该插件并下载，安装到浏览器的扩展程序中
• 扩展程序中打开该拓展，打开选项新建情景模式新建之后就可以抓包了。

6. 查看官方文档whistle 文档
7. 常用的代理规则

• 常规域名请求转发到本地服务器，
  例如: http://a.com localhost:1222,这样只要是访问a域名拿到的数据都是1222的内容
• 数据请求和页面请求相分离，解决跨域获取数据的问腿
  例如: http://a.com/api localhost:1222,http://a.com/api localhost:1224， http://a.com localhost:1223,这样接口拿的是1222和1224的，页面拿的是1223的
• 抓包：要注意如果是HTTPS的请求需要下载配置证书到手机在进行抓包。