一、HTTPS 核心機制：非對稱加密 + 對稱加密

HTTPS = HTTP over TLS/SSL，通過 ?混合加密體系? 解決三大問題：

1. ?防竊聽? - 對稱加密傳輸內容（如 AES）
2. ?防篡改? - 數字簽名驗證數據完整性
3. ?防冒充? - 數字證書驗證服務器身份

// 前端感知的典型場景：混合內容攔截
// 在 HTTPS 頁面加載 HTTP 資源會被瀏覽器攔截
<img src="http://example.com/image.jpg"> 
// 控制臺報錯：Mixed Content: The page was loaded over HTTPS...

---

二、TLS 握手流程詳解（三次握手后）

1. Client Hello

客戶端發送：

• 支持的 TLS 版本（如 TLS 1.3）
• 客戶端隨機數（Client Random）
• 加密套件列表（如 ECDHE-RSA-AES128-GCM-SHA256）

# 開發者工具查看加密套件（Chrome）
chrome://flags/#tls13-variant

2. Server Hello

服務端回應：

• 選定的 TLS 版本和加密套件
• 服務器隨機數（Server Random）
• 數字證書（包含公鑰）

// 前端可通過 JS 獲取證書信息（需要用戶授權）
navigator.mediaDevices.getUserMedia({ video: true }).then(() => {const cert = document.querySelector('video').getCertificate();console.log(cert.issuer); // 頒發機構});

3. 證書驗證

客戶端驗證證書：

• 證書鏈是否可信（CA 機構簽發）
• 域名是否匹配
• 是否過期

// 開發環境常見錯誤：自簽名證書報錯
// 解決方案1：瀏覽器手動信任（危險）
// 解決方案2：配置本地CA（推薦使用 mkcert）
// 生成本地證書
$ mkcert -install
$ mkcert localhost 127.0.0.1 ::1

4. 密鑰交換（以 ECDHE 為例）

• 服務端發送 ?Server Params?（橢圓曲線公鑰）
• 客戶端生成 ?Client Params? 并發送
• 雙方通過 ECDHE 算法生成 ?Pre-Master Secret

# 簡化版密鑰計算邏輯（實際為二進制操作）
client_random = 0x1234
server_random = 0x5678
pre_master = ecdhe(client_params, server_params)
master_secret = PRF(pre_master, client_random + server_random)

5. 切換加密協議

雙方用 Master Secret 生成對稱密鑰，后續通信使用對稱加密。

---

三、前端開發重點場景

場景1：強制全站 HTTPS

nginx

# Nginx 配置自動跳轉（301 永久重定向）
server {listen 80;server_name example.com;return 301 https://$host$request_uri;
}

html

<!-- 前端兜底方案（慎用） -->
<script>
if (location.protocol !== 'https:') {location.replace(`https://${location.host}${location.pathname}`);
}
</script>

場景2：安全 Cookie 傳輸

javascript

// 設置 Secure + HttpOnly + SameSite
document.cookie = `session=xxx; Secure; HttpOnly; SameSite=Lax`;

場景3：HSTS 預加載

nginx

# 添加 Strict-Transport-Security 頭
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;

提交預加載列表

---

四、性能優化實踐

技巧1：Session Resumption

復用 TLS 會話減少握手耗時：

nginx

# Nginx 配置會話票證
ssl_session_tickets on;
ssl_session_timeout 1d;

技巧2：OCSP Stapling

由服務端緩存證書狀態，減少客戶端驗證耗時：

nginx

ssl_stapling on;
ssl_stapling_verify on;
resolver 8.8.8.8;

技巧3：TLS 1.3 升級

比 TLS 1.2 減少一次 RTT：

nginx

ssl_protocols TLSv1.3 TLSv1.2;

---

五、常見坑點排查指南

問題1：證書鏈不完整

現象：Android 低版本報錯，iOS 正常
解決：使用?openssl?補全證書鏈

bash

$ openssl s_client -showcerts -connect example.com:443
$ cat fullchain.pem > chained.crt  # 合并根證書和中間證書

問題2：混合內容阻塞

定位：使用 CSP 報告收集非 HTTPS 請求

html

<meta http-equiv="Content-Security-Policy" content="default-src https: 'unsafe-inline' 'unsafe-eval'; report-uri /csp-report">

問題3：CDN 證書配置錯誤

檢測工具：

bash

$ curl -I https://example.com        # 檢查 Server 頭
$ nscurl --ats-diagnostics https://example.com  # iOS 特性檢測

---

六、開發環境 HTTPS 最佳實踐

方案1：Webpack DevServer 配置

javascript

// webpack.config.js
const fs = require('fs');
const https = require('https');
module.exports = {devServer: {https: {key: fs.readFileSync('localhost-key.pem'),cert: fs.readFileSync('localhost.pem')},public: 'https://localhost:8080' // 避免瀏覽器警告}
};

方案2：Service Worker 調試

javascript

// sw.js 中捕獲證書錯誤
self.addEventListener('fetch', event => {if (event.request.url.startsWith('https://')) {event.respondWith(fetch(event.request).catch(err => {console.error('證書錯誤:', err);return new Response('HTTPS故障');}));}
});

---

七、終極檢測清單

1. 所有子域名啟用 HTTPS（包括 CDN）
2. 配置 HSTS 頭部并提交預加載
3. 定期更新 TLS 證書（監控到期時間）
4. 禁用不安全協議（SSLv3、TLS 1.0）
5. 使用 Qualys SSL Labs 評分達到 A+

bash

# 一鍵檢測（需安裝 testssl.sh）
$ testssl.sh --color 0 example.com

通過理解 TLS 握手流程，前端開發者能更好地處理證書錯誤、優化資源加載策略，并推動全站安全升級。記住：HTTPS 不是終點，而是現代 Web 應用的起跑線。