记一次 Charles 代理本地域名引发的 HTTPS 惨案

2,232 阅读3分钟

前言

今天是 2022-07-23,心心念念的个人项目终于向前迈了一步,因为今天要开始做第三方登录接口了,之前前前后后折腾了快有半年了,这是掘金项目开发最慢的一个了吧,也可能是因为自己代码洁癖,架构洁癖的原因,前端、后端反复推翻重写,还好数据库没有推翻重新设计。

背景

  • 由于上述原因,今天打算完成做微信网站应用登录、微信公众号登录、以及 GitHub 登录相关第三方平台登录功能,由于众所周知的原因,国内创建应用做 OAuth 登录需要审核应用(这点必须吐槽微信,认证要收费,强烈反对)。
  • 由于我只认证了一个微信网站应用、一个微信公众号,回调域名只能设置一个,故而想起来 Charles 神器,他有一个 Map Remote 功能,非常好用,支持域名拦截转发到本地开发地址。
  • 例如:httpshttp 转发到本地。
  • https://account.xxxx.com 转发到本地服务 localhost:8080
  • http://account.xxxx.com 转发到本地服务 localhost:8080
  • https://api.xxxx.com 转发到本地服务 localhost:8080
  • http://api.xxxx.com 转发到本地服务 localhost:8080

惨案

  • 从早上开始到本文产出之前,期间我经历了惨无人寰的绝望。
  • 在这期间,我正常按操作做了本地映射等一系列正常操作,截图如下: image.png

ERR_TUNNEL_CONNECTION_FAILED 错误噩梦

  • 惨案发生了,https://account.xxx.com 访问一切正常,换到 https://api.xxx.com 怎么都不访问不了,始终抛出一个错误,ERR_TUNNEL_CONNECTION_FAILED
  • ERR_TUNNEL_CONNECTION_FAILED,这个错误,大致是由于建立链接隧道异常导致的,换句话说,浏览器请求证书链失败。
  • https://account.xxx.com 域名证书如下 image.png
  • account 证书也看过是走了 Charles Root CA,这个是没有问题。
  • api 访问始终不得解。
  • 然后在这期间做过如下操作:
    • 1、怀疑是代理软件问题,删掉代理软件重装
    • 2、怀疑是映射规则有变化,去官网反查版本更新日志
    • 3、怀疑是代理软件根证书问题,重置了根证书

破案

  • 基本上,这些搞完我就开始细想浏览器可能跟HTTPS缓存有关系,因为我线上是部署了 account 域名服务,并开启了SSL证书,而且还访问过,所以浏览器在我开启了本地转发的时候,域名证书已经在本地了,所以无需再次请求证书链。
  • 经过验证,在服务器建立下api服务,然后本地访问下,建立下本地缓存,就可以愉快的使用转发代理啦。
  • 至此真像可能大白,因为我还没有具体抓包验证,后续再出一个抓包验证过程。

最后

  • 给大家放几张预览图吧

登录页入口

image.png

微信内网页登录

image.png

PC 端扫码登录

image.png