Ionic应用后台模式下Web Crypto AES-GCM解密失败求助

问题现象 #

Ionic应用处于前台时，基于Web Crypto API的AES-GCM解密功能正常；切换到后台后，解密进程完全停滞，应用表现为冻结状态。将应用切回前台时，所有待处理的通知会一次性触发，说明后台状态下解密代码未正常执行。

核心原因 #

1. WebView后台线程限制：移动端WebView在应用后台时会大幅限制JavaScript线程的执行优先级，crypto.subtle这类异步加密API会被暂停，直到应用回到前台才会继续执行。
2. Firebase消息后台处理逻辑：Firebase X在后台接收消息时，回调的执行环境和前台不同，异步任务无法获得足够的CPU时间完成解密操作。
3. localStorage的后台访问限制：部分移动端系统在后台时会限制localStorage的读写，导致密钥和IV获取失败，间接阻塞解密流程。

解决方案 #

1. 使用Capacitor Background Tasks执行后台解密 #

借助Capacitor的Background Tasks插件，为解密操作申请后台执行权限，确保后台时能获得CPU时间完成解密。

2. 替换localStorage为Capacitor Preferences #

改用更可靠的原生存储API存储密钥和IV，避免后台时的访问限制。

3. 重构解密逻辑，避免阻塞消息回调 #

将解密操作从消息接收回调中剥离，放入独立的后台任务队列，防止阻塞消息处理流程。

修改后的代码示例 #

安装依赖 #

npm install @capacitor/background-tasks
npx cap sync

重构消息接收和解密逻辑 #

import { BackgroundTasks } from '@capacitor/background-tasks';
import { Preferences } from '@capacitor/preferences';

// 消息接收回调
this.firebaseX.onMessageReceived().subscribe(async data => {
  this.ngxLogger.info('PUSH: onMessageRecieved:'+JSON.stringify(data));
  this.initializeDebug("OnMessageRecived");

  // 启动后台任务处理解密
  await BackgroundTasks.schedule({
    taskName: 'decryptPushNotification',
    taskTitle: '处理通知解密',
    taskDesc: '正在解密推送通知内容',
    taskIcon: {
      name: 'ic_notification',
      iconColor: '#ffffff'
    },
    // 给任务分配30秒执行时间
    expiration: 30000
  });

  // 执行后台解密任务
  this.handleBackgroundDecrypt(data.data, data.ets);
}, errRes => {
  console.log(' Error in receiveing message from Firebasex ' + JSON.stringify(errRes));
});

// 后台解密处理函数
async handleBackgroundDecrypt(data: string, ets: any) {
  try {
    // 从Capacitor Preferences获取密钥和IV
    const { value: secretKey } = await Preferences.get({ key: 'secretKey1' });
    const { value: iv } = await Preferences.get({ key: 'ivParameterSpec1' });

    if (!secretKey || !iv) {
      throw new Error('密钥或IV不存在');
    }

    const decryptedData = await this.decrypt(data, secretKey, iv);
    this.decryptedData = decryptedData;
    this.ngxLogger.info('Decrypted Alert ' + this.decryptedData);

    // 通知任务完成
    await BackgroundTasks.finish({ taskName: 'decryptPushNotification' });
  } catch (error) {
    console.error('后台解密失败:', error);
    await BackgroundTasks.finish({ taskName: 'decryptPushNotification' });
  }
}

// 解密函数（调整密钥获取逻辑）
async decrypt(data: string, secretKey: string, iv: string) {
  try {
    const ivUint8Array = this.b64ToUint8Array(iv);
    const ciphertextUint8Array = this.b64ToUint8Array(data);

    const key = await this.importKey(secretKey);
    if (!key) throw new Error('密钥导入失败');

    const decrypted = await crypto.subtle.decrypt(
      { name: 'AES-GCM', iv: ivUint8Array },
      key,
      ciphertextUint8Array
    );

    const dec = new TextDecoder();
    const decryptedText = dec.decode(new Uint8Array(decrypted));
    console.log('Decrypted Text:', decryptedText);
    return decryptedText;
  } catch (error) {
    console.error('Decryption failed:', error);
    return null;
  }
}

// 密钥导入函数保持不变
async importKey(secretKey: string) {
  try {
    const keyBuffer = this.b64ToUint8Array(secretKey);
    const key = await crypto.subtle.importKey(
      "raw",
      keyBuffer,
      { name: "AES-GCM" },
      true,
      ["decrypt", "encrypt"]
    );
    return key;
  } catch (ex) {
    console.error('ImportKey error:', ex.name, ', Message:', ex.message);
    return null;
  }
}

// Base64转Uint8Array工具函数保持不变
b64ToUint8Array(base64string: string) {
  return Uint8Array.from(atob(base64string), c => c.charCodeAt(0));
}

额外注意事项 #

• 部分Android设备需要在AndroidManifest.xml中配置后台权限，确保后台任务能正常执行。
• iOS对后台任务的限制更严格，需要在Info.plist中添加对应权限描述，并且后台任务执行时间有限制，要确保解密操作足够高效。
• 避免在后台任务中执行UI操作，所有UI更新需等到应用回到前台后触发。

内容的提问来源于stack exchange，提问作者Staha