利用fiddler和mock调试本地微信网页

微信公众号网页是比较特殊的页面，普通页面直接打开即可访问，但对于需要请求微信相关接口的部分需要安全域名认证。这导致了使用mock数据进行开发的页面没办法走完整个流程，还是需要把代码发布到服务器上才可以测试。而发布服务器的速度总是要时间的，每次修改都发布服务器耗时较长，大大延长了开发时间。使用一种本地开发的技术就比较重要了。

https是一种安全的认证，我们要进行伪造数据进行劫持的话就必需自签证书，通过系统信任就可以将https的数据指向任何我们想要的服务上。利用这个特性，调试微信网页就极为简单了。本文针对的是传统的静态网页，针对的是增量开发时的调试，全新的业务不适用于此方案，SPA网页可能需要其他工具，但原理是相同的。

1. 开启域名劫持

fiddler是一款极为强大的软件，可对数据进行抓取和代理。要实现域名劫持，就要利用工具进行配置。

1. fiddler基础配置。网上教程有很多，具体配置就不讲了。关键点在于配置好https劫持，并在调试的手机上下载fiddler的证书进行安装。这一部分都是通用的，很容易做到。在配置完成可以对微信网页进行抓包后，查看是否所有的网页请求已经在fiddler中出现了。
2. 配置域名代理。在fiddler右侧的tab页中选择autoResponder标签页，打开enable rules选项和unmatched requests passthrough。点击add rules。在下方的rule Editor分别输入：

上方：
REGEX:^https://server\.example\.com/(.*)
下方：
http://192.168.20.61:3838/$1

　　其中 server\.example指的是需要劫持的域名， 192.*是你开启mock服务的机器地址和端口。此时再访问劫持的域名，会发现请求是发往本机的。原理是利用fiddler的正则功能，将目标域名路径后面的内容全部捕获，转发到我们局域网主机的端口上。只要在端口上实现相应的转发功能，就可以进行劫持了。

2. 开启mock服务

mock服务指的是本机服务。由于页面需要请求本机内容，接口中一部分需要请求真正的服务端，便于身份认证和获取微信认证相关内容，另一部分内容则需要进行API提供，在增量式开发时对服务端尚未完成或者使用测试账号数据量过少的接口进行mock。因此mock服务要满足以下几个条件：

1. 能够对开发过程中网页进行增量构建。这个过程比较重要，全量构建导致构建速度过慢，不利于开发过程中快速调试。
2. 能够对构建生成的文件提供静态资源服务。
3. 能够提供404请求代理至服务器。
4. 指定的API代理至指定的服务器。
5. 能够提供便于编辑的API。

这些功能利用Nodejs其实都很容易做到。条件1中是根据开发过程决定的。我们公司使用的是gulp构建，利用browserify对require进行处理，同时添加autoprefixer进行css前缀的添加，rev模块对js和css进行hash值的计算并添加后缀。全量构建时会耗时较长，因为开发了一个增量式构建。其他的条件都是mock服务提供的。我之前开发的一套用于开发的mock服务xmocker可以实现这个功能。地址：https://github.com/wenlonghuo/xmocker-cli。原理是利用koa的洋葱圈模型，请求经过的路线如图所示。

mock流程图

流程比较简单，基本能达到我们的目的。同时，该Mock服务开启服务时启动gulp参数，为html注入脚本便于利用接口进行页面刷新（在安卓微信下不生效，总是从缓存中读取。另个对于劫持的域名也是无效的）。使用mocker start xx(项目简称)就可以启动项目了。启动后在项目列表页设置404代理模式为混合模式，添加必要的API。同时在项目信息中填写404代理地址为 https://server.example.com，提交即可。此时访问局域网内的网址就可以发现API和网页均是优先访问本地，404会请求服务器，达到了Mock的目的。

3. 调试

　　同时完成步骤1和2后，微信中将链接发给自己的手机端，为正常访问服务端的地址，你会发现，网页和请求都是经由本机的Mock服务转发的。开始修改页面，手动刷新就可以看效果了。经测试，微信的上传图片认证是可以通过的，利用这个功能我实现了本机代码上传图片功能，完美的绕开了微信的认证。

4. 总结

　　利用的https劫持实现的调试，告诉了我们一件事：不认识的证书千万别乱安装！！一旦手机上安装了未知来源的证书，https劫持是很容易的事，数据修改获取完成不在话下。另外，nodejs开发工具还是挺快速的，想要什么功能，只要逻辑走得通，实现起来很容易。