如何在 create-react-app 中隐藏 API 密钥？

Question

我在 create-react-app 中制作了一个天气应用程序。如何隐藏 API 密钥以便可以提交到 GitHub？

现在密钥在 App.js 中： const API_KEY = “123456”;

原文由 E. Choi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不幸的是，即使您使用 gitignore 和 .env 文件，在 React 客户端中保留任何密钥也是不安全的。正如@ClaudiuCreanga 所指出的，React 环境变量嵌入在构建中并且可以公开访问。

你真的应该只在你的后端（例如 Node / Express）中保存 API 密钥或机密。您可以让您的客户端向您的后端 API 发送请求，然后后端 API 可以使用 API 密钥进行实际的 API 调用并将数据发送回您的客户端。

原文由 Antonia Blair 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

免责声明

警告：不要在你的 React 应用程序中存储任何秘密（例如私有 API 密钥）！

环境变量嵌入到构建中，这意味着任何人都可以通过检查您的应用程序文件来查看它们。

以下答案提供了在环境变量中存储非机密数据的正确方法。 请记住，秘密数据可通过开发人员工具访问，因此将其存储为环境变量是不安全的。 如果你想存储一些秘密数据，那么存储在后端是更好的选择，如果客户端想要访问秘密数据，可以通过向服务器发出请求来访问它。 （有关存储秘密数据的更多详细信息，请参阅@Antonia 的回答。）

事实证明，create-react-app 有一些内置功能可以帮助您实现这一点。感谢 George Karametas 提供的见解。要访问该功能，您需要：

1. 在项目目录的根目录中创建一个名为 .env 的文件。

 - your_project_folder
  - node_modules
  - public
  - src
  - .env         <-- create it here
  - .gitignore
  - package-lock.json
  - package.json

2. 在 .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

3. 将 .env 文件添加到 .gitignore 文件。

添加以下行后，保存 .gitignore 文件并执行 git status 以确保你的 .env 文件不会在 git 中显示为新文件。

 // .gitignore

# api keys
.env       <-- add this line

# dependencies
/node_modules
...

4. 通过 process.env 对象访问 API 密钥。

要检查您是否可以访问您的 API 密钥，请转到您的 App.js 文件并在 -- 下方的顶部添加一个 console.log require 保存文件并重新加载页面后，如果控制台日志没有显示您的 API 密钥，请尝试重新启动 React 服务器。确保在提交代码之前删除控制台日志行。

 // src/App.js

import React, { Component } from 'react';
import './App.css';

console.log(process.env.REACT_APP_WEATHER_API_KEY)

class App extends Component {
...

原文由 richardsonae 发布，翻译遵循 CC BY-SA 4.0 许可协议