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

Question

我使用 .env 文件添加我的 API key 以获取远程数据。但是我需要像这样用它们创建一个 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 中的一个大问题，您尝试做的任何事情都会导致这个问题。避免这种情况的唯一方法就是不这样做。

Forget trying to communicate with your own back-end using API keys from a client-side JavaScript application. Minified, obfuscated, or not your keys are exposed to anyone who knows how to use the developer tools. That’s why you should avoid this at all costs and rely on sessions.

As for any functionality in your application that requires you to communicate with a third party API you don’t control, the answer is to make a simple CSRF secured AJAX call to your own back-end and then let your server-side application make the API call on behalf of your front-end then return the response back to your client-side app

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

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

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