我在 create-react-app 中制作了一个天气应用程序。如何隐藏 API 密钥以便可以提交到 GitHub？
现在关键在 App.js 中： const API_KEY = "123456";
【问题讨论】：
标签： reactjs api github create-react-app api-key
不幸的是，即使您使用 gitignore 和 .env 文件，在您的 React 客户端中保留任何密钥也是不安全的。正如@ClaudiuCreanga 所指出的，React 环境变量嵌入在构建中并且可以公开访问。
您实际上应该只在您的后端（例如 Node / Express）中保存 API 密钥或机密。您可以让您的客户端向您的后端 API 发送请求，然后后端 API 可以使用 API 密钥进行实际的 API 调用并将数据发送回您的客户端。
【讨论】：
免责声明
警告：请勿在您的 反应应用！
环境变量嵌入到构建中，这意味着任何人都可以 通过检查应用的文件来查看它们。
以下答案提供了在环境变量中存储非机密数据的正确方法。 请记住，秘密数据可以通过开发人员工具访问，因此存储为环境变量是不安全的。如果您想存储一些秘密数据，那么存储在后端是更好的选择，如果客户端想要访问秘密数据，它可以通过向服务器发出请求来访问。 （有关存储秘密数据的更多详细信息，请参阅@Antonia 的回答。）
事实证明，create-react-app 有一些内置功能可以帮助您。谢谢George Karametas 的洞察力。要访问该功能，您需要：
.env 的文件。- your_project_folder
- node_modules
- public
- src
- .env <-- create it here
- .gitignore
- package-lock.json
- package.json
.env 文件中，将 REACT_APP_ 添加到您选择的 API 密钥名称并分配它。create-react-app 工具使用REACT_APP_ 来识别这些变量。如果您的 API 密钥名称不以它开头，create-react-app 将看不到它。
// .env
REACT_APP_API_KEY=your_api_key <-- yes
API_KEY=your_api_key <-- no
// Example (from 이준형's response):
REACT_APP_WEATHER_API_KEY=123456
.env 文件添加到您的.gitignore 文件中。添加以下行后，保存.gitignore 文件并执行git status 以确保您的.env 文件不会在git 中显示为新文件。
// .gitignore
# api keys
.env <-- add this line
# dependencies
/node_modules
...
process.env 对象访问 API 密钥。要检查您是否可以访问您的 API 密钥，请转到您的 App.js 文件并在 require 语句下方的顶部添加 console.log。保存文件并重新加载页面后，如果控制台日志没有显示您的 API 密钥，请尝试重新启动反应服务器。请务必在提交代码之前删除控制台日志行。
// src/App.js
import React, { Component } from 'react';
import './App.css';
console.log(process.env.REACT_APP_WEATHER_API_KEY)
class App extends Component {
...
【讨论】：
警告
除非您正在制作教程应用程序，否则不要将 API 密钥等机密信息放在客户端源代码（例如 React 应用程序）中。 From Create React App's documentation:
警告：请勿在您的 反应应用！
环境变量嵌入到构建中，这意味着任何人都可以 通过检查应用的文件来查看它们。
首先，在项目的根目录中创建一个 .env 文件，即在 src 文件夹之外运行 react-scripts start（或 yarn start）的位置。
然后，添加
REACT_APP_WEATHER_API_KEY=123456
在提交之前，你应该排除这个 .env 文件，以便找到 .gitignore 文件并添加 .env。
变量的名称需要以REACT_APP_ 开头，这样可以防止您在构建时意外包含机密。
不要忘记在 .gitignore 文件中添加 .env。
在代码中使用环境变量：
const API_KEY = process.env.REACT_APP_WEATHER_API_KEY;
为了在将环境变量添加到.env 后读取它们，请重新启动您的服务器。
【讨论】：
来自反应documentation：
警告：不要在您的 React 应用中存储任何机密（例如私有 API 密钥）！
环境变量嵌入到构建中，这意味着任何人都可以 通过检查应用的文件来查看它们。
【讨论】：
虽然@Antonia Blair 已经回答了这个问题，但我想通过一些基本规则来了解更多。
1：大多数答案都建议使用 .env 文件。我想一次性明确说明。env 不是在这里添加任何安全层。名称所描述的 .env 仅用于在构建时设置环境。例如通过使用环境变量，您可以在构建时设置一些全局值，并且可以在运行时在应用程序中访问这些值。
2：Reactjs 只是一个在客户端浏览器中运行您的 javascript 代码的框架。因此客户端可以完全访问 javascript (Reactjs) 代码。客户端没有什么是安全的。因此，永远不要想通过将所有代码保留在客户端来使某些东西安全或对客户端隐藏。每当您需要向客户端隐藏某些内容时，您需要在服务器端合并某些内容。只有服务器端代码对客户端来说是安全的。
3：所以你要做的是，你将把你的安全密钥保存在服务器端。
假设您的安全密钥的目的是为您的客户制作一个 cookie。所以客户端需要cookie而不是安全密钥，对吗？因此，客户端向服务器请求 cookie，服务器使用安全密钥制作 cookie 并将 cookie 返回给客户端。毕竟客户端只是来吃饼干的，不知道我们怎么做饼干对吧？
4：所以经验法则是，无论您有什么机密数据，都将其保存在服务器上。服务器将使用这些机密数据并将结果数据返回给客户端。
编辑 Sep_06_2021
一位用户要求提供一个编码示例，因此我将提出一个我使用上述技术处理的实时场景。 这是我的用例
我有一个向非公共 API 提交公共表单的 Reactjs 应用程序。
非公共 API 是 Harvest API 托管的 https://www.greenhouse.io/
此 API 需要一个身份验证标头才能使用它发出请求。我已向 API 所有者订阅，并从他们那里收到了一个秘密令牌，我可以将其用于我的请求以访问他们的 API
当然，我想保持我的令牌个人化，不要将其暴露给 公众用户
我已经使用 axios 客户端与 API 通信
我有两种方法来执行上述场景
错误的方法
我直接从我的 Reactjs 应用程序向 API 发出请求
下面是我想要访问的 API 端点
apiURL=https://boardsapi.greenhouse.io/v1/boards/xyz/jobs/"+jobId+""
上述 API 端点需要一个授权标头，我将在其中提供我的秘密令牌。
const config = {
headers: {
"Authorization": "Basic ####MySecretCode#####",
} };
假设我想用这个请求发布一些表单数据
let formData=MyFormData
我现在可以使用如下所示的 axios 客户端发送我的请求
let result=await axios.post(apiURL, formData,config);
使用上述技术，我可以成功地将表单数据发布到 Harvest API。
但就像我说的那样，与此 API 进行通信是一种不正确的方式。因为我在客户端暴露了我的秘密令牌。
正确的方法
我在 Nodejs 上构建了一个 API 并公开托管。
假设我想将一些表单数据发布到 Harvest API
let formData=MyFormData
我不会直接从我的客户端应用程序中访问 Harvest API。相反，我已经在我的中间件 API 中公开了端点来处理这个问题。 假设下面是我想要访问的中间件 API 的端点 URL
apiURL=https://proxy-server/apply
上述 API 端点不需要授权标头。所以我可以使用下面的 axios 客户端发送帖子请求
let result=await axios.post(apiURL, formData);
区别很明显。这次我没有在我的请求中提供秘密令牌。因为这不是对 Harvest API 的直接请求，而是对由我开发和托管的中间件 API 的请求。
我在我的中间件 API 中收到此请求，将我的秘密令牌与它一起添加并将其转发到 Harvest API。 Harvest API 的响应返回到我们的 middle_ware API 并因此转发回我们的 Reactjs 客户端应用程序。
秘密令牌现在驻留在我的服务器端 API 中，对外部用户安全。
【讨论】：
这对我有用：
我在根文件夹中创建了.env。
在那个文件夹中，我添加了我的密钥：
REACT_APP_API_KEY_YT = "key"
//I added YT for youtube which is where my api key is from
然后我去了.gitignore ||或在您的根目录中创建一个 .gitignore 如果您没有它。在 .gitignore 我添加了 .env
#api key
.env
然后我回到了我的应用 js 文件的根目录。对我来说那是 index.js 对于其他它可能是 App.js 在那里我创建了一个 const API_KEY
const API_KEY =`${process.env.REACT_APP_API_KEY_YT}`
我通过控制台记录它检查了它是否工作。
console.log("API", API_KEY)
我收到了undefined。
我停止了服务器（Control + C）并重新启动了服务器。
之后，我能够看到钥匙。
【讨论】：
这是一个在代码中查找 API 密钥的示例，即使您尝试将其隐藏在环境变量中。
我使用 NewsAPI 构建了一个非常简单的应用程序，这需要我注册一个 API 密钥。这是我使用 API 密钥作为环境变量对 NewsAPI 端点的获取。
fetch(`https://newsapi.org/v2/top-headlines?q=${keyword}&apiKey=${process.env.REACT_APP_API_KEY}`)
.then(res => res.json())
.then(
(result) => {
setIsLoaded(true);
setArticles(result.articles);
})
但是，当我使用 Chrome 开发工具检查网络请求时，您将能够看到 API 密钥的实际值。我希望这可以帮助人们了解即使您将 API 密钥存储为环境变量，也有人可以在客户端上找到它。
【讨论】：
如果您将 API 密钥用于本地开发目的，请将其放在 .env.development 文件下，git 忽略它。 .env 文件中的凭据将由构建过程获取，这将在生产中公开数据。
【讨论】：
如上所述，创建.env 文件很有帮助。但是需要注意的一点是-
-如果您在 url 中使用 API_KEY 作为 state 像这样-
this.state = {
url:`http://newsapi.org/v2/everything&apiKey=${process.env.REACT_APP_API_KEY}`
}
然后它将在 React 开发者工具中可见。
相反，您可以将 API_KEY 直接放在 fetch 的位置。例如-
fetch(`http://newsapi.org/v2/everything?&apiKey=${process.env.REACT_APP_API_KEY}`)
【讨论】：
除了只添加一个.env 文件之外，更进一步的是使用dotenv。
require('dotenv').config()
.env。.env 文件中添加特定于环境的变量。确保你有 REACT_APP_... or else it will not work!
REACT_APP_DB_HOST=localhost
REACT_APP_DB_USER=root
REACT_APP_DB_PASS=s1mpl3
process.env 来访问您的 .env 文件中的键和值。 const db = require('db')
db.connect({
host: process.env.DB_HOST,
username: process.env.DB_USER,
password: process.env.DB_PASS
})
【讨论】：
不应将安全密钥/秘密发送到客户端。假设您想通过您的应用（在浏览器中运行）从 S3 下载文件到客户端计算机上。
调用服务器以获取临时令牌（随时间过期）
服务器（拥有秘密和一切）制作令牌并将其发回
客户端使用令牌访问 S3
令牌本身不是秘密，一旦过期就没用了。
【讨论】：