如何在本地开发环境调试微信 JS-SDK

以下篇幅将会描述不同前提下对应的调试策略,当然也有可能不是最优解,望斧正 →_→

前言

何谓「安全域名限制」?

这种策略应用还相对比较广泛,大概可以等同于三方提供的 API 需要让你配置 IP 白名单。

下图大致描述了 JS-SDK 域名验证的过程,其中

WeixinWebview 为微信客户端内的浏览器;

BuServer 为我们自己的业务服务器;

WeixinClient 为微信 App;

以下流程的前提是BuServer 已经具有签名所需的 access_token、jsapi_ticket 等信息

建立在这个基础上,我们想绕过这个安全策略,大概有两种方案:

常规操作

通过 ngrok / 花生壳内网穿透,一般工具都会给你临时域名,固定的域名需要付费;

将域名填入微信安全域名列表中,并将验证文件放入 Web 容器里进行验证;

完成了上面两步,你就可以愉快的调试啦;

非常规操作

从上文流程图中可以看到 JS-SDK config 信息是通过当前请求页面的 URL + jsapi_ticket + appid + …… 按照一定规则进行签名得到的,然后将这个 config 传入微信客户端进行校验是否合法。

整个验证过程中,我们能 hack 的是将请求的资源转发到开发服务器上,从而能调试本地的代码。

围绕「将请求的资源转发到开发服务器」,可以想到下面两个方案:

将请求拦截,转发到开发服务器上;

利用 DNS 解析,将安全域名解析到开发服务器上「俗称 DNS 劫持」;

方案一 抓包工具转发

本文不过多赘述,可以通过 Charles,Fiddler 这些抓包工具对指定的请求进行转发,从而达到目的。

方案二 DNS 劫持

可以先看下图 DNS 解析过程:

要实现 DNS 劫持,最现实的是通过修改开发机的 hosts 文件将安全域名解析到本地开发环境 ip 上。

HTTP 请求的劫持

如果你的网站提供的是 HTTP 服务,只需要修改开发机中 hosts 文件,将安全域名指向开发服务。看到这里就差不多了,可以自己去实践了。

HTTPs 请求的劫持

但是目前大多数商业网站都 HTTPs 化了,因此并不能简单的通过 DNS 劫持,把请求转发到本地的 HTTP 服务上。

如果你的安全域名是一个 HTTPs 服务,那可能有点麻烦。首先我们来看看一次像 HTTPs Server 请求的时间线:

如上图可以看到当像 HTTPs Server 发起一个 HTTP 请求时,将会被永久重定向成 HTTPs 请求,然后响应头中会有一个特殊的头「strict-transport-security」,这个头是告知浏览器该域下的所有请求都将使用 HTTPs 访问。因此接下来如果再发起一个 HTTP 的请求,浏览器将会内部重定向至 HTTPs 请求。

上文对 HTTPs 请求的描述是为了引出当你安全域名对应的是 HTTPs 服务时,会遇到如下问题:

配置了安全域名对应的 SSL 证书,支持了 HTTPs 请求;

将安全域名下的请求转发到对应开发服务上;

如果这个 ProxyServer 是作为一个通用服务存在,则需要考虑如何代理到不同开发者启动的开发服务上。

最开始我们计划通过 querystring 来制定需要代理到的开发服务的地址,实际情况是一个页面中所有依赖该域下的请求都得转发,因此 querystring 的方法不能很方便的实现这个功能。

因此最后通过 cookie 来实现这个需求,通过 cookie 指定开发服务器地址,这样该域下的所有资源请求都会带上该 cookie,就能实现自定义转发到上游服务了。

最终使用该方案调试微信 JS-SDK 需要做如下两步:

更改 hosts 文件,将安全域名劫持到代理服务上;

设置 cookie ,指定需要代理到的上游服务;

这样一来,该代理服务就可以作为通用服务所存在,任何开发者有绕过安全域名限制做一些调试,都可以使用这个服务。

FAQ

Q1. 常规操作的优劣?

Pros:

步骤比较少,容易搞,适合偶尔需要调试;

Cons:

固定域名要钱啊,不固定域名又要经常改,但是一个月又只有三次修改机会啊;

微信安全域名池子没坑怎么办啊。。。「申请个测试账号也不是不行,但是这样后端 access_token、jsapi_ticket 相关接口都得修改」;

不够通用,其他三方登录有安全域名设置,并不能复用;

Q2. 非常规操作又有什么优势?

Pros:

不需要额外的域名,意味着不用改安全域名配置,服务端代码也不用动;

通用,有类似安全域名策略的三方服务通杀;

对于普通开发者来说日常开发调试成本很低,也不需要什么特殊权限;

Cons:

搭建流程相对复杂点,需要服务器资源;

Q3. 真机微信里怎么调试啊?

祭出 Charles,Mac 用 Charles,Win 用 fiddler 开代理,如果是 HTTPs 则还需要配置证书信任,这个步骤本文不再赘述,可自行 Google。

Q4. 怎么申请测试账号?

小结

在整个过程中,其实可以了解到 DNS 劫持的概念、实际应用,以及对 HTTPs 的进一步了解。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180520G0QAP000?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券