設定macOS本地端HTTPs/SSL證書

嗨嗨嗨 你好(・ω・)ノ

想在localhost測試時擁有小鎖嗎？這篇文章告訴你如何在macOS上產生自簽名(self-signed)的SLL證書。你可以在本地端(localhost)用這個來架設一個HTTPs網頁伺服器/服務器進行內網測試。實際操作時間約5–10分鐘。

經測試同樣方法可用於Ubuntu。

1. 確保你有安裝 openssl

你可以在Terminal打 openssl version 來看有沒有安裝。如果報錯說沒有的話，考慮用Homebrew安裝： brew install openssl 安裝。不知道Homebrew是做什麼的話請Google一下。

2. 創建一個儲存SSL憑證的檔案夾

比如說 ~/certs/ssl/localhost/ 或者 node.js 項目的 src/ 下面（這兩個檔案夾如果沒有都可以自建）。請在Terminal中 cd 到這個檔案夾再進行下列操作。

3. 用RSA算法產生host端的公私鑰（2048 bit）

sudo openssl genrsa -out localhost.key 2048
sudo openssl rsa -in localhost.key -out localhost.key.rsa

第一次跑sudo會需要輸入Mac使用者密碼

4. 創建一個等一下用的設定檔localhost.conf

你可以直接用熟悉的Text editor如Sublime、VS code等完成這一步，也可以用Terminal里的nano或vim。這裡範例是用Terminal裏的nano：

sudo nano localhost.conf

複製粘貼下面到Terminal打開的編輯介面：

[req]
default_bits = 1024
distinguished_name = req_distinguished_name
req_extensions = v3_req
[req_distinguished_name]
[v3_req]
basicConstraints = CA:FALSE
keyUsage = nonRepudiation, digitalSignature, keyEncipherment
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost
DNS.2 = *.local

在Terminal app用 ctrl+X退出文件，然後在被詢問是否要儲存變更時按 y鍵，最後按下 enter確認檔案名字。

這裡注意檔案最後有個 DNS.2 是一個 wildcard *.local，那這裡也是推薦其他電腦連結你的電腦的時候用 xxx.local 的方式連結，而不是用IP，Chrome才會給你「我知道危險但還是要繼續」的選項。你的電腦在局域網上的 xxx.local 名稱一般是你的username，macOS 可以去 系統偏好設定 → 共享 看，是最上面那一串。

你知道嗎？在系統偏好設定->共享 的最上面是你的電腦在本地網路的暱稱，就算你的電腦IP位置有改變，其他電腦還是可以通過 xxx.local 找到你的電腦喔。

5. 創建證書署名要求(CSR)

sudo openssl req -new -key localhost.key.rsa -subj "/C=TW/ST=Taipei City/L=Daan District/O=HappinessNeverEnds/CN=localhost/" -out localhost.csr -config localhost.conf

那個 C= ST= L= O= CN= 的地方是給你填公司架構的，都可以留空。定義如下：
C= 國家兩位ISO代碼，台灣是TW
ST= eq. 州/省/郡/縣/直轄市等國家下面第一級行政劃分
L= eq. 市/鎮/鄉等二級劃分
O= eq. 組織名稱
CN= eq. 伺服器域名名稱‍

6. 創建並簽署你的SSL證書(CRT)

sudo openssl x509 -req -extensions v3_req -days 365 -in localhost.csr -signkey localhost.key.rsa -out localhost.crt -extfile localhost.conf

7. 讓連接的客戶端承認這個證書

Mac 的話請跑：

sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain localhost.crt

這個在自己的電腦和其他內網測試用電腦都一樣跑，只要把 localhost.crt 發給他們就好。

Windows 10的話（我自己沒測過）：

Windows 10: Chrome, IE11 & Edge

1. 把 localhost.crt 發給內網內要連線的Windows
2. 在Windows 上右鍵點擊 localhost.crt ，選擇安裝。
3. 勾選 “Trusted Root Certification Authorities （信任簽發機構）” ，點確認.

Windows 10: Firefox

第一種做法：URL框輸入 about:config ，把 security.enterprise_roots.enabled 設成 true.

第二種做法：URL框輸入 about:preferences#privacy ，去 Certificats > Import > localhost.key.rsa ，然後 Confirm for websites.

8. 伺服器設定

node.js 範例：

新建目錄，cd進去。

跑

npm init
npm install express
mkdir src && cd src
nano index.js

貼上：

var fs = require('fs');
var http = require('http');
var https = require('https');
var privateKey  = fs.readFileSync('src/localhost.key');
var certificate = fs.readFileSync('src/localhost.crt');
var credentials = {key: privateKey, cert: certificate};
var express = require('express');
var app = express();
var httpServer = http.createServer(app);
var httpsServer = https.createServer(credentials, app);
httpServer.listen(8080);
httpsServer.listen(8443);

一樣 ctrl+X退出，按 y鍵儲存變更，按 enter確認檔案名字。

cd ..
node src/index.js

這時候你就可以通過 http://localhost:8080 或者 https://localhost:8443 來訪問你的網站了。

可以看到 localhost.key 是所需的私鑰private key， localhost.crt 是所需的證書 certificate。

Trouble shooting

如果一切順利，你應該要有以下五個檔案：

localhost.conf
localhost.crt
localhost.csr
localhost.key
localhost.key.rsa