在多數情況下,http://localhost
的運作方式會與 HTTPS 相同,以便執行開發作業
用途。不過,一些特殊情況
例如自訂主機名稱或跨瀏覽器使用安全 Cookie
明確地將開發網站設為
呈現網站的正式環境(如果正式版網站並未
使用 HTTPS (優先改用 HTTPS)。
本頁說明如何使用 HTTPS 在本機執行網站。
如需簡要操作說明,請參閱 mkcert 快速參考資料。**
使用 mkcert ,透過 HTTPS 在本機執行網站 (建議)
如要在本機開發網站上使用 HTTPS,並存取 https://localhost
或
https://mysite.example
(自訂主機名稱),您需要
傳輸層安全標準 (TLS) 憑證
由裝置和瀏覽器信任的實體簽署 (稱為「可信任」)
憑證授權單位 (CA)。
瀏覽器會檢查開發伺服器的憑證是否由
再建立 HTTPS 連線。
建議您使用 mkcert, 跨平台 CA 建立及簽署憑證。如需其他實用資訊 選項,請參閱使用 HTTPS 在本機執行網站:其他選項。
許多作業系統都包含用來建立憑證的程式庫,例如 openssl.不過,它們會比較複雜,也較不複雜 但不一定是跨平台憑證 較不容易取得
設定
安裝 mkcert (僅一次)。
按照操作說明進行 在作業系統上安裝 mkcert例如,在 macOS 上:
brew install mkcert brew install nss # if you use Firefox
將 mkcert 新增至本機根 CA。
在終端機中執行下列指令:
mkcert -install
這會產生本機憑證授權單位 (CA)。 mkcert 產生的本機 CA 只會信任本機在裝置上。
為您的網站產生憑證,並由 mkcert 簽署。
在終端機中,前往網站的根目錄,或 目標目錄。
接著執行:
mkcert localhost
如果您使用自訂主機名稱 (例如
mysite.example
),請執行以下指令:mkcert mysite.example
這個指令會執行兩項作業:
- 為您指定的主機名稱產生憑證。
- 讓 mkcert 簽署憑證。
您的憑證現已準備就緒,並由憑證授權單位簽署: 瀏覽器信任本機
將伺服器設為使用您剛建立的 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"
💡? Ъ 其他範例:
在瀏覽器中開啟
https://localhost
或https://mysite.example
即可執行以下操作: 仔細檢查網站是否使用 HTTPS 進行測試。你不會看見任何 瀏覽器警告,因為你的瀏覽器信任 mkcert 為本機憑證 授權。
mkcert 快速參考
如何透過 HTTPS 執行本機開發網站:
-
設定 mkcert。
如果您尚未安裝 mkcert,請在 macOS 上安裝:
brew install mkcert
檢查安裝 mkcert 適用於 Windows 和 Linux 平台
然後建立本機憑證授權單位:
mkcert -install
-
建立信任的憑證。
mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}
這項操作會建立 mkcert 自動簽署的有效憑證。
-
將開發伺服器設為使用 HTTPS 和憑證 建立
你現在可以直接在瀏覽器中使用 https://{YOUR HOSTNAME}
,沒有任何警告訊息
</div>
使用 HTTPS 在本機執行網站:其他選項
以下是設定憑證的其他方式。這些一般都會 比起使用 mkcert 更加複雜或風險更高。
自行簽署的憑證
您也可以決定不使用本機憑證授權單位 (例如 mkcert),且 請改為自行簽署憑證。此方法有一些陷阱:
- 瀏覽器不會信任你的憑證授權單位,因此會顯示警告訊息
手動略過您可以在 Chrome 中使用
#allow-insecure-localhost
,即可在以下時間自動略過這項警告:localhost
。 - 當你在不安全的網路中工作時,這並不安全。
- 使用本機 CA (例如 mkcert) 並不容易,甚至更快。
- 自行簽署憑證的行為與受信任的憑證不同 憑證
- 如果未在瀏覽器中使用這項技巧,則必須停用 驗證伺服器憑證忘記重新啟用這個功能 造成安全性問題。
![使用自行簽署的憑證時,系統會顯示警告瀏覽器的螢幕截圖。](https://web.developers.google.cn/static/articles/how-to-use-local-https/image/screenshots-the-warnings-953f06ad1aebc.jpg?authuser=19&hl=zh-tw)
如果沒有指定憑證,React 的 和 Vue's 開發伺服器 HTTPS 選項 。雖然速度很快,但也包含相同的瀏覽器警告和其他 自行簽署憑證的陷阱幸好,您可以使用 架構內建 HTTPS 選項,並指定本機信任的憑證 以 mkcert 或類似服務建立。詳情請參閱 mkcert with React 範例。
如果在瀏覽器中使用 HTTPS 開啟本機執行的網站, 瀏覽器會檢查本機開發伺服器的憑證。時機 系統會檢查您是否已自行簽署憑證, 您已註冊為信任的憑證授權單位。因為您 則表示瀏覽器無法信任憑證,而會顯示警告訊息 表示連線不安全。仍可建立 HTTPS 但您必須自行承擔風險。
![為何瀏覽器不信任自行簽署的憑證:圖表。](https://web.developers.google.cn/static/articles/how-to-use-local-https/image/why-browsers-dont-trust-9aa014d2da64b.jpg?authuser=19&hl=zh-tw)
由一般憑證授權單位簽署的憑證
您也可以使用由官方 CA 簽署的憑證。這個隨附的 下列小工具:
- 相較於使用本機 CA 技術 (例如 mkcert
- 你必須使用自己控管的有效網域名稱。這表示您無法 針對以下項目使用官方 CA:
反向 Proxy
您也可以選擇使用 反向 Proxy,例如 ngrok。這伴隨下列風險:
- 凡是你分享反向 Proxy 網址的使用者,都能存取你的本機開發檔案 網站。向客戶展示專案時非常實用,但也很實用 讓未經授權的人士分享機密資訊
- 部分反向 Proxy 服務會收取使用費,因此定價也許是考量因素 所選服務
- 瀏覽器新推出的安全措施可能會影響 這些工具的運作方式
旗標 (不建議)
如果您在 Chrome 中使用自訂主機名稱 (例如 mysite.example
),即可使用
旗標,強制瀏覽器將 mysite.example
視為安全網站。請避免執行這項操作
原因如下:
- 您必須 100% 確保
mysite.example
一律會解析為本機 讓我們看看 DNS 解析 進一步探索內部和外部位址否則可能會導致正式環境憑證外洩。 - 這個標記僅適用於 Chrome,因此您無法對不同瀏覽器進行偵錯。
非常感謝所有審查員和貢獻者的貢獻與意見回饋,特別是 Ryan Sleevi Filippo V 此外 rda、Mihajlija 和 Rowan Merewood。🙌