IOS/MacOS App环境本地HTTPS URL无法正常使用的解决方案

452 阅读1分钟

目前项目主要打包工具Webpack v5可支持配置自签名证书,但大部分项目未直接使用Webpack,而是使用了vue-cli-service v3~v4,在vue-cli-service v5.0.0-beta.3 方才支持Webpack v5,故配置自签名证书会有一定的改造成本且未向后兼容。

前言

IOS 9 引入了新特性App Transport Security (ATS),该新特性要求App内访问的网络必须使用HTTPS协议。

背景

目前存在一个这样的现象,前端调试本地https链接在IOS/MacOS App无法打开,具体表现如下:

  • 在微信App环境下打开本地https链接时会弹窗提示证书无效,点击确认后将在默认浏览器里打开;
  • 在浏览器里会提示HTTPS 证书无效,点击「继续浏览页面」可以正常打开该链接;
  • 在画啦啦少儿美术小班课等App中则未正常解析该URL,并显示为空白页面;

目标

IOS/MacOS App环境本地HTTPS URL可正常使用。

调研方案

  1. 向Info.plist添加配置项NSAppTransportSecurity
  2. 尝试手动信任(MacBook 实测可行;iphone 不可行,提示此服务器无法证明它是**;其安全证书来自localhost,即未通过CA认证);
  3. 申请证书,并应用到本地服务器(本地服务器改动大,未向后兼容);

解决方案

解决方案为通过脚本在打包时改写代码,注入相关代码,只在选择环境的dev和test时生效。,如此便可正常使用新版的dev、test环境打包的IOS APP来调试本地HTTPS页面。