使用Web Crypto API加密时window.crypto.subtle.encrypt返回undefined问题

我一眼就看到了你的代码里的关键问题，这是Promise链式调用里很常见的疏忽，咱们一步步来解决：

核心问题：Promise链中丢失了返回值 #

你的第一个.then()回调里调用了encryptData，但没有返回这个函数的结果。因为encryptData（应该）是返回一个Promise的异步操作，如果你不把它return出去，当前的.then()就会默认返回一个resolved为undefined的Promise，这就是为什么你下一个.then()里的encrypted始终是undefined。

其他需要修正的细节 #

1. encodeText函数的拼写错误：你代码里最后一行是return undefi...，应该补全为return undefined，同时最好给不支持TextEncoder的情况加个错误提示，避免后续流程静默失败。
2. 确保encryptData返回Promise：window.crypto.subtle.encrypt本身就是异步API，所以你的encryptData函数必须返回它的调用结果（也就是一个Promise），否则即使你在第一个.then()里return了，也拿不到正确的加密结果。

修正后的完整代码示例 #

const generatedIv = generateIv();
let generatedKey;
generateKey()
  .then(key => {
    generatedKey = key;
    // 关键：return encryptData的Promise，让Promise链继续传递结果
    return encryptData(encodeText(JSON.stringify(data)), generatedKey, generatedIv);
  })
  .then(encrypted => {
    console.log(encrypted); // 现在应该能拿到正确的加密结果了
  })
  .catch(err => console.error(err));

function encodeText(data) {
  if ('TextEncoder' in window) {
    return new TextEncoder('utf-8').encode(data);
  }
  // 修正拼写并添加错误提示
  throw new Error('TextEncoder is not supported in this environment');
}

// 确保encryptData函数返回Promise（匹配Web Crypto API的异步特性）
function encryptData(data, key, iv) {
  // 示例使用AES-GCM算法，需和密钥生成算法一致
  return window.crypto.subtle.encrypt(
    {
      name: "AES-GCM",
      iv: iv
    },
    key,
    data
  );
}

// 补充规范的密钥和IV生成函数（供参考）
function generateKey() {
  return window.crypto.subtle.generateKey(
    {
      name: "AES-GCM",
      length: 256,
    },
    true,
    ["encrypt", "decrypt"]
  );
}

function generateIv() {
  // AES-GCM推荐使用12字节的随机IV
  return window.crypto.getRandomValues(new Uint8Array(12));
}

额外检查点 #

• 确认generateKey函数确实返回了有效的CryptoKey对象，内部没有丢失返回值。
• 加密算法的配置参数要和密钥生成的参数完全匹配（比如都用AES-GCM），否则会抛出加密失败的错误。

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