微信js-sdk本地调试方案

时间 2021-06-19

标签 html nginx git github 浏览器安全 bash 微信 session post 栏目 JavaScript 繁體版

原文原文链接

此方案为同事探究得出，现本人即将离职，特此记录下该方案，以备后续查找。html

解决的问题

微信js-sdk初始化须要校验域名，本地调试没法经过，需假装成生产/测试时访问的域名
也适用于抓取手机端的请求，在PC端进行分析（Charles）

方案思路要点

修改Host, 使得目标域名映射到本机(127.0.0.1)
nginx开启HTTPS server，将目标域名proxy_pass到要测试的项目本地地址(如http://localhost:8080)
手机经过Charles代理到电脑本机

修改Hosts

sudo vi /etc/hosts

# 添加目标域名映射
127.0.0.1    [target-host-name]

安装nginx

建议经过Homebrew安装nginx

brew install nginx
nginx -v
nginx -h

成功安装截图
git

# 成功安装后摘录以下
Docroot is: /usr/local/var/www
The default port has been set in: /usr/local/etc/nginx/nginx.conf to 8080 so that nginx can run without sudo
nginx will load all files in /usr/local/etc/nginx/servers/.

能够修改下默认端口，而后跑nginx启动, 能够在浏览器看到默认的http server，表示nginx安装好了，没什么问题。github

mkcert生成ssl证书

要开启https server，须要有ssl证书，使用mkcert能够在本地安装证书。浏览器

mkcert: https://github.com/FiloSottil...安全

生成证书的方式，请通读其README，主要了解安装、生成证书命令、安装CA命令bash

建议将证书放到nginx安装目录下usr/local/etc/nginx/ssl，命名自行根据实际命名便可。微信

mkcert -key-file [key.pem] -cert-file [cert.pem] [target-host-name] [target-host-name]

配置https server

...
http {
    ...
    # HTTPS server
    server {
       listen       443 ssl;
       server_name  [target-host-name];
       proxy_buffering off;
       ssl_certificate      /usr/local/etc/nginx/ssl/[cert.pem];
       ssl_certificate_key  /usr/local/etc/nginx/ssl/[key.pem];
       ssl_session_cache    shared:SSL:1m;
       ssl_session_timeout  5m;
       ssl_ciphers  HIGH:!aNULL:!MD5;
       ssl_prefer_server_ciphers  on;
       location / {
           root   html;
           index  index.html index.htm;
           proxy_pass          [本地服务，如 http://localhost:8080];
       }
    }
}

设置完毕重启nginx, 访问目标域名，若能访问到你开启的本地服务，则表示设置好了。session

nginx经常使用命令

请经过nginx -h查看post

# 启动nginx
nginx
# 重启nginx
nginx -s reload
# 退出nginx
nginx -s quit

Charles

安装Charles，分别在电脑和手机安装Charles证书，参考：此处-掘金文章

手机添加Charles链接：Help - SSL proxying - Install Charles Root Certificate On a Mobile Device or Remote Browser, 而后按提示：

设置代理，手机链接到与电脑同一wifi, 并设置代理
访问chls.pro/ssl下载证书，并安装证书（若安装失败，需自行找适合你所使用手机的安装方式，参考：https://www.jianshu.com/p/59c... R15是进入WLAN, 拉到底部有个"高级设置" - 安全证书管理从存储设备安装，选择下载的证书并安装）

完毕后，经过手机访问目标域名，查看Charles的抓包，看对应的请求Remote Address是否为[target-host-name]/127.0.0.1:443, Client Address 则为手机的地址。

至此，就成功使得在手机上访问目标域名，实际上访问的是电脑开启的本地服务，达到了能够调试微信js-sdk的目的。

二次使用时大体流程

确认hosts域名映射
确认nginx https-server是否开启
确认要调试的本地服务是否开启
确认Charles打开
确认手机开启代理，且证书没有问题

注意事项

链接的WI-FI不能开启fanqiang