使用 HTTPS 進行本機開發作業

Maud Nalpas
Maud Nalpas

在多數情況下,http://localhost 會以 HTTPS 的形式運作,以利開發。不過,在某些特殊情況下 (例如自訂主機名稱或跨瀏覽器使用安全 Cookie),您必須明確設定開發網站的行為,讓網站像 HTTPS 一樣運作,以便準確呈現網站在實際環境中的運作方式。(如果您的正式網站未使用 HTTPS,請優先改用 HTTPS)。

本頁面說明如何在本機上透過 HTTPS 執行網站。

如需簡短操作說明,請參閱 mkcert 快速參考資料

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

如要使用 HTTPS 與本機開發網站,並存取 https://localhosthttps://mysite.example (自訂主機名稱),您需要由裝置和瀏覽器信任的實體簽署的 TLS 憑證,稱為信任的憑證授權單位 (CA)。瀏覽器會在建立 HTTPS 連線前,檢查開發伺服器的憑證是否由信任的 CA 簽署。

建議您使用跨平台 CA mkcert 建立及簽署憑證。如需其他實用選項,請參閱「透過 HTTPS 在本機執行網站:其他選項」。

許多作業系統都包含用於建立憑證的程式庫,例如 openssl。不過,這些方法比 mkcert 更複雜且可靠性較低,且不一定是跨平台的,因此較不利於大型開發團隊使用。

設定

  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. 將伺服器設為使用 HTTPS 和您剛才建立的 TLS 憑證。

    具體做法因您的伺服器而異,以下提供幾個範例:

    👩?🏻?‍💻? 使用節點:

    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 會設定金鑰。

    👩?🏻?‍💻? 使用 React 開發伺服器:

    請按照下列方式編輯 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"

    👩?🏻?‍💻? 其他範例:

  5. 在瀏覽器中開啟 https://localhosthttps://mysite.example,仔細檢查是否在本機上透過 HTTPS 執行網站。瀏覽器會信任 mkcert 做為本機憑證授權單位,因此不會顯示任何警告。

mkcert 快速參考指引

如要透過 HTTPS 執行本機開發網站,請按照下列步驟操作:

  1. 設定 mkcert。

    如果您尚未安裝 mkcert,請在 macOS 上安裝 mkcert:

    brew install mkcert



    請參閱安裝 mkcert 一文,瞭解 Windows 和 Linux 的操作說明。

    接著,建立本機憑證授權單位:

    mkcert -install
  2. 建立信任的憑證。

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

    這會建立有效的憑證,讓 mkcert 自動簽署。

  3. 將開發伺服器設為使用 HTTPS 和您在步驟 2 中建立的憑證。

您現在可以在瀏覽器中存取 https://{YOUR HOSTNAME},且不會收到警告

</div>

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

以下是設定憑證的其他方法。這些方法通常比使用 mkcert 更複雜或風險更高。

自行簽署的憑證

您也可以選擇不使用 mkcert 等本機憑證授權單位,改為自行簽署憑證。這種做法有一些缺點:

  • 瀏覽器不會信任您是憑證授權單位,因此會顯示警告,您必須手動略過。在 Chrome 中,您可以使用標記 #allow-insecure-localhostlocalhost 上自動略過這項警告。
  • 如果你使用的是安全性不足的網路,這麼做就會不安全。
  • 這不一定比使用 mkcert 等本機 CA 更簡單或更快速。
  • 自行簽署的憑證行為與信任憑證的行為不盡相同。
  • 如果您並未在瀏覽器情境中使用這項技術,則需要為伺服器停用憑證驗證功能。忘記在實際環境中重新啟用會導致安全性問題。
使用自行簽署的憑證時,瀏覽器會顯示警告的螢幕截圖。
使用自行簽署的憑證時,瀏覽器會顯示警告。

如果您未指定憑證,ReactVue 的開發伺服器 HTTPS 選項會在幕後建立自行簽署的憑證。這麼做雖然快速,但會帶來相同的瀏覽器警告和自行簽署憑證的其他陷阱。幸好,您可以使用前端架構內建的 HTTPS 選項,並指定使用 mkcert 或類似工具建立的本機信任憑證。詳情請參閱「使用 React 建立 mkcert」範例。

如果您使用 HTTPS 在瀏覽器中開啟本機執行的網站,瀏覽器會檢查本機開發伺服器的憑證。當系統發現您已親自簽署憑證時,會檢查您是否已註冊為可信任的憑證授權單位。由於您並未信任憑證,因此瀏覽器無法信任憑證,並會顯示警告,指出您的連線不安全。您可以繼續操作,系統仍會建立 HTTPS 連線,但請自行承擔風險。

瀏覽器不信任自行簽署憑證的原因:圖表。
瀏覽器為何不信任自行簽署的憑證。

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

您也可以使用由官方 CA 簽署的憑證。這會帶來以下小工具:

  • 相較於使用 mkcert 等本機 CA 技術,您需要進行更多設定。
  • 您必須使用自己控管的有效網域名稱。也就是說,您無法將官方 CA 用於以下用途:
    • localhost 和其他保留的網域名稱,例如 exampletest
    • 任何你無法控制的網域名稱。
    • 頂層網域無效。詳情請參閱有效頂層網域清單

反向 Proxy

另一種存取在本機上執行的 HTTPS 網站的方法,是使用反向 Proxy (例如 ngrok)。這會帶來下列風險:

  • 您共用反向 Proxy 網址的對象,都可以存取您的本機開發網站。這麼做雖然有助於向客戶展示專案,但也可能讓未經授權的使用者分享機密資訊。
  • 部分反向 Proxy 服務會收取使用費,因此價格可能會是您選擇服務時的考量因素。
  • 瀏覽器中的新安全措施可能會影響這些工具的運作方式。

如果您在 Chrome 中使用 mysite.example 等自訂主機名稱,可以使用標記強制瀏覽器將 mysite.example 視為安全。請勿這麼做,原因如下:

  • 您必須確保 mysite.example 一律會解析為本機位址。否則可能會洩漏實際工作環境憑證。
  • 這個標記只適用於 Chrome,因此無法跨瀏覽器進行偵錯。

感謝所有審查者和作者提供意見回饋,特別感謝 Ryan Sleevi、Filippo Valsorda、Milica Mihajlija 和 Rowan Merewood。🙌?

主頁橫幅背景圖片由 Unsplash 上的 @anandu 提供,經過編輯。