使用 React 前端处理受密钥保护的 API 操作的正确方法是啥？

Posted 2023-03-28

【中文标题】使用 React 前端处理受密钥保护的 API 操作的正确方法是啥？

【英文标题】：What is the proper way to handle key-secured API operations with a React front-end?使用 React 前端处理受密钥保护的 API 操作的正确方法是什么？

【发布时间】：2020-11-02 22:10:24

【问题描述】：

当考虑到我的 react-application 需要 API 密钥来访问它用于安全数据库上的 CRUD 操作的后端时，我遇到了这个问题：

https://create-react-app.dev/docs/adding-custom-environment-variables/

WARNING: Do not store any secrets (such as private API keys) in your React app!

我希望通过应用程序身份验证的用户能够执行这些操作，而不必将 API 密钥暴露给最终用户。

共同的共识似乎是创建一个中间层，即正确处理丰富/转发请求的快速服务器。但此时，如果我想针对中间层对 Web 应用程序进行身份验证，就会出现同样的问题，最终以一种或另一种方式暴露原始安全 API 后端。

有没有办法保证前端应用程序和原始安全后端之间的“握手”？如果我需要访问代码库来这样做，我可以通过中间层来代替吗

【参考方案1】：

您必须在您的 Express 服务器中禁用 CORS。这意味着除了您的前端之外，没有其他客户端可以向您的 Express 服务器发送请求。然后，虽然您对快速服务器的授权已公开，但除非请求来自您的前端应用程序，否则它无济于事。

【讨论】：

谢谢！是否存在恶意客户端以某种方式模仿您的应用程序的潜在风险？