保持API凭证在React应用程序中保密

Question

我有一个连接到几个API服务的ReactJs前端应用程序。其中一些API服务要求我在首次登录时通过我的appId和appSecret。

我目前有一个js文件，它被缩小和捆绑，但我觉得我仍然将我的应用凭据暴露给精明的入侵者。

保护它们的正确方法是什么？

Answer 1

我阅读了评论，看到你仍然感到困惑，但更详细的解释是在评论中允许的空间超出了允许的范围，因此发布了更详细的解释作为答案。

这个想法是，您使用您的服务器作为所有请求和响应的代理。

• 案例1：你需要对从前端的API请求 -前端会发出不API证书到你的服务器的请求（，因为它们不是存储在前端应用程序）。您的服务器将在必要时验证请求（如检查您的用户是否已登录到您的服务器），确保已登录的用户有权使用api服务（仅当您有多个用户角色时），然后您的服务器将使用存储在服务器上的凭证发出api请求。然后，服务器响应前端客户端，该客户端正在等待对其请求的响应，或者是API请求的直接结果，或者是您在服务器上执行了一些预处理/格式设置的那些客户端的版本。通过这种方式，您的API凭证可以秘密存储在您的服务器上，并且只有您想授予访问权限的人才能够使用您的API凭证（通过您的前端客户端应用程序体验）才能使用它。
• 案例2：您将您的API公开给经过身份验证的用户 - 实现此目的的常用方法是向想要提供访问权限的人员颁发某种类型的密钥。如果他们失败了，他们要么运气不好，要么让他们以某种方式联系你/你的公司/为你管理这件事的人，让他们以某种方式向你证明他们是谁，他们是谁，他们应该可以访问你的api。这与您在网站上忘记密码的情况非常相似，您必须在重置密码之前证明自己是您，通常通过点击链接发送电子邮件至与您的帐户相关联的电子邮件帐户正在说失去了密码。无论如何，假设他们有他们的密码，它应该随每个请求一起发送给你的API，并且你需要确保它是你处理的每个请求的正确密钥。

这些不是处理这些交互的唯一方法，但它们是一些更常见的方法。情况1和情况2不同，因为在情况1中，有一个客户端（前端）需要从API获取数据。 API的凭据通过仅由您的服务器存储和使用来进行保护。在这种情况下，您可以选择限制使用您应用的每个人的访问权限，以及在您的应用上进行身份验证的每个人（您必须实现登录系统），仅限于已登录且具有特定权限级别的用户（您必须实现角色）。在情况2中，没有客户端应用程序，并且有人直接访问您的API。您仍然需要对其进行身份验证，因此您只需向其发送一次密钥，并且每次发出请求时都会传递该密钥。