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

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

Maud Nalpas
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 進行本機開發:

  • 在不同瀏覽器中以一致的方式設定安全 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 進行本機開發作業:

  • 您必須在本機設定 CookieSecureSameSite: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,而且數量還在持續增加中。coffeemuseumtravel 和許多大型公司名稱 (也許即便是你目前任職的公司) 都是頂層網域。請按這裡查看完整清單。
  • 只使用屬於自有網域,或專為這個用途保留的網域。如果您沒有自己的網域,可以使用 testlocalhost (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_leeUnsplash 中提供的主頁橫幅,已編輯。