时间戳

首页 > 解决方案 > 从 redux-persist-transform-encrypt 隐藏 webpack bundle.js 中的密钥

reactjs - 从 redux-persist-transform-encrypt 隐藏 webpack bundle.js 中的密钥

问题描述

我将 redux-persist 与 redux-persist-transform-encrypt 结合使用来加密我在 localstorage 中的 redux 存储。所以我像这样实现了加密：

const encryptor = createEncryptor({
    secretKey: 'my-super-secret-key',
    onError: function(error) {
      // Handle the error.
      console.log(error);
    }
}); 

const persistConfig: PersistConfig = {
    key: 'citizentracker',
    storage: storage,
    blacklist: new Array('form'),
    transforms: [encryptor]
};

一切正常，redux 存储在本地存储中加密。我注意到的问题是，当我通过 webpack 4 进行生产包时。在 bundle.js 文件中，您可以通过搜索“secretKey”来查看键值。当我这样做时，我能够看到：

{secretKey:"my-super-secret-key",onError:function(e){console.log(e)}}

有没有人知道一种生成用于加密的密钥的方法，但也可以隐藏该密钥以防止人们查看源代码中的 bundle.js？或其他使这种加密更安全的方法。

标签： reactjswebpackreduxreact-reduxredux-persist

解决方案

所以我去探索做的一件事是uglifyjs-webpack-plugin使用 webpack。这允许我通过 UglifyJsPlugin 的 mangle 属性来缩小对象属性名称。所以在下面的代码中，我告诉它通过正则表达式只缩小“secretKey”的对象属性。纯文本中的秘密仍然存在于 bundle.js 文件中，但至少现在更难找到了。仍在探索其他选择。

这是添加到 webpack 配置变量的优化属性中的新 webpack 插件。

  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          mangle: {
            properties: {
              regex: /secretKey/
            }
          }
        }
      })
    ]
  },

所以 bundle.js 的输出会变成：

{u:"my-super-secret-key",onError:function(e){console.log(e)}}

这有帮助，但当然希望听到更好的解决方案！

推荐阅读