Flutter Web端flutter_secure_storage报错：LegacyJavaScriptObject非FutureOr<CryptoKey>子类型

Chrome中的错误 #

TypeError: Instance of 'LegacyJavaScriptObject': type 'LegacyJavaScriptObject' is not a subtype of type 'FutureOr?'

报错的flutter_secure_storage代码 #

来自flutter_secure_storage_web.dart：

encryptionKey = await js_util.promiseToFuture<html.CryptoKey>(
  crypto.generateKey(algorithm, true, ["encrypt", "decrypt"]),
);

项目触发错误的代码 #

// 保存令牌及其他信息
Future<void> storeToken(data) async {
  const storage = FlutterSecureStorage();

  // 写入值
  await storage.write(key: keyToken, value: data["token"]);
  await storage.write(key: keyExp, value: data["exp"].toString());
  await storage.write(key: keyId, value: data["id"].toString());
  await storage.write(key: keyUsername, value: data["username"]);
  await storage.write(key: keyNick, value: data["nick"]);

  // 读取值（可选）
  var nick = await storage.read(key: keyNick);
  debugPrint("nick: $nick");
}

版本信息 #

• dart：3.4.3
• flutter：3.22.2
• flutter_secure_storage：flutter_secure_storage_web-1.2.1
• chrome：Version 126.0.6478.126 (Official Build) (64-bit)（运行于Linux系统）

代码昨日可正常运行，今日调试时触发错误。

解决办法 #

1. 升级flutter_secure_storage版本：当前使用的flutter_secure_storage_web-1.2.1大概率存在与Chrome 126的兼容问题，直接升级到最新稳定版，新版本通常会修复浏览器API适配的类型转换问题。

2. 临时禁用Web端加密：如果暂时无法升级，可初始化存储时关闭加密逻辑，绕过密钥生成步骤：

const storage = FlutterSecureStorage(
  webOptions: WebOptions(
    encryptionOptions: EncryptionOptions(
      enabled: false,
    ),
  ),
);

注意：禁用加密后Web端数据会明文存在localStorage中，仅适合测试环境或非敏感数据存储。

3. 清除Chrome站点缓存与数据：浏览器缓存的旧JS绑定可能导致类型异常，清除当前站点的缓存和存储数据后重启Chrome再测试。

4. 检查Chrome权限设置：确认Chrome允许当前站点使用Web Crypto API，部分隐私插件或严格隐私设置可能会拦截API调用，导致返回LegacyJavaScriptObject而非标准CryptoKey。

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