愚公上岸说

11-20 23:45 四川大学前端工程师发布于四川

关注

【前端面试小册】网络-第8节：HTTPS 进阶

一、概述

1.1 什么是 HTTPS

HTTPS（HyperText Transfer Protocol Secure，超文本传输安全协议）是在 HTTP 的基础上加入了 SSL/TLS 协议，用于保证数据传输的安全性。

简单理解：HTTPS = HTTP + SSL/TLS

类比理解：

HTTP：就像寄明信片，内容谁都能看
HTTPS：就像寄密封信件，只有收件人能看

1.2 为什么需要 HTTPS

HTTP 存在的安全问题：

窃听风险：明文传输，数据可被截获
篡改风险：数据可被中间人修改
冒充风险：无法验证通信双方身份

示例场景：

用户 → [明文: password=123456] → 黑客截获 → 服务器

二、HTTP 的三大风险

2.1 窃听风险（泄露信息）

问题：HTTP 使用明文传输，数据在传输过程中可以被任何人截获和查看。

场景：

// HTTP 登录请求
fetch('http://example.com/login', {
    method: 'POST',
    body: JSON.stringify({
        username: 'user',
        password: 'password123'  // 明文传输！
    })
});

危害：

密码被窃取
敏感信息泄露
用户隐私暴露

2.2 篡改风险（修改数据）

问题：数据在传输过程中可能被中间人修改。

场景：

原始数据: {amount: 100}
被篡改后: {amount: 10000}

危害：

交易金额被修改
网页内容被植入恶意代码
下载的文件被替换

2.3 冒充风险（身份伪装）

问题：无法验证通信对方的身份。

场景：

用户以为在访问 bank.com
实际上在访问 fake-bank.com（钓鱼网站）

危害：

钓鱼攻击
中间人攻击
信息被发送到错误的服务器

三、HTTPS 如何解决这些问题

3.1 解决方案

风险	解决方案	技术
窃听	加密	对称加密 + 非对称加密
篡改	完整性校验	消息摘要（Hash）
冒充	身份认证	数字证书

3.2 核心技术

对称加密：加密和解密使用相同密钥
非对称加密：加密和解密使用不同密钥（公钥、私钥）
数字证书：证明服务器身份
消息摘要：验证数据完整性

四、加密技术

4.1 对称加密

原理

加密和解密使用相同的密钥。

明文 + 密钥 = 密文
密文 + 密钥 = 明文

示例（伪代码）

// 对称加密示例
const key = 'secret-key-123';

// 加密
const encrypted = encrypt('Hello World', key);
// 输出: "8f3h9d2..."

// 解密
const decrypted = decrypt(encrypted, key);
// 输出: "Hello World"

常见算法

AES（Advanced Encryption Standard）：最常用
DES（Data Encryption Standard）：已淘汰
3DES：DES 的改进版

优缺点

优点：

✅ 加密解密速度快
✅ 效率高
✅ 适合大量数据

缺点：

❌ 密钥传输问题：如何安全地把密钥传给对方？
❌ 密钥管理困难：每对通信需要不同密钥

4.2 非对称加密

原理

使用一对密钥：公钥和私钥。

规则：

公钥加密，只能私钥解密
私钥加密，只能公钥解密

明文 + 公钥 = 密文
密文 + 私钥 = 明文

示例（伪代码）

// 非对称加密示例
const { publicKey, privateKey } = generateKeyPair();

// 公钥加密
const encrypted = encryptWithPublicKey('Hello World', publicKey);

// 私钥解密
const decrypted = decryptWithPrivateKey(encrypted, privateKey);
// 输出: "Hello World"

常见算法

RSA：最常用
ECC（椭圆曲线加密）：更安全、密钥更短
DSA：数字签名算法

优缺点

优点：

✅ 解决密钥传输问题
✅ 公钥可以公开
✅ 更安全

缺点：

❌ 加密解密速度慢
❌ 效率低
❌ 不适合大量数据

4.3 混合加密

HTTPS 采用混合加密方式：

非对称加密：传输对称加密的密钥
对称加密：加密实际的通信数据

流程：

graph LR
    A[客户端] -->|1. 请求公钥| B[服务器]
    B -->|2. 返回公钥| A
    A -->|3. 用公钥加密对称密钥| B
    B -->|4. 用私钥解密获得对称密钥| B
    A <-->|5. 用对称密钥加密通信| B

优势：

既保证了安全性（非对称加密传输密钥）
又保证了效率（对称加密传输数据）

五、数字证书

5.1 为什么需要数字证书

即使使用了加密，仍然存在问题：如何确认公钥是服务器的，而不是中间人的？

场景：

客户端 → [请求公钥] → 中间人 → 服务器
客户端 ← [返回假公钥] ← 中间人 ← 服务器

解决方案：使用数字证书。

5.2 数字证书是什么

数字证书：由权威的第三方机构（CA，Certificate Authority）颁发的，用来证明网站身份的电子文件。

证书内容：

网站的公钥
网站的域名
证书的有效期
颁发机构（CA）
数字签名

5.3 证书如何验证

graph TD
    A[服务器申请证书] --> B[CA 验证身份]
    B --> C[CA 颁发证书]
    C --> D[客户端访问服务器]
    D --> E[服务器发送证书]
    E --> F[客户端验证证书]
    F --> G{证书有效?}
    G -->|是| H[建立连接]
    G -->|否| I[显示警告]

验证步骤：

浏览器收到证书
验证证书有效期
验证证书域名
验证证书签名：使用 CA 的公钥验证
验证证书是否被吊销

5.4 证书链

证书通常形成一个链条：

根证书（Root CA）
    ↓
中间证书（Intermediate CA）
    ↓
网站证书（End-entity Certificate）

验证过程：

验证网站证书 → 中间证书
验证中间证书 → 根证书
根证书是内置在操作系统或浏览器中的

六、HTTPS 握手过程

6.1 TLS 1.2 握手流程（完整版）

sequenceDiagram
    participant C as 客户端
    participant S as 服务器
    
    Note over C,S: 1. ClientHello
    C->>S: 支持的加密套件、随机数1
    
    Note over C,S: 2. ServerHello
    S->>C: 选择的加密套件、随机数2
    
    Note over C,S: 3. Certificate
    S->>C: 服务器证书
    
    Note over C,S: 4. ServerKeyExchange
    S->>C: 服务器密钥交换
    
    Note over C,S: 5. ServerHelloDone
    S->>C: 服务器握手完成
    
    Note over C,S: 6. 客户端验证证书
    C->>C: 验证证书有效性
    
    Note over C,S: 7. ClientKeyExchange
    C->>S: 客户端密钥交换（预主密钥）
    
    Note over C,S: 8. ChangeCipherSpec
    C->>S: 切换到加密通信
    
    Note over C,S: 9. Finished
    C->>S: 握手完成
    
    Note over C,S: 10. ChangeCipherSpec
    S->>C: 切换到加密通信
    
    Note over C,S: 11. Finished
    S->>C: 握手完成
    
    Note over C,S: 12. 加密通信开始
    C<<->>S: 使用对称密钥加密数据

6.2 详细步骤解析

第1步：ClientHello

客户端发送：

支持的 TLS 版本
支持的加密套件列表
随机数1（Client Random）
支持的压缩算法

第2步：ServerHello

服务器发送：

选择的 TLS 版本
选择的加密套件
随机数2（Server Random）
会话 ID

第3步：Certificate

服务器发送数字证书（包含公钥）。

第4步：ServerKeyExchange（可选）

服务器发送密钥交换参数（某些加密套件需要）。

第5步：ServerHelloDone

服务器通知握手消息发送完毕。

第6步：客户端验证证书

客户端验证服务器证书的有效性。

第7步：ClientKeyExchange

客户端生成预主密钥（Pre-Master Secret），用服务器公钥加密后发送。

第8-11步：切换加密

双方协商完成，切换到加密通信。

第12步：开始加密通信

使用对称密钥进行加密通信。

6.3 TLS 1.3 握手流程（简化版）

TLS 1.3 优化了握手流程，只需要 1-RTT：

sequenceDiagram
    participant C as 客户端
    participant S as 服务器
    
    C->>S: ClientHello + KeyShare
    S->>C: ServerHello + KeyShare + Certificate + Finished
    Note over C,S: 1-RTT 完成握手
    C<<->>S: 加密通信

改进：

减少握手次数（1-RTT vs 2-RTT）
支持 0-RTT（恢复会话时）
移除不安全的加密套件
更快的连接建立

七、HTTPS 性能优化

7.1 性能问题

HTTPS 相比 HTTP 的性能开销：

握手延迟：需要额外的往返（RTT）
计算开销：加密解密消耗 CPU
证书验证：需要验证证书链

7.2 优化方案

Session 复用

原理：保存会话信息，避免重复握手。

方式：

Session ID：服务器缓存会话
Session Ticket：客户端保存加密的会话信息

效果：减少握手时间。

TLS 1.3

优势：

1-RTT 握手
0-RTT 恢复会话
更快的连接建立

HTTP/2

优势：

多路复用
头部压缩
服务器推送

证书优化

方式：

使用 ECC 证书（密钥更短，速度更快）
减少证书链长度
启用 OCSP Stapling

硬件加速

使用硬件加速卡加速加密解密运算。

八、HTTPS 最佳实践

8.1 服务器配置

# Nginx HTTPS 配置示例
server {
    listen 443 ssl http2;
    server_name example.com;
    
    # 证书配置
    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;
    
    # TLS 版本
    ssl_protocols TLSv1.2 TLSv1.3;
    
    # 加密套件
    ssl_ciphers 'ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256';
    ssl_prefer_server_ciphers on;
    
    # 会话复用
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;
    
    # OCSP Stapling
    ssl_stapling on;
    ssl_stapling_verify on;
    
    # HSTS
    add_header Strict-Transport-Security "max-age=31536000" always;
}

8.2 前端最佳实践

强制 HTTPS

// 检测并跳转到 HTTPS
if (location.protocol !== 'https:') {
    location.replace(`https:${location.href.substring(location.protocol.length)}`);
}

使用 HSTS

<!-- HTML 中设置 HSTS -->
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

混合内容处理

<!-- ❌ 错误：HTTPS 页面加载 HTTP 资源 -->
<img src="http://example.com/image.jpg">

<!-- ✅ 正确：使用 HTTPS -->
<img src="https://example.com/image.jpg">

<!-- ✅ 正确：使用协议相对 URL -->
<img src="//example.com/image.jpg">

8.3 安全头部

// 设置安全相关的 HTTP 头部
app.use((req, res, next) => {
    // HSTS
    res.setHeader('Strict-Transport-Security', 'max-age=31536000; includeSubDomains');
    
    // 防止点击劫持
    res.setHeader('X-Frame-Options', 'DENY');
    
    // XSS 保护
    res.setHeader('X-XSS-Protection', '1; mode=block');
    
    // 内容类型嗅探
    res.setHeader('X-Content-Type-Options', 'nosniff');
    
    next();
});