如何实现类MetaMask的Redux持久化状态安全存储并屏蔽DevTools

问题背景 #

我需要实现Redux状态的本地安全持久化，确保数据无法通过浏览器开发者工具被查看或访问。目前已尝试使用redux-persist-transform-encrypt加密状态并存储，但加密后的数据仍能在开发者工具中以persist:root的形式被看到。希望参考MetaMask扩展的安全策略，实现类似的加密存储方案。

我的现有代码如下：

const encryptKey = encryptTransform({
  secretKey: "secrete-key",
});

const encryptionTransform = createTransform(
  (inboundState, key) => {
    return encryptKey.in(inboundState, key);
  },
  (outboundState, key) => {
    return encryptKey.out(outboundState, key);
  }
);

const customStore = localforage.createInstance({
  name: "Extension",
  storeName: "Extension Storage",
});

const persistConfig = {
  key: "root",
  storage: customStore,
  transform: [encryptionTransform],
};

const rootReducer = combineReducers({
  appState: appStateReducer,
  wallet: walletReducer,
  userPreferences: preferenceReducer,
  connectedWebsites: connectedWebsiteReducer,
  announcements: announcementsReducer,
  language: languageReducer,
});

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  devTools: false,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});

export const persistor = persistStore(store);

MetaMask的核心安全存储策略 #

MetaMask能实现数据隐藏和高安全性，核心依赖以下几点：

• 扩展专属隔离存储：使用Chrome/Firefox的chrome.storage.local（或browser.storage.local），该存储属于扩展沙箱，普通浏览器开发者工具无法直接访问，仅能通过扩展自身的调试工具查看，且存储目录与普通网页完全隔离（如你提到的C:\Users\USER_NAME\AppData\Local\Google\Chrome\User Data\Default\Local Extension Settings\nkbihfbeogaeaoehlefnkodbefgpgknn）。
• 基于用户密码的密钥派生：加密密钥并非硬编码，而是通过用户输入的密码，使用PBKDF2（或Argon2）算法派生而来，密钥不会明文存储在本地。
• 端到端加密存储：所有敏感状态（如密钥库）都会用派生密钥加密后再存储，即使存储文件被获取，没有用户密码也无法解密。
• 内存敏感数据清理：敏感数据仅在用户解锁钱包时加载到内存，锁定后立即从内存中清除，降低泄露风险。

改进后的Redux持久化实现方案 #

1. 替换存储为扩展专属的chrome.storage.local #

放弃localforage，改用浏览器扩展API提供的隔离存储，确保数据无法被普通网页或开发者工具访问。

2. 实现基于用户密码的加密密钥派生 #

使用Web Crypto API生成安全的派生密钥，避免硬编码密钥。

完整代码示例 #

import { configureStore, combineReducers } from '@reduxjs/toolkit';
import { persistReducer, persistStore } from 'redux-persist';
import createEncryptor from 'redux-persist-transform-encrypt';
import storage from 'redux-persist-chrome-storage'; // 适配chrome.storage的redux-persist存储适配器

// 从用户输入的密码派生加密密钥（在用户登录/解锁时调用）
async function deriveEncryptionKey(password, salt) {
  const encoder = new TextEncoder();
  const passwordBytes = encoder.encode(password);
  
  // 使用PBKDF2派生密钥，迭代次数至少100000次
  const keyMaterial = await crypto.subtle.importKey(
    'raw',
    passwordBytes,
    { name: 'PBKDF2' },
    false,
    ['deriveKey']
  );

  return crypto.subtle.deriveKey(
    {
      name: 'PBKDF2',
      salt: salt,
      iterations: 100000,
      hash: 'SHA-256'
    },
    keyMaterial,
    { name: 'AES-GCM', length: 256 },
    true,
    ['encrypt', 'decrypt']
  );
}

// 初始化加密转换器（获取到派生密钥后执行）
async function createSecureEncryptTransform(key) {
  // 将CryptoKey转换为可序列化的字符串（适配redux-persist-transform-encrypt）
  const exportedKey = await crypto.subtle.exportKey('raw', key);
  const secretKey = btoa(String.fromCharCode(...new Uint8Array(exportedKey)));

  return createEncryptor({
    secretKey,
    onError: (error) => {
      console.error('加密/解密失败:', error);
      // 处理解密失败逻辑（如用户密码错误）
    }
  });
}

// 初始化store（用户解锁后，获取到派生密钥后调用）
export async function initializeStore(password) {
  // 生成或获取盐（首次运行时生成，之后存储在chrome.storage中）
  let salt = await storage.getItem('encryption-salt');
  if (!salt) {
    salt = crypto.getRandomValues(new Uint8Array(16));
    await storage.setItem('encryption-salt', salt);
  }

  const encryptionKey = await deriveEncryptionKey(password, salt);
  const encryptTransform = await createSecureEncryptTransform(encryptionKey);

  const persistConfig = {
    key: 'root',
    storage: storage, // 使用chrome.storage.local
    transforms: [encryptTransform],
    blacklist: ['tempState'] // 排除不需要持久化的临时状态
  };

  const rootReducer = combineReducers({
    appState: appStateReducer,
    wallet: walletReducer,
    userPreferences: preferenceReducer,
    connectedWebsites: connectedWebsiteReducer,
    announcements: announcementsReducer,
    language: languageReducer,
  });

  const persistedReducer = persistReducer(persistConfig, rootReducer);

  const store = configureStore({
    reducer: persistedReducer,
    devTools: false, // 强制禁用Redux DevTools
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware({
        serializableCheck: false, // 适配加密后的数据格式
        immutableCheck: false
      }),
  });

  const persistor = persistStore(store);
  return { store, persistor };
}

最佳实践 #

• 绝不硬编码密钥：所有加密密钥必须由用户密码派生，避免密钥泄露风险。
• 禁用Redux DevTools：即使加密后，DevTools仍可能泄露内存中的状态，因此必须彻底禁用。
• 敏感数据内存清理：用户锁定应用时，主动清除Redux中的敏感状态（如钱包私钥、会话信息）。
• 存储完整性校验：在加密数据中添加哈希校验值，防止数据被篡改。
• 定期轮换密钥：允许用户修改密码时重新派生密钥，并重新加密所有存储数据。

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