javascript - 保护 JS 客户端 SDK

Question

我正在开发一个 React-Redux 网络应用程序，它与 AWS Cognito 集成以进行用户身份验证/数据存储，并与 Shopify API 集成，以便用户可以通过我们的网站购买商品。

对于这两个 SDK(Cognito、Shopify)，我遇到了一个问题:它们的核心功能在后台将数据附加到 localStorage，这需要两个 SDK 都在客户端运行边。

但是完全在客户端运行这段代码意味着这两个 API 都需要的 API token 是完全不安全的，以至于有人可以从我的 bundle 中获取它们，然后从任何地方进行身份验证/填充购物车/查看库存/任何东西(对？)。

我在两个 repo 协议(protocol)上都写了问题来指出这一点。 Here's the more recent one, on Shopify .我看过 similar questions在 SO 上，但我没有发现直接解决这些自定义 SDK/根深蒂固的 localStorage 用法，我开始怀疑我是否遗漏/误解了有关客户端安全性的内容，所以我想我应该只需询问对此了解更多的人即可。

我感兴趣的是，抽象地说，是否有一种保护像这样的客户端 SDK 的好方法。一些想法:

• 最初，我尝试通过服务器代理所有请求，但是 localStorage 功能不起作用，我不得不在请求后伪造它并添加一大堆SDK 旨在处理的代码。事实证明，这非常困难/困惑，尤其是对于 Cognito。

• 我也在考虑创建一个服务器端端点，它只返回凭据并阻止来自域外的请求。在那种情况下，凭据不会在 bundle 中，但是一旦提出凭据请求，它们最终不会被网站上的某人扫描吗？

• 是否认为这些 key 实际上不需要是安全的，因为添加到 Shopify 购物车或使用应用程序注册用户不需要是安全操作？我只是担心我显然不知道用户可以使用这些凭据执行的全部操作，而且将它们保密显然是一种最佳做法。

谢谢!

Answer 1

你不能把 key 之类的东西放在一个 .env 文件中吗？这样，没有人可以看到您在那里存储了哪些 key 。然后您可以通过 process.env.YOUR_VAR 访问您的 key

对于 Cognito，您可以在 .env 文件中存储用户池 ID、应用程序客户端 ID、身份池 ID 等内容。

dotenv 的 NPM 包可以在这里找到:NPM dotenv

此外，您目前正在存储哪些让您担心的绝密资料？ “API token ”是指您在向 Cognito 进行身份验证后获得的 OpenId token 吗？