线上环境开启 https
请移步 给站点开启 https 和 http2
本文这里要说的是如何在本地环境搭建 https
,至于说有什么用,假如你找到这了, 就说明你已经用到了.
Chrome NET::ERR_CERT_COMMON_NAME_INVALID
虽然你配置了本地的证书,但是总是本地证书被拒绝的,原因是 Chrome
已经弃用了对证书中 commonName
匹配的支持,实际上,自 2017 年 1 月起需要一个 subjectAltName
。
解决方案
使用 OpenSSL
生成所有证书。
第 1 步:根 SSL 证书
第一步是创建根安全套接字层(SSL)证书。然后,可以使用此根证书对可能为各个域生成的任意数量的证书进行签名。
生成 RSA-2048 密钥并将其保存到文件中 rootCA.key
。此文件将用作生成根 SSL
证书的密钥。系统将提示您输入密码,每次使用此特定密钥生成证书时都需要输入密码。
openssl genrsa -des3 -out rootCA.key 2048
您可以使用生成的密钥创建新的 Root SSL
证书。将其保存到名为的文件中 rootCA.pem
。该证书的有效期为 1,024 天。随意将其更改为您想要的任意天数。系统还会提示您输入其他可选信息。
openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem
第 2 步:信任根 SSL 证书
在您可以使用新创建的根 SSL
证书开始颁发域证书之前,还有一个步骤。您需要告诉您的 Mac 信任您的根证书,以便它所发布的所有单个证书也是可信的。
在 Mac 上打开 Keychain Access
,然后转到系统钥匙串中的“证书”类别。在那里,导入 rootCA.pem
使用文件>导入项目。双击导入的证书,并在“ 信任”部分中将“使用此证书时:”下拉列表更改为“ 始终信任 ” 。
如果您已按照说明正确操作,那么您的证书应该在 Keychain Access
中看起来像这样。
第 2 步:域 SSL 证书
根 SSL 证书现在可用于专门为您所在的本地开发环境颁发证书 localhost。
创建新的 OpenSSL 配置文件,server.csr.cnf
,把以下内容粘贴进去,以便在创建证书时导入这些设置,注意不是在命令行中输入它们。
[req]
default_bits = 2048
prompt = no
default_md = sha256
distinguished_name = dn
[dn]
C=US
ST=RandomState
L=RandomCity
O=RandomOrganization
OU=RandomOrganizationUnit
emailAddress=hello@example.com
CN = localhost
创建 v3.ext
文件,复制以下内容粘贴进入, 以创建 X509 v3
证书。请注意在 subjectAltName
这里指定的方式
authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost
创建证书密钥以 localhost
使用存储的配置设置 server.csr.cnf
。该密钥存储在 server.key
。
openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config <(cat server.csr.cnf)
证书签名请求是通过我们之前创建的根 SSL
证书发出的,用于创建域证书 localhost
。输出是一个名为的证书文件 server.crt
。
openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext
使用新的 SSL 证书
您现在已准备好 localhost
使用 HTTPS
保护您的安全。将 server.key
和 server.crt
文件移动到服务器上的可访问位置,并在启动服务器时包含它们。
Node 中的使用
代码语言:javascript复制var path = require("path");
var fs = require("fs");
var express = require("express");
var https = require("https");
var certOptions = {
key: fs.readFileSync(path.resolve("build/cert/server.key")),
cert: fs.readFileSync(path.resolve("build/cert/server.crt")),
};
var app = express();
var server = https.createServer(certOptions, app).listen(443);
devServer 中的使用
代码语言:javascript复制const fs = require('fs')
const path = require('path');
devServer: {
// http2: true, //这里可以开启http2
https: {
key: fs.readFileSync(path.join(__dirname "/server.key")),
cert: fs.readFileSync(path.join(__dirname "/server.crt")),
ca: fs.readFileSync(path.join(__dirname "/rootCA.pem")),
},
....
}
使用脚本一步到位
假如你是懒癌, 或者怕敲错代码,而导致无法完成 https 配置. 可以使用脚本.
一键生成证书脚本
1. 克隆库,cd 进入目录
代码语言:javascript复制git clone https://gitee.com/chuchur/local-cert-generator.git
cd local-cert-generator
2. 运行脚本以创建根证书:
代码语言:javascript复制sh createRootCA.sh
3 . 将刚刚生成的根证书添加到可信证书列表中。此步骤取决于您运行的操作系统:
macOS
:打开 Keychain Access
并将根证书导入您的系统钥匙串。然后将证书标记为受信任。
注意:您可能需要重新启动浏览器才能正确加载新受信任的根证书。
4.运行脚本以创建域证书 localhost:
代码语言:javascript复制sh createSelfSigned.sh
5. 拷贝 server.key
和 server.crt
到项目对应的目录 在相关配置启用即可