uni-app中RSA加密跨平台兼容性问题

Question

在使用uni-app进行跨平台开发时，集成RSA加密常面临兼容性问题，尤其在H5、App和小程序三端表现不一。典型问题如：在H5端可正常调用jsencrypt等JavaScript库完成RSA加密，但在微信小程序或App原生环境中因不支持Window对象或异步加载公钥方式不同导致加密失败。此外，各平台对Web Crypto API的支持差异、公钥格式（PEM/DER）处理不一致、同步异步调用机制区别等问题，进一步加剧了统一实现难度。开发者常需引入不同polyfill或封装多端适配层，极大增加了维护成本与调试复杂度。如何实现一套代码在多端稳定安全地执行RSA加密，成为实际开发中的关键挑战。

Answer 1

uni-app多端集成RSA加密的兼容性挑战与统一解决方案

1. 问题背景与典型场景分析

在使用uni-app进行跨平台开发时，开发者常需对敏感数据（如用户登录凭证、支付信息）进行前端加密处理。RSA作为非对称加密算法，广泛应用于公钥加密、数字签名等安全场景。然而，在H5、App（基于WebView或原生插件）、微信小程序三端环境中，JavaScript运行环境存在显著差异：

• H5端支持完整的DOM和Window对象，可直接引入jsencrypt.js等第三方库；
• 微信小程序受限于沙箱环境，不支持动态eval、new Function及部分全局对象；
• App端虽可通过web-view运行H5代码，但在原生逻辑层（如nvue页面）中无法访问标准Web API。

这些差异导致同一套RSA加密逻辑在不同平台表现不一，甚至完全失效。

2. 常见技术问题深度剖析

平台	支持的API	限制与问题	典型错误
H5	Web Crypto API, jsencrypt, window.crypto	无特殊限制	—
微信小程序	无Web Crypto，需用crypto-js扩展库	不支持Window对象，异步加载公钥困难	ReferenceError: window is not defined
App（nvue）	仅支持V8引擎基础JS语法	无DOM、无window、无fetch	TypeError: Cannot read property 'JSEncrypt' of undefined
支付宝小程序	部分支持Web Crypto	API命名空间不同（my.crypto）	my.crypto.encrypt is not a function

3. 公钥格式与加载机制差异

RSA加密依赖于标准的PEM或DER格式公钥。各平台对公钥字符串的解析方式不同：

1. H5端通常接受以-----BEGIN PUBLIC KEY-----开头的PEM文本；
2. 小程序环境要求去除换行符并Base64编码；
3. App原生插件可能需要将公钥预编译为二进制资源文件；
4. 部分平台（如百度小程序）强制要求通过HTTPS远程获取密钥，禁止硬编码。

这种格式处理的不一致性使得“一次编写、多端运行”的理想难以实现。

4. 同步与异步调用模型冲突

Web Crypto API设计为异步Promise接口，而多数轻量级加密库（如jsencrypt）提供同步返回值。在以下场景中引发问题：

// H5端可行
const encrypt = new JSEncrypt();
encrypt.setPublicKey(publicKeyPem);
const encrypted = encrypt.encrypt('data'); // 同步返回

// 小程序端若使用my.crypto则必须异步
my.crypto.rsaEncrypt({
  text: 'data',
  key: publicKey,
  success: (res) => console.log(res.encrypted)
});
    

此差异迫使开发者重构业务逻辑，从同步阻塞式调用转向回调或Promise链式结构。

5. 多端适配层设计方案

为解决上述问题，建议构建统一的加密抽象层，屏蔽底层差异。核心思路如下：

graph TD
            A[应用层调用encrypt(data)] --> B{运行环境检测}
            B -- H5 --> C[使用jsencrypt或Web Crypto]
            B -- 微信小程序 --> D[调用微信加密API或引入miniprogram-crypto]
            B -- App(nvue) --> E[调用原生插件 via UniModule]
            B -- 支付宝/百度 --> F[使用对应平台crypto API]
            C --> G[返回base64加密串]
            D --> G
            E --> G
            F --> G

6. 推荐实现方案与代码示例

定义统一接口UniRSA：

interface UniRSA {
  setPublicKey(key: string): void;
  encrypt(data: string): Promise<string>;
}

// 工厂模式根据环境创建实例
function createUniRSA(): UniRSA {
  if (typeof window !== 'undefined' && window.document) {
    // H5环境
    return new WebCryptoRSA();
  } else if (typeof wx !== 'undefined') {
    // 微信小程序
    return new MiniProgramRSA();
  } else if (uni.getSystemInfoSync) {
    // App环境，判断是否为nvue
    const { platform } = uni.getSystemInfoSync();
    if (platform === 'android' || platform === 'ios') {
      return new NativePluginRSA(); // 调用原生模块
    }
  }
  throw new Error('Unsupported environment');
}
    

7. 第三方库选型建议

• jsencrypt：适用于H5，但需polyfill才能在Node.js-like环境运行；
• node-forge：纯JS实现，支持PEM解析，可在小程序中打包使用；
• asmcrypto.js：轻量级、无依赖，适合嵌入nvue页面；
• miniprogram-crypto：专为微信小程序设计，支持与云函数协同加解密；
• uni-cloud crypto模块：推荐将敏感操作下沉至云端执行，避免前端暴露私钥。

8. 安全最佳实践

尽管前端加密无法替代后端安全体系，但仍应遵循以下原则：

1. 禁止在客户端硬编码私钥；
2. 公钥应通过HTTPS安全通道动态下发；
3. 结合时间戳+随机数防止重放攻击；
4. 对加密结果做Base64编码以适应HTTP传输；
5. 在App端优先使用原生加密模块（如Android KeyStore/iOS Keychain）提升性能与安全性；
6. 定期轮换密钥并建立灰度发布机制；
7. 记录加密失败日志用于异常监控；
8. 对低版本系统降级使用AES对称加密作为备选方案。

9. 构建与部署优化策略

为确保多端一致性，建议在CI/CD流程中加入以下检查：

# 检查各平台构建产物是否包含必要加密库
npm run build:h5 && grep -r "JSEncrypt" dist/h5/
npm run build:mp-weixin && grep -r "rsaEncrypt" dist/mp-weixin/
npm run build:app && grep -r "uni.requireNativePlugin" src/native-crypto.js
    

同时利用conditional compilation特性按平台注入不同实现：

// #ifdef H5
import { JSEncrypt } from 'jsencrypt';
// #endif

// #ifdef MP-WEIXIN
const miniprogramCrypto = require('miniprogram-crypto');
// #endif
    

10. 未来演进方向

随着WebAssembly在小程序和App中的逐步支持，可考虑将OpenSSL或Libsodium的核心加密逻辑编译为WASM模块，实现真正意义上的“一次编译、多端运行”。此外，uni-app官方正在推进@uni/crypto标准化API提案，有望在未来统一各端加密能力接口。