如何为React、Cordova、Ionic及Android应用设置SSL证书

首先明确你要配置的SSL场景分为两类，操作方式完全不同：

1. 本地开发环境启用带自定义证书的HTTPS服务 #

该场景支持直接在package.json中配置，操作步骤如下：

• 先将你的SSL证书文件（.crt格式公钥、.key格式私钥）放到项目根目录，可新建专门的ssl文件夹统一存放
• 打开项目根目录的package.json，找到scripts字段下的start命令，根据启动方式修改：
  用Ionic官方命令启动的修改为：

  "start": "ionic serve --ssl --cert ./ssl/你的证书文件名.crt --key ./ssl/你的私钥文件名.key"
  

  直接用React原生devServer启动的修改为：

  "start": "HTTPS=true SSL_CRT_FILE=./ssl/你的证书文件名.crt SSL_KEY_FILE=./ssl/你的私钥文件名.key react-scripts start"
  

  Windows环境下无法识别环境变量的，先安装cross-env依赖，再修改命令为：

  "start": "cross-env HTTPS=true SSL_CRT_FILE=./ssl/你的证书文件名.crt SSL_KEY_FILE=./ssl/你的私钥文件名.key react-scripts start"
  

• 修改完成后重新执行启动命令，本地开发服务就会使用你指定的SSL证书走HTTPS协议。

2. 打包为移动端App后的SSL配置 #

该场景不需要修改package.json，走Cordova框架配置即可：

• 先将你后端接口对应的根证书/站点证书放到Cordova项目的res/raw目录下，没有该目录可自行创建
• 普通接口请求无需额外配置，axios、fetch等前端请求库会默认信任设备内置的根证书；如果需要做证书固定防止中间人攻击，可安装cordova-plugin-advanced-http插件，初始化时绑定证书即可：

  cordova.plugin.http.setServerTrustMode("pinned", {
    hostName: "你的后端接口域名",
    certificates: ["你的证书文件名.crt"]
  }, () => {}, () => {})
  

• 若WebView加载的页面需要信任自定义证书，可在Cordova的config.xml中添加对应配置即可，不建议开启允许不信任证书的参数，会带来安全风险。

内容的提问来源于stack exchange，提问作者Jessie