移动端抓包工具整理-新增代码式抓包方法

今天药忘吃喽~ 2021-12-10 13:49 266阅读 0赞

常用的抓包方法如下：  
1、charles：需要设置手机代理，https协议，需要额外再装协议  
2、chrome浏览器或safair浏览器插件：需要在开发环境的app才可以联调，生成环境app的调试都是关闭的  
3、后端日志抓包：数据量大，查找不方便  
以上3种不能满足实际的场景需求，如客户手机出现了接口异常，就没有办法能够实时的查看，我们需要一种能够不受网络、地理因素影响的抓包方案；  
4、通过localStorage缓存接口参数及异常信息，然后通过页面展示出来，再把异常信息复制出来发给开发，就可以及时的获得接口异常信息，而且精准性高、不受地理等因素影响，具体如下图：  
![移动端抓包工具][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2Mzg4Mw_size_16_color_FFFFFF_t_70]  
效果图：![移动端抓包工具效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2Mzg4Mw_size_16_color_FFFFFF_t_70 1]  
代理思路如下：  
1、所有的请求接口，都用通过功能的方法进行请求，请求完成后，把请求的参数、返回值，都存储到localStorage中，命名为localAjaxData  
2、通过查询页面，读取localStorage.localAjaxData  
3、可以把查询页面生成一个二维码进行访问，扫码访问更方便使用

如上图所示的方法在客户端快速获取接口数据，  
在这个过程中总结的几个问题：  
1、写入和读取localStorage的方法最好进行封装

2、怎么发给开发  
我的最终方案是使用的使用了clipboard.js v-1.5.15版插件实现的，原生的js提供的document.execCommand('copy’)有兼容问题，ios效果不好  
考虑过发请求和发邮件，发请求的化需要维护单独的接口、数据库，数据安全性、数据冗余、垃圾数据问题，发邮件有长度限制  
3、当返回的数据里有html片段的时候，ios读取的时候会有报错，是由于换行符、和引号引起的页面异常，我的解决办法是再写入的时候，就把空白字符和引号去掉

/**
         * 异常回调的特殊判断，如果返回的是html，需要特殊处理
         * @param {object}  err
         */
        errHasHtml({err}){
            let reg = new RegExp(/<\s*html\s*>/,'gi')
            reg.lastIndex = 0;
            let res = false
            if(!!err&&
                (typeof err === 'object') &&
                !!err.response &&
                (typeof err.response === 'object') &&
                !!err.response.data &&
                (typeof err.response.data === "string") &&
                reg.test(err.response.data)
            ){
                res = true
            }
            return res
        }

4、自动打开邮件的代码

5、在页面展示带有html代码页面会变得混乱  
我是使用textarea解决的，我试过pre标签，效果不好

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2Mzg4Mw_size_16_color_FFFFFF_t_70]: /images/20211210/4bc8fa3495e24ee6bcf2ae4daec1fba7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2Mzg4Mw_size_16_color_FFFFFF_t_70 1]: /images/20211210/f79db5c627864837999624bee6941be5.png