确保Redux状态的存储并防止浏览器开发人员工具中的可见性

gj3fmq9x  于 2023-05-29  发布在  其他
关注(0)|答案(1)|浏览(120)

我需要指导如何在本地安全地存储持久化的Redux状态,确保它不能通过浏览器开发工具访问或显示。我想了解metamask-extension使用的策略和技术来实现这种级别的安全性。任何见解、代码片段或推荐的最佳实践都将受到高度赞赏。
我尝试使用redux-persist-transform-encrypt加密并在本地存储Redux状态。

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);

然而,我遇到了一个问题,加密的数据在浏览器的开发工具中仍然是可见的persist:root

相比之下,metamask-extension设法隐藏持久化数据并将加密的库/状态安全地存储在本地的以下位置:
C:\\Users\\USER_NAME\\AppData\\Local\\Google\\Chrome\\User Data\\Default\\Local Extension Settings\\nkbihfbeogaeaoehlefnkodbefgpgknn.
我正在寻求如何实现类似于metamask-extension实现的加密持久化Redux状态的安全存储的指导。

wmtdaxz3

wmtdaxz31#

Metamask是一个浏览器扩展,并且可能使用浏览器扩展的storage解决方案之一,这将解释您找到的文件。我假设他们使用storage.local,不要与localStorage混淆,localStorage是由网站使用的,而不是扩展。

相关问题