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

除非某些特殊情況，否則在大部分情況下，使用 http://localhost 進行本機開發。本文將說明使用 HTTPS 執行本機開發網站的時機。

Maud Nalpas
Maud Nalpas
X GitHub

另請參閱：如何使用 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 進行本機開發：

  • 在不同瀏覽器中以一致的方式設定安全 Cookie
  • 偵錯複合型內容問題
  • 使用 HTTP/2 以上版本
  • 使用需要 HTTPS 的第三方程式庫或 API

  • 使用自訂主機名稱

    需要使用 HTTPS 進行本機開發作業的情況清單。
    使用 HTTPS 進行本機開發作業的時機。

✨ 凡是你想要知道的事項。如需瞭解詳情，請繼續閱讀！

為何您的開發網站必須安全無虞

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

根據預設使用 http://localhost

瀏覽器會以特殊方式處理 http://localhost：雖然是 HTTP，但大多數運作方式與 HTTPS 網站相同。

在 http://localhost 上，系統會支援 Service Worker、感應器 API、Authentication API、Payment 和其他需要特定安全性保證的功能，這些功能在 HTTPS 網站上的運作方式也完全相同。

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

您可能會遇到特殊情況，也就是 http://localhost「不」以 HTTPS 網站的運作方式，或只是想使用非 http://localhost 的自訂網站名稱。

在下列情況下，您必須使用 HTTPS 進行本機開發作業：

  • 您必須在本機設定 Cookie 為 Secure 或 SameSite:none，或是含有 __Host 前置字元。Secure Cookie 只能在 HTTPS 上設定，而並非所有瀏覽器都設為 http://localhost。此外，由於 SameSite:none 和 __Host 也需要 Cookie 為 Secure，因此在本機開發網站上設定這類 Cookie 也必須使用 HTTPS。

  • 您必須針對只有位於 HTTPS 網站 (而非 HTTP 網站，http://localhost) 的本機問題進行偵錯，例如複合型內容問題

  • 您需要在本機測試或重現 HTTP/2 以上版本特定行為。舉例來說，如果您需要測試 HTTP/2 以上版本的載入效能，不支援不安全的 HTTP/2 以上版本，即使在 localhost 上也無法使用。

  • 您必須在本機測試需要 HTTPS 的第三方程式庫或 API (例如 OAuth)。

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

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

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

  • 其他情況！這份清單未列出所有問題，但如果遇到未列於此處的情況，您會知道：http://localhost 的問題將失效，或是實際運作情形與實際執行網站不同。🙃

無論是上述哪一種情況，您都需要使用 HTTPS 進行本機開發作業。

如何使用 HTTPS 進行本機開發作業

如果您需要使用 HTTPS 進行本機開發，請參閱如何使用 HTTPS 進行本機開發作業。

如果使用自訂主機名稱，相關提示

如果您使用自訂主機名稱等方式編輯主機檔案：

  • 請勿使用單純的主機名稱 (例如 mysite)，因為如果有頂層網域 (TLD) 使用相同名稱 (mysite)，可能會遇到問題。這一點也並不罕見：在 2020 年，有超過 1,500 個 TLD，而且數量還在持續增加中。coffee、museum、travel 和許多大型公司名稱 (也許即便是你目前任職的公司) 都是頂層網域。請按這裡查看完整清單。
  • 只使用屬於自有網域，或專為這個用途保留的網域。如果您沒有自己的網域，可以使用 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 不僅僅是主機名稱，而是完整的 TLD (例如 com)。

瞭解詳情

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

由 @moses_lee 在 Unsplash 中提供的主頁橫幅，已編輯。