設定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

--

--

--

A broke coder, designer, etc. Fun game.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mangle Kuo

Mangle Kuo

A broke coder, designer, etc. Fun game.

More from Medium

How To Install MongoDB (5.0) in Ubuntu 20.04 / 18.04 Server

Oh, You’ve got your first CORS error?

Basic Auth only for a specific domain

How to deploy an Angular/Node App on AWS EC2 (Linux 2 AMI) with SSL (CertBot)