最近用Docusaurus搭了一個個人網站，部署後看到瀏覽器地址欄上“不安全”三個字感覺特別辣眼，便不由自主的想起了HTTPS。回憶起自己在日常開發中遇到的一些與HTTPS相關的知識，忍不住想將這些年積累的一些細節和心得體會整理一下。
為什麼要使用HTTPS
HTTPS的發展歷程是一段頗具趣味的歷史，充滿了技術創新與安全挑戰。作為前端開發者為什麼要使用HTTPS，難道HTTP不能用了嗎？當然不是，從本質上講HTTPS還是HTTP，對我們前端開發而言大多數情況下根本就不需要考慮是不是要使用HTTPS，HTTPS主要針對安全有要求的內容。然而，安全問題由來已久，許多前端功能和瀏覽器的安全策略都依賴 HTTPS 來確保用户的安全和隱私。而我自己對以下內容印象較為深刻：
HTTP2
HTTP2是基於HTTPS實現的，所以要啓用HTTP2就必須使用HTTPS。HTTP2給人影響最深刻的一定是多路複用，它允許在同一個連接上併發發送多個請求和響應，不會像 HTTP/1.x 那樣每個請求需要建立新的連接，完美解決瀏覽器併發的限制問題（記得以前處理這個問題的時候還是參考百度，用多個域名固定資源的方法來提升併發數量）。如果説某一天領導説我們的網站要把協議升級到HTTP2，前端的同學一定要淡定，因為這幾乎不會涉及到代碼的修改，HTTP這個協議是給瀏覽器和服務器使用的，只要我們的服務端和瀏覽器都支持HTTP2，那這個功能就完成了。
Service Worker
Service Worker 允許 Web 應用在後台獨立工作，我們可以通過它執行耗時計算、緩存資源、處理離線請求等。但由於它涉及到後台操作和緩存用户的數據，瀏覽器要求它只能在 HTTPS 環境下運行,這是為了避免惡意腳本的注入和保障用户數據的安全。
Web Authentication API（WebAuthn）
這個功能我並沒真正的使用過，它是一種基於公鑰的身份驗證方式，在我們的移動端應用中，如果希望提供快捷的登陸方式比如指紋、面部識別等就可以通過這個API來實現。由於它涉及到敏感的身份信息，WebAuthn 需要在 HTTPS 環境下運行，以確保身份驗證過程中的數據不會被竊取或篡改。
Geolocation API
如果需要通過瀏覽器獲取用户的地理位置，瀏覽器會要求該請求通過 HTTPS 進行。這樣可以確保用户的地理位置信息在傳輸過程中不會被第三方竊取或篡改。
Clipboard
Clipboard API 允許我們在網頁中讀取或寫入剪貼板的內容，實現剪切、複製和粘貼功能。但由於剪貼板中可能包含用户的敏感信息，瀏覽器要求這個功能只能在 HTTPS 環境下運行。
Notifications API
Notifications API 允許 Web 應用在用户的設備上顯示通知。它通常用於提醒用户一些重要的事件、消息或更新，尤其是在用户沒有打開應用的情況下。與傳統的桌面應用通知相似，Web 應用也可以通過通知向用户傳遞信息。目前，這已經是一個比較常見的功能，這個功能也只能在 HTTPS 環境下運行。
除以上功能外，還有很多功能也需要在HTTPS環境下運行，比如：攝像頭、麥克風、藍牙等。
日常工作中也偶爾聽同事們説起遇到的一些奇葩問題，最後是使用HTTPS解決的。我自己也遇到過一次，我們的項目中使用CORS實現跨域通信，這是一個我們熟悉的解決方案。然而，最終在上線時卻遇到了一些意外情況，有個功能在實際使用中頻繁出現跨域問題。經過一番排查，我們發現這個功能中有一個接口的URL是以/結尾的，大致長這樣：http://api.example.com/d/history/ 。雖然 URL 看起來並不特別引人注意，但實際調用時卻出現了異常響應。大約有 20% 的概率可以正常響應，而其餘情況下，接口返回的卻是一段HTML代碼，我們約定的接口返回格式應該是JSON。一位經驗豐富的老大哥迅速給出了最佳解決方案：切換到HTTPS。在實際開發過程中使用HTTPS確實可以規避掉一些問題。
證書
使用HTTPS不可避免的要用到安全證書，怎麼獲得免費證書呢？以前都是在阿里雲上直接領一個，但這次找了好久都沒找到這個功能的入口。後來果斷加了一個Caddy做代理，使用下來感覺基礎代理配置方面比Nginx簡單很多，並且它默認使用 Let's Encrypt（Let's Encrypt是一個免費的證書頒發機構）提供的證書來為網站啓用 HTTPS。Caddy提供了簡單、自動化的證書頒發和續期服務。當然，如果你的網站是一個大型的商業網站，那麼建議還是購買一個收費的證書，畢竟免費的東西總是有一些限制的。
結語
隨着技術的不斷髮展，越來越多的 API 被引入到瀏覽器中，其中許多涉及隱私和數據安全的功能都要求在HTTPS環境下運行。對於前端開發者來説，HTTPS不再只是一個協議，更是一種安全意識，它已經成為每個開發者必須掌握的基礎知識。
