【譯】如何在5分鐘內讓HTTPS在您的本地開發環境中工作

誤入理工科的瘋子發表於2018-01-29
原文網址 : https://juejin.im/post/5a6db896518825732d7fd8e0
HTTP開發環境

文章翻譯自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.key和server.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上關注我，讓我知道。

相關文章