這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

開發過程中 常見的 https 問題 - 避坑

做前端多年，發現有些問題需要重覆解決很多次，浪費了不少時間，https 導致的問題就屬於其中的一種，被不同崗位的同事問過很多次。 這篇關於 https 的科普文，趕緊安利給團隊的相關小伙伴看看吧，從此再也不會有人找你解決 https 相關的 bug，又多了一些摸魚的時間，爽（巴適得很）。

註：本篇文章提到的瀏覽器都是指 chrome 瀏覽器

案例 1 - 下載資源失敗或圖片載入失敗 - “Mixed Content”問題

在 https 網站中發起的 http 請求被禁止

這是因為最新版本的 chrome 提高了用戶安全策略，保護用戶免受不安全下載的侵害(點擊這裡查看 chrome 文檔 Protecting users from insecure downloads)

註意：

1. https 協議的網站中不允許存在 http 協議的請求
2. http 協議的網站中允許訪問 https 協議的資源

案例 2 - 瀏覽器提示網站不安全 記住的賬戶密碼不能自動填充 - 證書錯誤問題

提示不安全是因為 chrome 認為 當前網站存在信息泄漏的風險。

檢查當前網站協議是否為 https：
如果是 https 的話有兩種可能，一種是當前網站被標記為不安全，另一種是 https 證書無效、過期了。
如果是 http 的話，需要升級當前網站協議為 https。

chrome 瀏覽器對 http 協議的限制很多，所以運維在部署網站的時候大概率是需要申請 https 協議的。

賬號密碼不能自動填充是因為 chrome 記住密碼功能記住的網站是包含功能變數名稱、協議和埠的，其中一個變化了都不能自動填充。

註意：

1. 項目部署後同時給功能變數名稱申請 https 安全協議
2. 運維需要關註 https 自動續費，以免影響線上環境

案例 3 - webpack-dev-server 代理的後端服務 忽然報 CORS 錯誤 - 強制使用 https 問題

修改本地使用的後端服務協議為 https 解決此問題。

總結

總的來說，一個前端將會遇到的 https 問題大概有以下 3 種：

1. Mixed Content 錯誤：
   當網站同時使用 HTTPS 和 HTTP 的資源時，例如在 HTTPS 的網站中引入 HTTP 的圖片、CSS、JavaScript 等文件，瀏覽器會提示“Mixed Content”錯誤，這是因為 HTTP 的資源容易被惡意攻擊者利用。解決方法是將所有資源都使用 HTTPS 進行載入。

2. 證書錯誤：
   在使用 HTTPS 時，需要使用 SSL 證書來驗證網站的身份。如果證書無效、已過期或不受信任，瀏覽器會提示證書錯誤。解決方法是獲取有效的 SSL 證書，並將其安裝到 Web 伺服器中。

3. HSTS：
   HSTS（HTTP Strict Transport Security）是一種安全機制，可以強制瀏覽器只使用 HTTPS 連接訪問網站。如果網站啟用了 HSTS，瀏覽器會自動將 HTTP 請求重定向到 HTTPS。在開發過程中，需要註意是否啟用了 HSTS，以避免由於 HSTS 導致的連接問題。

tips

• https 是絕對安全的？
  https 也能被抓包，但是抓到之後攻擊者由於沒有私鑰所以也無法解密，抓到也沒有用。https 的安全是基於對證書頒發機構的信任的，也不能算是 100% 的安全。

• 為什麼說非對稱加密效率不高 速度慢 具體體現在哪裡？
  對稱加密本質上是位運算包含位移和替換，非對稱加密包含大量大數乘法、大數模計算（RSA 的核心演算法是歐拉定理）。 AES 演算法的底層原理RSA 演算法詳解

• 登錄密碼需要加密？
  如果說是為了防止被抓包，那沒必要，因為 https 已經做了數據加密，即使是被抓包了也是加密過的數據。 如果說是為了防止部分用戶存在一個密碼多個網站使用的情況下，密碼泄漏導致多個網站密碼泄漏，那就是有意義的。

• 請求參數有必要加密？
  請求的參數沒必要加密，因為 https 本身會加密數據，服務端接收到之後會自動解密，如果再加一層加密，無疑增加了響應時間。 使用額外的加密層會增加網路負載和系統資源開銷

• 響應數據有必要加密？
  根據上一條響應數據也沒必要加密，另外，響應體整體加密也沒必要，感興趣的同學可以看這篇response body 加密了怎麼辦？ 來 破解它

本文轉載於:

https://juejin.cn/post/7208466455880417317

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。