使用 HTTPS 進行本機開發的時機

在多數情況下，使用 http://localhost 進行本機開發沒有問題，但某些特殊情況除外。本文說明何時需要透過 HTTPS 執行本機開發網站。

Maud Nalpas

另請參閱：如何在本機開發中使用 HTTPS。

在本文章中，有關 localhost 的陳述也適用於 127.0.0.1 和 [::1]，因為兩者都描述本機電腦位址，也稱為「迴路位址」。此外，為簡化流程，我們不會指定通訊埠號碼。 因此，當您看到 http://localhost 時，請將其解讀為 http://localhost:{PORT} 或 http://127.0.0.1:{PORT}。

摘要

在本機開發時，請預設使用 http://localhost。Service Worker、Web Authentication API 等功能都能正常運作。不過，在下列情況下，您需要使用 HTTPS 進行本機開發：

  • 偵錯複合型內容問題
  • 使用 HTTP/2 以上版本
  • 使用需要 HTTPS 的第三方程式庫或 API

  • 使用自訂主機名稱

    列出本機開發作業需要使用 HTTPS 的情況。
    何時應在本機開發環境中使用 HTTPS。

✨ 以上就是所有須知。如要瞭解詳情，請繼續閱讀！

為什麼開發網站應確保安全

為避免發生非預期問題，您希望本機開發網站的運作方式盡可能與實際網站相同。因此，如果您的正式版網站使用 HTTPS，您會希望本機開發網站像 HTTPS 網站一樣運作。

根據預設使用 http://localhost

瀏覽器會以特殊方式處理 http://localhost：雖然是 HTTP，但大部分行為都與 HTTPS 網站類似。

在 http://localhost 上，系統支援 Service Worker、感應器 API、驗證 API、付款和其他需要特定安全保障的功能，且運作方式與 HTTPS 網站完全相同。

何時應使用 HTTPS 進行本機開發

在特殊情況下，http://localhost 可能不會像 HTTPS 網站一樣運作，或者您可能只是想使用非 http://localhost 的自訂網站名稱。

在下列情況中，您需要使用 HTTPS 進行本機開發：

  • 您需要在本機偵錯問題，這類問題只會發生在 HTTPS 網站上，不會發生在 HTTP 網站上，甚至連 http://localhost 也不會發生，例如複合型內容問題。
  • 您需要在本機測試或重現 HTTP/2 以上版本特有的行為。舉例來說，如果您需要測試 HTTP/2 以上版本的載入效能，不支援不安全的 HTTP/2 或更新版本，即使在 localhost 上也不例外。
  • 您需要在本機測試需要 HTTPS 的第三方程式庫或 API (例如 OAuth)。

  • 您並未使用 localhost，而是使用本機開發的自訂主機名稱，例如 mysite.example。通常這表示您已覆寫本機主機檔案：

    終端機編輯主機檔案的螢幕截圖
    編輯 hosts 檔案，新增自訂主機名稱。

    在這種情況下，Chrome、Edge、Safari 和 Firefox 預設不會將 mysite.example 視為安全，即使這是本機網站也一樣。因此不會像 HTTPS 網站一樣運作。

  • 其他案例！這份清單僅列舉部分情況，但如果您遇到未列於此處的情況，您會發現 http://localhost 上的內容會中斷，或行為與正式環境網站不太相同。🙃

在上述所有情況下，您都需要使用 HTTPS 進行本機開發。

如何使用 HTTPS 進行本機開發

如要在本機開發中使用 HTTPS，請參閱「如何在本地開發中使用 HTTPS」。

使用自訂主機名稱時的注意事項

如果您使用自訂主機名稱，例如編輯主機檔案：

  • 請勿使用裸露主機名稱 (例如 mysite)，因為如果頂層網域 (TLD) 剛好有相同名稱 (mysite)，就會發生問題。這並非不可能：2020 年有超過 1,500 個 TLD，而且這個數字還在增加。coffee、museum、travel 和許多大型公司名稱 (可能包括您任職的公司！) 都是 TLD。請參閱這裡的完整清單。
  • 請只使用您擁有的網域，或專為此用途保留的網域。如果您沒有自己的網域，可以使用 test 或 localhost (mysite.localhost)。瀏覽器不會特別處理 test，但會特別處理 localhost：Chrome 和 Edge 支援 http://<name>.localhost，且在 localhost 執行時會安全無虞。試試看：在 localhost 上執行任何網站，然後在 Chrome 或 Edge 中存取 http://<whatever name you like>.localhost:<your port>。這項功能可能很快也會在 Firefox 和 Safari 中推出。您可以這麼做 (擁有類似 mysite.localhost 的子網域)，是因為 localhost 不只是主機名稱，也是完整的頂層網域，例如 com。

瞭解詳情

特別感謝所有審查人員的貢獻和意見回饋，尤其是 Ryan Sleevi、Filippo Valsorda、Milica Mihajlija、Rowan Merewood 和 Jake Archibald。🙌

主頁橫幅圖片由 @moses_lee 提供，取自 Unsplash，並經過編輯。