别再只用 HTTPS！企业级 API 加密方案：AES+SM4 双保险，防篡改防窃听，轻松过等保

别再只用 HTTPS！企业级 API 加密方案：AES+SM4 双保险，防篡改防窃听，轻松过等保

导读: 在企业级应用中，API 接口的安全性至关重要。本文详细介绍一个经过生产环境验证的 API 加密方案，支持 AES 和 SM4 国密双重加密，包含完整的代码实现和最佳实践。防止窃听、防止篡改、合规要求，一套代码搞定全平台!

关键词: uni-app;API 加密;AES;SM4 国密;数据安全;请求拦截器

🔐 一、为什么需要 API 加密？

1.1 真实案例警示

❌ 案例 1: 某电商平台用户信息泄露
– 原因：登录接口明文传输密码
– 后果：10 万 + 用户数据被盗
– 损失：赔偿 500 万 +，品牌受损

❌ 案例 2: 某金融 APP 交易数据被篡改
– 原因：转账请求未签名验证
– 后果：攻击者篡改收款账户
– 损失：直接经济损失 300 万+

1.2 加密必要性

1.3 本文解决方案

✅ 双重加密: AES(国际) + SM4(国密) ✅ 自动处理: 请求拦截器自动加密/解密 ✅ 按需加密: 支持部分字段加密 ✅ 信封模式: 标准化加密数据格式 ✅ 生产验证: 已在多个企业项目落地

🏗️ 二、整体架构设计

2.1 加密流程全景图

#mermaid-svg-arz2jpUogcnUt3SI{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-arz2jpUogcnUt3SI .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-arz2jpUogcnUt3SI .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-arz2jpUogcnUt3SI .error-icon{fill:#552222;}#mermaid-svg-arz2jpUogcnUt3SI .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-arz2jpUogcnUt3SI .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-arz2jpUogcnUt3SI .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-arz2jpUogcnUt3SI .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-arz2jpUogcnUt3SI .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-arz2jpUogcnUt3SI .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-arz2jpUogcnUt3SI .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-arz2jpUogcnUt3SI .marker{fill:#333333;stroke:#333333;}#mermaid-svg-arz2jpUogcnUt3SI .marker.cross{stroke:#333333;}#mermaid-svg-arz2jpUogcnUt3SI svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-arz2jpUogcnUt3SI p{margin:0;}#mermaid-svg-arz2jpUogcnUt3SI .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-arz2jpUogcnUt3SI .cluster-label text{fill:#333;}#mermaid-svg-arz2jpUogcnUt3SI .cluster-label span{color:#333;}#mermaid-svg-arz2jpUogcnUt3SI .cluster-label span p{background-color:transparent;}#mermaid-svg-arz2jpUogcnUt3SI .label text,#mermaid-svg-arz2jpUogcnUt3SI span{fill:#333;color:#333;}#mermaid-svg-arz2jpUogcnUt3SI .node rect,#mermaid-svg-arz2jpUogcnUt3SI .node circle,#mermaid-svg-arz2jpUogcnUt3SI .node ellipse,#mermaid-svg-arz2jpUogcnUt3SI .node polygon,#mermaid-svg-arz2jpUogcnUt3SI .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-arz2jpUogcnUt3SI .rough-node .label text,#mermaid-svg-arz2jpUogcnUt3SI .node .label text,#mermaid-svg-arz2jpUogcnUt3SI .image-shape .label,#mermaid-svg-arz2jpUogcnUt3SI .icon-shape .label{text-anchor:middle;}#mermaid-svg-arz2jpUogcnUt3SI .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-arz2jpUogcnUt3SI .rough-node .label,#mermaid-svg-arz2jpUogcnUt3SI .node .label,#mermaid-svg-arz2jpUogcnUt3SI .image-shape .label,#mermaid-svg-arz2jpUogcnUt3SI .icon-shape .label{text-align:center;}#mermaid-svg-arz2jpUogcnUt3SI .node.clickable{cursor:pointer;}#mermaid-svg-arz2jpUogcnUt3SI .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-arz2jpUogcnUt3SI .arrowheadPath{fill:#333333;}#mermaid-svg-arz2jpUogcnUt3SI .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-arz2jpUogcnUt3SI .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-arz2jpUogcnUt3SI .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-arz2jpUogcnUt3SI .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-arz2jpUogcnUt3SI .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-arz2jpUogcnUt3SI .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-arz2jpUogcnUt3SI .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-arz2jpUogcnUt3SI .cluster text{fill:#333;}#mermaid-svg-arz2jpUogcnUt3SI .cluster span{color:#333;}#mermaid-svg-arz2jpUogcnUt3SI div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-arz2jpUogcnUt3SI .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-arz2jpUogcnUt3SI rect.text{fill:none;stroke-width:0;}#mermaid-svg-arz2jpUogcnUt3SI .icon-shape,#mermaid-svg-arz2jpUogcnUt3SI .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-arz2jpUogcnUt3SI .icon-shape p,#mermaid-svg-arz2jpUogcnUt3SI .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-arz2jpUogcnUt3SI .icon-shape rect,#mermaid-svg-arz2jpUogcnUt3SI .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-arz2jpUogcnUt3SI .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-arz2jpUogcnUt3SI .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-arz2jpUogcnUt3SI :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

📱 客户端

🔐 参数加密

📦 信封包装

📤 发送请求

🔒 HTTPS 传输

🖥️ 服务端接收

✅ 验证签名

🔓 解密数据

⚙️ 业务处理

🔐 加密响应

📤 返回结果

🔒 HTTPS 传输

📱 客户端接收

🔓 解密响应

📊 解析数据

2.2 技术选型对比

本文选择: AES + SM4 组合方案

• AES-256: 国际通用标准，性能优异
• SM4: 中国国密标准，自主可控
• 双重保障：可根据需求灵活切换

🔧 三、核心加密工具实现

3.1 安装依赖

# 安装加密库
npm install crypto-js sm-crypto

# 安装类型定义 (TypeScript 项目)
npm install -D @types/crypto-js @types/sm-crypto

3.2 AES 加密工具类

// src/utils/crypto.ts
import * as CryptoJS from 'crypto-js';
import {sm4} from 'sm-crypto';

/**
* AES 加密配置
*/
const AES_CONFIG = {
mode: CryptoJS.mode.CFB, // CFB 模式
padding: CryptoJS.pad.NoPadding, // 无填充
};

/**
* AES 加密
* @param src – 原始字符串
* @param keyWord – 密钥 (32 位十六进制)
* @returns 加密后的 Base64 字符串
*/
export function aesEncrypt(src: string, keyWord: string): string {
try {
const key = CryptoJS.enc.Utf8.parse(keyWord);

const encrypted = CryptoJS.AES.encrypt(src, key, {
iv: key,
…AES_CONFIG,
});

return encrypted.toString();
} catch (error) {
console.error('AES 加密失败:', error);
return src; // 降级处理
}
}

/**
* AES 解密
* @param src – Base64 加密字符串
* @param keyWord – 密钥
* @returns 解密后的原始字符串
*/
export function aesDecrypt(src: string, keyWord: string): string {
try {
const key = CryptoJS.enc.Utf8.parse(keyWord);

const decrypted = CryptoJS.AES.decrypt(src, key, {
iv: key,
…AES_CONFIG,
});

return decrypted.toString(CryptoJS.enc.Utf8);
} catch (error) {
console.error('AES 解密失败:', error);
return src;
}
}

3.3 SM4 国密加密

/**
* SM4 国密加密
* @param src – 原始字符串
* @param key – 密钥 (32 位十六进制字符串)
* @returns Base64 加密结果
*/
export function sm4Encrypt(src: string, key: string): string {
try {
const encoder = new TextEncoder();
const data = encoder.encode(src);

const encrypted = sm4.encrypt(data, key);

return btoa(String.fromCharCode(…encrypted));
} catch (error) {
console.error('SM4 加密失败:', error);
return src;
}
}

/**
* SM4 国密解密
* @param src – Base64 加密字符串
* @param key – 密钥
* @returns 解密结果
*/
export function sm4Decrypt(src: string, key: string): string {
try {
const binaryString = atob(src);
const bytes = new Uint8Array(binaryString.length);

for (let i = 0; i < binaryString.length; i++) {
bytes[i] = binaryString.charCodeAt(i);
}

const decrypted = sm4.decrypt(bytes, key);

const decoder = new TextDecoder();
return decoder.decode(decrypted);
} catch (error) {
console.error('SM4 解密失败:', error);
return src;
}
}

3.4 统一加密接口

// src/utils/encryption.ts
import {aesEncrypt, aesDecrypt} from './crypto';
import {sm4Encrypt, sm4Decrypt} from './crypto';
import {appConfig} from './appConfig';

/**
* 加密算法枚举
*/
export enum EncryptAlgorithm {
AES = 'AES',
SM4 = 'SM4',
}

/**
* 加密服务类
*/
class EncryptionService {
private readonly algorithm: EncryptAlgorithm;
private readonly key: string;
private readonly enabled: boolean;

constructor() {
this.algorithm = appConfig.ENCRYPTION_ALGORITHM || EncryptAlgorithm.AES;
this.key = appConfig.ENCRYPTION_KEY;
this.enabled = appConfig.ENCRYPTION_ENABLED;
}

/**
* 加密
*/
encrypt(data: any): string {
if (!this.enabled || !data) return JSON.stringify(data);

const strData = typeof data === 'string'
? data
: JSON.stringify(data);

switch (this.algorithm) {
case EncryptAlgorithm.SM4:
return sm4Encrypt(strData, this.key);
case EncryptAlgorithm.AES:
default:
return aesEncrypt(strData, this.key);
}
}

/**
* 解密
*/
decrypt(encryptedData: string): any {
if (!this.enabled || !encryptedData) return encryptedData;

let decrypted: string;

switch (this.algorithm) {
case EncryptAlgorithm.SM4:
decrypted = sm4Decrypt(encryptedData, this.key);
break;
case EncryptAlgorithm.AES:
default:
decrypted = aesDecrypt(encryptedData, this.key);
}

// 尝试解析 JSON
try {
return JSON.parse(decrypted);
} catch {
return decrypted;
}
}
}

// 导出单例
export const encryptionService = new EncryptionService();

📦 四、信封加密模式

4.1 什么是信封加密？

普通加密:
{
"username": "加密后的张三",
"password": "加密后的 123456"
}

信封加密:
{
"encryption": "整个 JSON 对象的加密字符串"
}

优势:

• ✅ 隐藏数据结构
• ✅ 统一加密格式
• ✅ 简化前端处理
• ✅ 便于后端解析

4.2 信封加密实现

/**
* 信封加密包装
* @param data- 任意数据
* @returns 加密信封对象
*/
export function encryptEnvelope(data: any): { encryption: string } {
return {
encryption: encryptionService.encrypt(data),
};
}

/**
* 信封解密解包
* @param envelope – 加密信封
* @returns 解密后的数据
*/
export function decryptEnvelope<T>(envelope: { encryption: string }): T {
return encryptionService.decrypt(envelope.encryption) as T;
}

4.3 使用示例

// POST 请求使用信封加密
const submitOrder = async (orderData: OrderInfo) => {
// 1. 信封包装
const encryptedPayload = encryptEnvelope(orderData);

// 2. 发送请求
const {data} = await request({
url: '/api/orders/submit',
method: 'POST',
data: encryptedPayload,
});

// 3. 解密响应
const result = decryptEnvelope<OrderResult>(data);

return result;
};

🔌 五、请求拦截器集成

5.1 配置文件

// src/config/appConfig.ts
export const appConfig = {
// 加密算法选择
ENCRYPTION_ALGORITHM: (import.meta.env.VITE_ENCRYPTION_ALGORITHM || 'AES') as EncryptAlgorithm,

// 加密密钥 (从环境变量读取)
ENCRYPTION_KEY: import.meta.env.VITE_ENCRYPTION_KEY || 'change-in-production',

// 是否启用加密
ENCRYPTION_ENABLED: import.meta.env.VITE_ENCRYPTION_ENABLED === 'true',

// 需要加密的接口白名单
ENCRYPTION_WHITELIST: [
'/api/auth/login',
'/api/user/profile',
'/api/order/submit',
],
};

# .env.development
VITE_ENCRYPTION_ALGORITHM=AES
VITE_ENCRYPTION_KEY=dev-secret-key-1234567890abcdef
VITE_ENCRYPTION_ENABLED=true

# .env.production
VITE_ENCRYPTION_ALGORITHM=SM4
VITE_ENCRYPTION_KEY=prod-secret-key-fedcba0987654321
VITE_ENCRYPTION_ENABLED=true

5.2 登录接口加密

// src/api/auth.ts
import {encryptionService} from '@/utils/encryption';

interface LoginParams {
username: string;
password: string;
grant_type: string;
scope: string;
}

/**
* 账号密码登录 (加密版)
*/
export async function login(credentials: LoginParams) {
const {password, …rest} = credentials;

// 方案 1: 只加密密码字段
const encryptedPassword = encryptionService.encrypt(password);

// 方案 2: 整个请求体信封加密
const encryptedPayload = encryptEnvelope(credentials);

return request({
url: '/auth/oauth2/token',
method: 'POST',
// 使用方案 1
data: {
…rest,
password: encryptedPassword,
},
// 或使用方案 2
// data: encryptedPayload,
});
}

5.3 响应拦截器自动解密

// src/utils/request.ts
import {decryptEnvelope} from './encryption';

http.interceptors.response.use((response) => {
const res = response.data;

// 检测是否为加密响应
if (res?.encryption) {
// 解密信封格式的响应
response.data = decryptEnvelope(res);
} else if (res?.data && typeof res.data === 'string') {
// 解密普通加密字符串
response.data = encryptionService.decrypt(res.data);
}

// 继续处理业务逻辑
if (response.data.code === RequestCodeEnum.SUCCESS) {
return response.data;
}

return Promise.reject(new Error(response.data.msg || '请求失败'));
});

💡 六、实战应用场景

6.1 敏感字段部分加密

/**
* 部分字段加密
* @param data- 原始数据
* @param fields – 需要加密的字段名数组
*/
export function encryptFields<T extends Record<string, any>>(
data: T,
fields: string[]
): T {
const result = {…data};

fields.forEach(field => {
if (result[field]) {
result[field] = encryptionService.encrypt(result[field]);
}
});

return result;
}

// 使用示例
const userData = {
username: 'zhangsan',
idCard: '110101199001011234',
mobile: '13800138000',
email: 'zhangsan@example.com',
};

// 只加密身份证和手机号
const encrypted = encryptFields(userData, ['idCard', 'mobile']);

6.2 GET 请求参数加密

/**
* 加密 GET 请求参数
*/
export function encryptQueryParams(params: Record<string, any>): Record<string, string> {
const encrypted: Record<string, string> = {};

Object.entries(params).forEach(([key, value]) => {
if (value != null) {
const encryptedValue = encryptionService.encrypt(value.toString());
encrypted[key] = encodeURIComponent(encryptedValue);
}
});

return encrypted;
}

// 使用示例
const searchUsers = async (keyword: string, page: number) => {
const params = {keyword, page, size: 10};

// 加密查询参数
const encryptedParams = encryptQueryParams(params);

const {data} = await request({
url: '/api/users/search',
method: 'GET',
params: encryptedParams,
});

return data;
};

6.3 文件上传加密

/**
* 加密文件上传
*/
export async function uploadEncryptedFile(file: File, url: string) {
// 1. 读取文件内容
const fileContent= await file.text();

// 2. 加密文件内容
const encryptedContent = encryptionService.encrypt(fileContent);

// 3. 创建加密 Blob
const encryptedBlob = new Blob([encryptedContent], {
type: 'application/octet-stream',
});

// 4. 上传
const formData = new FormData();
formData.append('file', encryptedBlob, `enc_${file.name}`);
formData.append('originalName', file.name);

const {data} = await request({
url,
method: 'POST',
data: formData,
headers: {
'Content-Type': 'multipart/form-data',
},
});

return data;
}

🔑 七、密钥管理最佳实践

7.1 密钥生成

/**
* 生成随机密钥 (Node.js 环境)
*/
const crypto = require('crypto');

function generateKey(bits: number= 256): string {
return crypto.randomBytes(bits / 8).toString('hex');
}

// 生成 AES-256 密钥
const aesKey = generateKey(256);
console.log('AES Key:', aesKey); // 64 位十六进制

// 生成 SM4 密钥
const sm4Key = generateKey(128);
console.log('SM4 Key:', sm4Key); // 32 位十六进制

7.2 密钥轮换策略

/**
* 密钥版本管理
*/
class KeyManager {
private keys: Map<string, string> = new Map();
private currentVersion: string = 'v1';

/**
* 添加新密钥版本
*/
addKeyVersion(version: string, key: string) {
this.keys.set(version, key);
}

/**
* 获取当前密钥
*/
getCurrentKey(): string {
return this.keys.get(this.currentVersion)!;
}

/**
* 切换到新密钥版本
*/
rotateKey(newVersion: string) {
if (this.keys.has(newVersion)) {
this.currentVersion = newVersion;
console.log(`密钥已轮换到 ${newVersion}`);
}
}

/**
* 解密时自动识别密钥版本
*/
decryptWithVersion(encrypted: string, version: string): any {
const key = this.keys.get(version);
if (!key) throw new Error(`未知密钥版本：${version}`);

return encryptionService.decrypt(encrypted);
}
}

7.3 密钥存储安全

✅ 推荐做法:
1. 开发环境：.env 文件 (不提交到 Git)
2. 生产环境：配置中心 (Apollo/Nacos)
3. 移动端：原生 Keystore 存储
4. Web 端：后端动态下发

❌ 禁止做法:
1. 硬编码在代码中
2. 提交到 Git 仓库
3. 前端明文存储
4. 多环境共用同一密钥

⚡ 八、性能优化技巧

8.1 加密性能对比

8.2 优化策略

策略 1: 缓存加密结果

const encryptionCache = new Map<string, string>();

function cachedEncrypt(key: string, data: any): string {
const cacheKey = `${key}:${JSON.stringify(data)}`;

if (encryptionCache.has(cacheKey)) {
return encryptionCache.get(cacheKey)!;
}

const encrypted = encryptionService.encrypt(data);
encryptionCache.set(cacheKey, encrypted);

return encrypted;
}

策略 2: Web Worker 异步加密

// worker/crypto-worker.ts
self.onmessage = async (e) => {
const {action, data, key} = e.data;

if (action === 'encrypt') {
const result = encryptionService.encrypt(data);
self.postMessage({result});
}
};

// 主线程使用
const worker= new Worker('/worker/crypto-worker.js');

worker.postMessage({
action: 'encrypt',
data: largeData,
key: secretKey,
});

worker.onmessage = (e) => {
console.log('加密完成:', e.data.result);
};

❓ 九、常见问题 FAQ

Q1: 加密后数据变大怎么办？

答: 正常现象，可采取以下优化:

// 方案 1: 先压缩再加密
import pako from 'pako';

function compressAndEncrypt(data: string): string {
const compressed = pako.gzip(data);
const base64 = btoa(String.fromCharCode(…compressed));
return encryptionService.encrypt(base64);
}

// 方案 2: 只加密敏感字段
const partialEncrypt = (data: any, fields: string[]) => {
const result = {…data};
fields.forEach(field => {
if (result[field]) {
result[field] = encryptionService.encrypt(result[field]);
}
});
return result;
};

Q2: 如何处理加密失败？

答: 已内置降级策略:

try {
return encryptionService.encrypt(data);
} catch (error) {
console.error('加密失败:', error);
// 降级：返回原文 (生产环境根据业务决定)
return JSON.stringify(data);
}

Q3: 前后端密钥如何协商？

答: 推荐三种方案:

方案 1: 后端生成，安全分发
– 后端生成随机密钥
– 通过短信/邮件发送给客户端
– 定期轮换 (每天/每周)

方案 2: RSA 密钥交换
– 后端生成 RSA 公私钥对
– 前端使用公钥加密 AES 密钥
– 后端私钥解密获取 AES 密钥

方案 3: 配置中心下发
– 使用 Apollo/Nacos 配置中心
– 密钥存储在配置中心
– 客户端启动时拉取

📊 十、总结与展望

10.1 本文核心要点

✅ 完整方案: AES + SM4 双重加密 ✅ 自动处理: 拦截器自动加解密 ✅ 信封模式: 标准化加密格式 ✅ 按需加密: 支持部分字段加密 ✅ 生产验证: 已落地多个项目

10.2 安全加固建议

🔐 基础防护:
– HTTPS 传输层加密
– 应用层二次加密
– 数字签名防篡改
– Token 身份认证

🛡️ 进阶防护:
– 请求时间戳校验 (防重放)
– Nonce 随机数 (防重放)
– 请求频率限制 (防刷)
– IP 黑名单机制

🏢 企业级防护:
– 国密算法支持
– 硬件加密模块 (HSM)
– 密钥管理系统 (KMS)
– 审计日志记录

10.3 下一步学习

• 数字签名实战：RSA + SHA256
• 证书双向认证：mTLS 配置
• 零信任架构：持续验证机制
• 隐私计算：联邦学习应用

互动话题: 你在项目中是如何处理 API 加密的？遇到过哪些坑？欢迎评论区分享！

作者: 行者 编辑时间: 2026 年 3 月 9 日 专栏地址: CSDN UniApp项目实战专栏 微信公众号: 【眼皮很沉】

觉得有用请点赞👍收藏⭐️ 关注💖 三连支持!

版权声明: 本文为 CSDN 博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。