在使用它们创建对象时，如何使用创建 React 应用程序维护隐藏的 API 密钥

Question

使用.env文件，我正在添加我的API密钥来获取远程数据。但是，我需要像这样使用它们创建一个 API 对象：

const myAPIObject = new fancyAPI({
url: process.env.REACT_APP_FANCYAPI_URL,
consumerKey: process.env.REACT_APP_FANCYAPI_CONSUMERKEY,
consumerSecret: process.env.REACT_APP_FANCYAPI_CONSUMERSECRET
})

我在/src文件夹中的专用文件中执行此操作。当我编译并在浏览器中检查缩小的代码以获取键文字时，它们就在那里。如何正确执行此操作？

Answer 1

基本上，这是 JavaScript 中的一个大问题，你尝试做的任何事情都会导致这个问题。 避免这种情况的唯一方法是不这样做。

忘记尝试使用来自客户端 JavaScript 应用程序的 API 密钥与您自己的后端进行通信。缩小、混淆或不混淆的密钥将暴露给任何知道如何使用开发人员工具的人。这就是为什么您应该不惜一切代价避免这种情况并依赖会话的原因。

至于应用程序中需要您与无法控制的第三方 API 通信的任何功能，答案是对您自己的后端进行简单的 CSRF 安全 AJAX 调用，然后让您的服务器端应用程序代表您的前端进行 API 调用，然后将响应返回到您的客户端应用程序。

(http://billpatrianakos.me/blog/2016/02/15/securing-api-keys-in-a-javascript-single-page-app/(

如您所知，客户端脚本在构建时是静态的，之后不会更改。因此，注入它们的任何变量都将保留在那里，并且对寻找它们的人可见。

因此，问题的解决方案似乎是实际实现一个服务器应用程序，该应用程序可以隐藏密钥并基于其他机制处理客户端，该机制不需要客户端向整个世界公开密钥。