微信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的目的。