【微信H5开发】利用Fiddler搭建移动端https开发环境

2017-07-03 本文已影响681人 mercurygear

Fiddler

Fiddler是windows下的http/https抓包不二选择，除了抓包之外，还可以做响应修改，调试，反向代理等高级功能，这里着重介绍如何使用Fiddler来搭建移动端的https页面开发环境。

为什么要这么做？

公司要开发微信H5的一个web app，相信大家应该都是在本地构建一个开发环境，利用微信开发者工具进行开发，比如我们的典型开发环境是这样的：

项目基于npm，webstorm垒代码
用webpack进行构建和搭建本地的http server，结合热更新非常好用
配置本地host，把项目域名指向本机127.0.0.1
用微信开发者工具进行开发调试
真机调试也是通过微信开发者工具的移动调试功能进行

这一套开发http版的web app非常和谐愉快，在新项目切换到https协议的时候，为了方便开发，也是先行开发http版本，内网的http开发和基本测试完毕，再转换到外网测试，而外网支持https协议。
但是，一旦项目需要结合微信的用户授权登录的时候，在真机调试这里出现了卡壳。
因为真机的微信的授权页是https的，而我们的开发页面是http的，用户授权后，会从这个https的页面跳转到我们的http开发页。
在android端没问题（4.x版本），可以正常跳转；但是iOS端的就会卡在这个跳转页，出现白屏，因为iOS的安全机制要求比较高，https页面不允许跳转到http页面。这样，iOS端只能是https的开发页才能实现正确的跳转。
由此引出了我们的需求，本地的开发环境除了http的支持，也要支持https。

方案

直觉的方案是怎么配置webpack让其也支持https，webpack实际上是使用的middlewave来提供的http服务，简单找了下，没找到让middlewave也支持https的设置，估计就算有，webpack也要折腾着尝试一段时间才行，此路不通，得另寻它法。
然后想到了万能的fiddler，果然网上找到篇文章使用Fiddler抓包调试https下的页面，提供了具体的思路，其实就是类似让fiddler干反向代理的活。这个方法也和我们的后端提供接口的方式类似：nodejs实现具体接口，nginx做反向代理处理http/https支持。

https开发环境搭建

fiddler端的设置

fiddler的菜单Tools => Options，选择HTTPS选项，把捕获HTTPS连接和解密HTTPS数据都勾选上，如下图

HTTPS选项卡
换到Connections选项卡，勾上允许远程客户端连接

Connections选项卡
确认之后，一般情况下windows会弹出fiddler的防火墙例外框，如果你并不知道自己当前是在专用网络或公用网络的话，请把两个网络都勾选上。因为这个弹框只出现一次，一旦选错网络，那么就会出现手机死活用不了fiddler代理的情况。不过就算选错了也别慌，我们还能设置回来，以win10为例，打开控制面板 => 系统和安全 => windows防火墙，选择左侧的"允许应用或功能通过Windows防火墙"，如下图所示：
设置防火墙例外
先点击"更改设置"按钮，然后找到Fiddler，把专用和公用两个勾都勾选上即可
允许Fiddler接收外部客户端连接
给fiddler增加自定义的链接处理代码，在fiddler主页面点选FiddlerScript选项卡，然后从Go to下拉框中选择OnBeforeRequest跳转到OnBeforeRequest处理函数，如下图：
定位到OnBeforeRequest函数在OnBeforeRequest函数体的尾部插入下面的处理代码（记得把hosts修改成你的域名），然后点左上角的Save Script按钮就完成了。

var hosts = 'm.yourdomain.com';  // 这里修改成你要代理的https的域名
FiddlerApplication.Log.LogFormat("Logger session {0}, Url: {1}, isHttps: {2}, port: {3}", oSession.id, oSession.fullUrl, oSession.isHTTPS, oSession.port);
if(hosts.indexOf(oSession.host) > -1){
    FiddlerApplication.Log.LogFormat("Capture session {0}, Url: {1}, isHttps: {2}, port: {3}", oSession.id, oSession.fullUrl, oSession.isHTTPS, oSession.port);
    if(oSession.HTTPMethodIs('CONNECT')){
      FiddlerApplication.Log.LogString('create fake tunnel response');
      oSession['x-replywithtunnel'] = 'FakeTunnel';
      return;
  }

  if (oSession.isHTTPS){
    FiddlerApplication.Log.LogString('switch https to http request');
    oSession.fullUrl = oSession.fullUrl.Replace("https://","http://");
    oSession.port = 80;
  }   

  FiddlerApplication.Log.LogFormat("Processed session {0}, Url: {1}, isHttps: {2}, port: {3}", oSession.id, oSession.fullUrl, oSession.isHTTPS, oSession.port);
}
FiddlerApplication.Log.LogFormat("Logger session {0}, Url: {1}, isHttps: {2}, port: {3}", oSession.id, oSession.fullUrl, oSession.isHTTPS, oSession.port);

这段代码的实质是让fiddler在收到手机的https请求时，如果是指定的域名url，则把https改成http，端口改成80，再转发出去，这样就实现了把https请求转换成了http请求。借用他人的图一张，很好的解释了这个https反向代理的过程：

利用fiddler实现https请求转换成http请求

重启fiddler，fiddler这边的设置就已经完成了

iOS端的设置

iPhone连接的wifi必须要和fiddler主机在同个局域网内，可以通过本机和iPhone都连接同个路由器，或者本机架设一个热点，然后iPhone连接这个热点；两个方案都行，按需选择
打开iOS的设置，进入wifi，然后把wifi的HTTP代理切换到手动tab，服务器填入fiddler主机的ip，端口为8888（fiddler的默认端口）

iOS设置http代理
safari打开http://<fiddler主机ip>:8888，点击下图红框所示的fiddler根证书，下载安装，弹出的框都确认即可安装fiddle根证书
iOS10以上系统由于增强了安全性，刚才安装的根证书默认不启用，需要我们进入设置 => 关于本机 => 证书信任设置，把DO_NOT_TRUST_FiddlerRoot的开关打开（证书名字囧）

测试

按照上述的设置对fidder和ios都弄好后，我们尝试在iOS的微信打开我们的https页面链接，首先来到微信的用户授权页，授权之后跳转，bingo！现在页面可以正常跳转回https开发页了，查看fiddler抓到的包，可以看到我们的接口，都是http请求（可以在log选项卡里看到我们之前添加的https转换为http的代码的日志）。
这样一来，我们以后又可以开心愉快的在真机上查看我们的开发页面了，yeah！！！