【译】如何在5分钟内让HTTPS在您的本地开发环境中工作

16,762 阅读4分钟

文章翻译自How to get HTTPS working on your local development environment in 5 minutes

Image

今天,几乎所有你访问的网站都是受HTTPS保护的。如果你还没有这样做,是时候这样做了。使用HTTPS保护您的服务器也就意味着您无法从非HTTPS的服务器发送请求到此服务器。这对使用本地开发环境的开发人员来说是一个问题,因为这些本地开发环境都是运行在http://localhost下的。

在启动过程中,我们决定使用HTTPS来保护我们的AWS Elastic Load Balancer endpoints,作为增强安全性的一部分。一开始的时候我遇到了一个问题,我的本地开发环境对服务器的请求被拒绝。

通过快速谷歌搜索后,我发现一些文章也许对我有用,像这个这个或者这个,它们都有关于localhost如何实现HTTPS的详细说明。但即使按照这些指示亦步亦趋,最后却都失败了。Chrome总是向我抛出一个NET::ERR_CERT_COMMON_NAME_INVALID

Image

问题

这些文章中的所有步骤都是正确的,但那仅限于它们被发布的时间点,而不是现在。

经过大量的谷歌搜索之后,我发现我的本地证书被拒绝的原因是,Chrome已经不再支持证书中的commonName匹配,实际上,自2017年1月起需要subjectAltName这个规则了。

解决方案

我们将使用OpenSSL生成所有的证书。

  • 第1步:根SSL证书

第一步是创建一个安全套接层(SSL)证书。然后可以使用此根证书为可能为单个域生成的任意数量的证书签名。如果您不熟悉SSL生态系统,那么来自DNSimple这篇文章在介绍Root SSL证书方面做得很好。

生成一个RSA-2048密钥并保存到一个文件rootCA.key。该文件将被用作生成根SSL证书的密钥。系统将提示您输入密码,每次使用此特定密钥生成证书时都需要输入该密码。

openssl genrsa -des3 -out rootCA.key 2048

您可以使用您生成的密钥来创建新的根SSL证书。并将其保存为rootCA.pem。这个证书将有1,024天的有效期。你可以随意将其更改为任何您想要的天数。在这一过程中,你还将被提示输入其他可选信息。

openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem

Image

  • 第2步:信任根SSL证书

做完这一步,你就可以使用你新创建的根SSL证书了。您需要告诉您的Mac相信您的根证书,因此所颁发的所有单个证书也都是可信的。

Mac上打开“钥匙串访问”,然后转到“系统”中的证书列表,通过点击+号按钮导入证书rootCA.pem,按照提示输入密码, 并将“使用此证书时:”下拉列表中的“ 始终信任 ”选中

如果你上面所有事情都做对了的话,你的“钥匙串访问”看起来应该是这样。

Image

  • 第3步:域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

Image

使用您的新SSL证书 您现在已经准备好localhost使用HTTPS 来保护您的安全。将文件server.keyserver.crt文件移动到服务器上可访问的位置,并在启动服务器时将其包含在内。

在用Node.js编写的Express应用程序中,以下是您要做的事情。确保你只为你的本地环境做到这一点。不要在生产中使用它

dev-server.js hosted with ❤ by Github

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)

Image

我希望你发现这个教程有用。如果您不熟悉运行这里给出的命令,我已经创建了一套可以快速运行的便捷脚本来为您生成证书。更多细节可以在GitHub仓库中找到。

我喜欢帮助其他Web开发人员。如果您有任何建议或反馈,请在Twitter上关注我,让我知道。