时间戳

首页 > 解决方案 > 使用 Create React App 创建对象时如何维护隐藏的 API 密钥

javascript - 使用 Create React App 创建对象时如何维护隐藏的 API 密钥

问题描述

我正在使用一个.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夹中的专用文件中执行此操作。当我编译并检查浏览器中的缩小代码以获取关键文字时，它们就在那里。我该如何正确地做到这一点？

标签： javascriptnode.jsreactjs

解决方案

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

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

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

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

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

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

推荐阅读