前端如何抓包

抓包

背景: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 
  1. 启动命令
w2 start
  1. 电脑上设置全局代理,默认的代理的端口为 8899
w2 proxy  设置全局代理
w2 proxy off   关闭全局代理
w2 strat -p 1222 设置端口号
  1. 通过浏览器访问 http://127.0.0.1:8899/ 查看抓包、修改请求等。
  2. 设置浏览器代理(不想全局代理)
  • 浏览器安装 SwitchyOmega 插件,可以在github上查找该插件并下载,安装到浏览器的扩展程序中
  • 扩展程序中打开该拓展,打开选项新建情景模式新建之后就可以抓包了。
  1. 查看官方文档whistle 文档
  2. 常用的代理规则
  • 常规域名请求转发到本地服务器,
    例如: http://a.com localhost:1222,这样只要是访问a域名拿到的数据都是1222的内容
  • 数据请求和页面请求相分离,解决跨域获取数据的问腿
    例如: http://a.com/api localhost:1222,http://a.com/api localhost:1224http://a.com localhost:1223,这样接口拿的是1222和1224的,页面拿的是1223的
  • 抓包:要注意如果是HTTPS的请求需要下载配置证书到手机在进行抓包。

你可能感兴趣的:(前端)