运行带--ssl的Angular开发服务器时Firefox报SEC_ERROR_INADEQUATE_KEY_USAGE错误

问题描述 #

使用命令ng serve --port 5001 --ssl --no-live-reload运行Angular应用时，Firefox无法加载页面，报错：

连接到localhost:5001时发生错误。证书密钥用法不足以完成尝试的操作。
错误代码：SEC_ERROR_INADEQUATE_KEY_USAGE

Chrome可正常访问，通过Visual Studio运行包含该Angular应用的.NET项目时也无问题。已尝试以下操作但无效：

• 删除Firefox配置目录中的cert9.db和cert_override.txt文件
• 在about:config中启用ImportEnterpriseRoots
• 删除项目目录中/node_modules/webpack-dev-server/ssl/server.pem文件

原因分析 #

Firefox对SSL证书的密钥用法（Key Usage）和扩展密钥用法（Extended Key Usage）检查比Chrome更严格。webpack-dev-server自动生成的默认自签证书通常缺少serverAuth扩展密钥用途，导致Firefox判定证书不符合要求。

解决方案 #

1. 生成符合要求的自定义自签SSL证书 #

使用OpenSSL生成包含正确密钥用法的证书：

• 生成私钥：

  openssl genrsa -out server.key 2048
  

• 创建证书签名请求（CSR）：

  openssl req -new -key server.key -out server.csr
  

  按提示填写信息，Common Name必须设为localhost。
• 创建openssl.cnf配置文件，添加必要的扩展字段：

  [req]
  distinguished_name = req_distinguished_name
  x509_extensions = v3_req
  prompt = no
  
  [req_distinguished_name]
  CN = localhost
  
  [v3_req]
  keyUsage = digitalSignature, keyEncipherment
  extendedKeyUsage = serverAuth
  subjectAltName = @alt_names
  
  [alt_names]
  DNS.1 = localhost
  

• 生成带扩展的自签证书：

  openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt -extfile openssl.cnf -extensions v3_req
  

  将生成的server.key和server.crt放在Angular项目根目录。

2. 配置Angular CLI使用自定义证书 #

修改项目根目录的angular.json，在architect > serve > options节点下添加证书路径：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "your-project-name:build",
    "port": 5001,
    "ssl": true,
    "sslKey": "./server.key",
    "sslCert": "./server.crt",
    "noLiveReload": true
  }
}

替换your-project-name为实际项目名称。

3. 在Firefox中信任自定义证书 #

• 打开Firefox，进入设置页面，搜索“证书”，点击「查看证书」
• 切换到「证书机构」标签，点击「导入」，选择生成的server.crt文件
• 勾选「信任此证书识别网站」，点击确定完成导入

4. 重启服务和浏览器 #

停止当前的ng serve进程，重新执行ng serve --port 5001 --ssl --no-live-reload，然后重启Firefox访问页面。

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