使用 HTTPS 進行本機開發作業

Maud Nalpas

在多數情況下，http://localhost 的運作方式會與 HTTPS 相同，以便執行開發作業 用途。不過，一些特殊情況 例如自訂主機名稱或跨瀏覽器使用安全 Cookie 明確地將開發網站設為 呈現網站的正式環境(如果正式版網站並未 使用 HTTPS (優先改用 HTTPS)。

本頁說明如何使用 HTTPS 在本機執行網站。

注意： 在這篇文章中，localhost 的相關陳述式適用於 127.0.0.1 和 也包含 [::1]，因為這兩者都說明瞭本機電腦位址 (也可以 稱為回送地址)。為求簡單起見 指定通訊埠編號。因此，當您看到 http://localhost 時，請參考 http://localhost:{PORT}或http://127.0.0.1:{PORT}。

如需簡要操作說明，請參閱 mkcert 快速參考資料。**

使用 mkcert ，透過 HTTPS 在本機執行網站 (建議)

如要在本機開發網站上使用 HTTPS，並存取 https://localhost 或 https://mysite.example (自訂主機名稱)，您需要 傳輸層安全標準 (TLS) 憑證 由裝置和瀏覽器信任的實體簽署 (稱為「可信任」) 憑證授權單位 (CA)。 瀏覽器會檢查開發伺服器的憑證是否由 再建立 HTTPS 連線。

建議您使用 mkcert， 跨平台 CA 建立及簽署憑證。如需其他實用資訊 選項，請參閱使用 HTTPS 在本機執行網站：其他選項。

許多作業系統都包含用來建立憑證的程式庫，例如 openssl.不過，它們會比較複雜，也較不複雜 但不一定是跨平台憑證 較不容易取得

注意：

• 執行 mkcert -install 時，請勿匯出或分享 mkcert 自動建立的檔案 rootCA-key.pem。攻擊者如果取得這個檔案，因此你可能會造訪任何網站，發動路徑上攻擊。例如攔截機器、銀行、醫療服務提供者或社群網路等網站發出的安全要求。如果您需要知道 rootCA-key.pem 的所在位置以確保安全，請執行 mkcert -CAROOT。
• 您只能將 mkcert 用於開發，此外也切勿要求使用者執行 mkcert 指令。
• 開發團隊：所有團隊成員應分別安裝及執行 mkcert (而非儲存及共用 CA 和憑證)。

設定

1. 安裝 mkcert (僅一次)。

   按照操作說明進行 在作業系統上安裝 mkcert例如，在 macOS 上：

   brew install mkcert
   brew install nss # if you use Firefox
   

2. 將 mkcert 新增至本機根 CA。

   在終端機中執行下列指令：

   mkcert -install
   

   這會產生本機憑證授權單位 (CA)。 mkcert 產生的本機 CA 只會信任本機在裝置上。

3. 為您的網站產生憑證，並由 mkcert 簽署。

   在終端機中，前往網站的根目錄，或 目標目錄。

   接著執行：

   mkcert localhost
   

   如果您使用自訂主機名稱 (例如 mysite.example)，請執行以下指令：

   mkcert mysite.example
   

   這個指令會執行兩項作業：

   • 為您指定的主機名稱產生憑證。
   • 讓 mkcert 簽署憑證。

   您的憑證現已準備就緒，並由憑證授權單位簽署： 瀏覽器信任本機

4. 將伺服器設為使用您剛建立的 TLS 憑證的 HTTPS。

   詳細指示會因您的伺服器而異。以下列舉幾個例子：

   💡? 💻? 訂閱：

   server.js (取代 {PATH/TO/CERTIFICATE...} 和 {PORT})：

   const https = require('https');
   const fs = require('fs');
   const options = {
     key: fs.readFileSync('{PATH/TO/CERTIFICATE-KEY-FILENAME}.pem'),
     cert: fs.readFileSync('{PATH/TO/CERTIFICATE-FILENAME}.pem'),
   };
   https
     .createServer(options, function (req, res) {
       // server code
     })
     .listen({PORT});
   

   💡? 💻? 使用 http-server：

   按照下列方式啟動伺服器 (取代 {PATH/TO/CERTIFICATE...})：

   http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem
   

   -S 會透過 HTTPS 執行伺服器，-C 則會設定憑證，-K 則會設定金鑰。

   💡? 💻? 開發伺服器：

   按照下列方式編輯 package.json，並取代 {PATH/TO/CERTIFICATE...}：

   "scripts": {
   "start": "HTTPS=true SSL_CRT_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL_KEY_FILE={PATH/TO/CERTIFICATE-KEY-FILENAME}.pem react-scripts start"
   

   舉例來說，如果您為 localhost 在網站的 根目錄：

   |-- my-react-app
       |-- package.json
       |-- localhost.pem
       |-- localhost-key.pem
       |--...
   

   那麼 start 指令碼看起來會像這樣：

   "scripts": {
       "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"
   

   💡? Ъ 其他範例：

   • Angular 開發伺服器
   • Python

5. 在瀏覽器中開啟 https://localhost 或 https://mysite.example 即可執行以下操作： 仔細檢查網站是否使用 HTTPS 進行測試。你不會看見任何 瀏覽器警告，因為你的瀏覽器信任 mkcert 為本機憑證 授權。

mkcert 快速參考

mkcert 快速參考

如何透過 HTTPS 執行本機開發網站：

1. 設定 mkcert。

   如果您尚未安裝 mkcert，請在 macOS 上安裝：

   brew install mkcert
   
   
   

   檢查安裝 mkcert 適用於 Windows 和 Linux 平台

   然後建立本機憑證授權單位：

   mkcert -install

2. 建立信任的憑證。

   mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}

   這項操作會建立 mkcert 自動簽署的有效憑證。

3. 將開發伺服器設為使用 HTTPS 和憑證 建立

你現在可以直接在瀏覽器中使用 https://{YOUR HOSTNAME}，沒有任何警告訊息

注意： 此做法僅用於開發 用途，且絕不匯出或分享檔案 rootCA-key.pem。如果你有這個檔案的位置 請在不影響安全的情況下執行 mkcert -CAROOT。

</div>

使用 HTTPS 在本機執行網站：其他選項

以下是設定憑證的其他方式。這些一般都會 比起使用 mkcert 更加複雜或風險更高。

自行簽署的憑證

您也可以決定不使用本機憑證授權單位 (例如 mkcert)，且 請改為自行簽署憑證。此方法有一些陷阱：

• 瀏覽器不會信任你的憑證授權單位，因此會顯示警告訊息 手動略過您可以在 Chrome 中使用 #allow-insecure-localhost，即可在以下時間自動略過這項警告： localhost。
• 當你在不安全的網路中工作時，這並不安全。
• 使用本機 CA (例如 mkcert) 並不容易，甚至更快。
• 自行簽署憑證的行為與受信任的憑證不同 憑證
• 如果未在瀏覽器中使用這項技巧，則必須停用 驗證伺服器憑證忘記重新啟用這個功能 造成安全性問題。

，瞭解如何調查及移除這項存取權。

使用自行簽署的憑證時，瀏覽器會顯示警告瀏覽器。

如果沒有指定憑證，React 的 和 Vue's 開發伺服器 HTTPS 選項 。雖然速度很快，但也包含相同的瀏覽器警告和其他 自行簽署憑證的陷阱幸好，您可以使用 架構內建 HTTPS 選項，並指定本機信任的憑證 以 mkcert 或類似服務建立。詳情請參閱 mkcert with React 範例。

為什麼瀏覽器不信任自行簽署的憑證？

如果在瀏覽器中使用 HTTPS 開啟本機執行的網站， 瀏覽器會檢查本機開發伺服器的憑證。時機 系統會檢查您是否已自行簽署憑證， 您已註冊為信任的憑證授權單位。因為您 則表示瀏覽器無法信任憑證，而會顯示警告訊息 表示連線不安全。仍可建立 HTTPS 但您必須自行承擔風險。

為什麼瀏覽器不信任自行簽署的憑證。

由一般憑證授權單位簽署的憑證

您也可以使用由官方 CA 簽署的憑證。這個隨附的 下列小工具：

• 相較於使用本機 CA 技術 (例如 mkcert
• 你必須使用自己控管的有效網域名稱。這表示您無法 針對以下項目使用官方 CA：
  • localhost 和其他保留 網域名稱，例如 example 或 test。
  • 任何您無法控管的網域名稱。
  • 頂層網域無效。詳情請參閱有效頂層網域清單。

反向 Proxy

您也可以選擇使用 反向 Proxy，例如 ngrok。這伴隨下列風險：

• 凡是你分享反向 Proxy 網址的使用者，都能存取你的本機開發檔案 網站。向客戶展示專案時非常實用，但也很實用 讓未經授權的人士分享機密資訊
• 部分反向 Proxy 服務會收取使用費，因此定價也許是考量因素 所選服務
• 瀏覽器新推出的安全措施可能會影響 這些工具的運作方式

旗標 (不建議)

如果您在 Chrome 中使用自訂主機名稱 (例如 mysite.example)，即可使用 旗標，強制瀏覽器將 mysite.example 視為安全網站。請避免執行這項操作 原因如下：

• 您必須 100% 確保 mysite.example 一律會解析為本機 讓我們看看 DNS 解析 進一步探索內部和外部位址否則可能會導致正式環境憑證外洩。
• 這個標記僅適用於 Chrome，因此您無法對不同瀏覽器進行偵錯。

非常感謝所有審查員和貢獻者的貢獻與意見回饋，特別是 Ryan Sleevi Filippo V 此外 rda、Mihajlija 和 Rowan Merewood。🙌

主頁橫幅背景由 @anandu 在 Unsplash 上編輯。