我有一个ReactJs前端应用程序，它连接到一些API服务。其中一些API服务要求我在初次登录时传递appId和appSecret。
我目前在一个js文件中保存了它们，该文件被缩小并捆绑，但我觉得我仍然在向精明的入侵者暴露我的应用程序凭据。
保护他们的正确方法是什么？
我阅读了评论，发现你仍然很困惑，但更详细的解释比评论中允许的要占用更多的空间，所以发布更详细的说明作为答案。
这个想法是将服务器用作所有请求和响应的代理。
- 情况1：您需要从前端向API发出请求-前端将在没有API凭据的情况下向您的服务器发出请求(因为它们不存储在前端应用程序上)。如果需要，您的服务器将对请求进行身份验证(如中所示，检查您的用户是否登录到您的服务器)，确保登录的用户具有使用api服务的权限(仅当您具有多个用户角色时)，然后您的服务器会使用存储在服务器上的凭据发出api请求。然后，服务器响应前端客户端，前端客户端正在等待对其请求的响应，使用API请求的直接结果或您在服务器上对其进行预处理/格式化的版本。通过这种方式，您的API凭据可以秘密存储在您的服务器上，并且只有您想要访问以使用您的API凭据(通过前端客户端应用程序体验)的人才能使用它
- 案例2：您将您的API公开给经过身份验证的用户-一种常见的方法是向您想要提供访问权限的人颁发某种密钥。如果他们丢失了密钥，他们要么运气不佳，要么您必须向他们提供某种方式来联系您/您的公司/为您管理密钥的人，并允许他们以某种方式向你证明他们就是他们所说的自己，他们应该可以访问你的api。这与如果你在网站上忘记了密码，你必须证明自己是你自己，然后才能重置密码的情况非常相似，通常是通过点击一个链接，他们会通过电子邮件发送到与你所说的丢失密码的帐户相关联的电子邮件帐户。无论如何，假设他们有自己的密钥，它应该与每个请求一起发送到你的api，你需要确保它是你处理的每个请求的正确密钥
这些不是处理此类交互的唯一方法，但它们是一些更常见的方法。情况1和情况2不同，因为在情况1中，有一个客户端(前端)需要从API获取数据。API的凭据是通过仅由您的服务器存储和使用来保护的。在这种情况下，您可以选择性地限制所有使用您的应用程序的人的访问，限制所有在您的应用上经过身份验证的人(您必须实现登录系统)的访问，只限制已登录并具有特定权限级别的人的访问(您必须实施角色)。在情况2中，没有客户端应用程序，并且有人直接访问您的API。你仍然需要对他们进行身份验证，所以你只需向他们发出一次密钥，他们每次提出请求时都会传递该密钥。