保护 JS 客户端 SDK

Question

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

对于这两个 SDK（Cognito、Shopify），我遇到了一个问题：它们的核心功能将幕后数据附加到 localStorage，要求两个 SDK 在客户端运行。

但是完全在客户端运行此代码意味着这两个 API 所需的 API 令牌完全不安全，因此有人可以从我的捆绑包中获取它们，然后从任何地方进行身份验证/填充购物车/查看库存/任何东西（对？）。

我在两个 repos 上都写了 issue 来指出这一点。 Here's the more recent one, on Shopify。我在 SO 上查看了similarquestions，但我没有找到任何直接解决这些自定义 SDK/根深蒂固的localStorage 用法的问题，我开始怀疑我是否遗漏/误解了有关客户端安全的某些内容，所以我想我应该问问对此了解更多的人。

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

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

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

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

谢谢！

Answer 1

您不能将密钥等放在 .env 文件中吗？这样，没有人可以看到您在其中存储了哪些密钥。然后您可以通过 process.env.YOUR_VAR 访问您的密钥

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

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

此外，您目前正在存储哪些您担心的超级机密资料？ “API 令牌”是指通过 Cognito 身份验证后获得的 OpenId 令牌吗？

Answer 2

我可以为此回复 Cognito 部分。您的 AWS 密钥和访问密钥未存储在客户端中。对于您的 React.js 应用程序，您只需要应用程序中的 Cognito 用户池 ID 和应用程序客户端 ID。这些是向用户公开的唯一密钥。

我在这里的综合教程中详细介绍了这一点 - http://serverless-stack.com/chapters/login-with-aws-cognito.html