Question

我将redux-persist与redux-persist-transform-encrypt结合使用来对本地存储中的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)}}

有人知道一种生成用于加密的密钥的方法，但是还可以从查看source中的bundle.js的人那里隐藏该密钥吗？或其他使这种加密更加安全的方法。

Answer 1

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

这是添加到webpack config变量的Optimization属性中的新的webpack插件。

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

因此bundle.js的输出将变为：

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

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

从redux-persist-transform-encrypt隐藏Webpack bundle.js中的秘密密钥

1 个答案: