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

Question

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

现在关键是在App.js中:const API_KEY ="123456";

Answer 1

事实证明,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文件并执行a 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 {
...

Answer 2

详细阐述Arup Rakshit的评论,

首先,你应该在你的src文件夹之外创建.env文件.

然后加

WARNING: Do not store any secrets (such as private API keys) in your React app!

Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

在提交之前,您应该排除此.env文件,以便找到.gitignore文件并添加.env.

现在你可以自由地去.

不要忘记在.gitignore文件中添加.env.

添加:

1. 如何在代码中使用env变量:

__CODE__

2. env变量未定义.我如何解决它？

为了读取env变量,您应该重新启动服务器.

Answer 3

from the react documentation:

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

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

Answer 4

这对我有用:

我.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

然后我回到我的app 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)并重新启动了服务器.之后我才能看到钥匙.

Answer 5

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

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

Answer 6

虽然@Antonia Blair 已经回答了这个问题，但我想更详细地了解一些基本规则。

1：大多数答案都建议使用 .env 文件。我想一次性说清楚。env 不是在这里添加任何安全层。正如名称所描述的 .env 仅用于在构建时设置环境。例如，通过使用环境变量，您可以在构建时设置一些全局值，并可以在运行时在应用程序中访问这些值。

2：Reactjs 只是一个在客户端浏览器中运行您的 javascript 代码的框架。因此客户端可以完全访问 javascript (Reactjs) 代码。客户端没有什么是安全的。因此，永远不要考虑通过将所有代码保留在客户端来使某些内容安全或对客户端隐藏。每当您需要对客户端隐藏某些内容时，您都需要合并服务器端的某些内容。只有服务器端代码对客户端是安全的。

3：所以你要做的是，你将把你的安全密钥保存在服务器端。

假设您的安全密钥的目的是为您的客户制作香蕉。所以客户需要香蕉而不是安全密钥，对吗？所以客户端向服务器请求香蕉，服务器使用安全密钥制作香蕉并将香蕉返回给客户端。毕竟客户来这里只是为了吃香蕉，而不知道我们如何制作香蕉，对吗？

4：所以经验法则是，无论您在何处拥有一些机密数据，都将其保存在服务器上。服务器将使用这些机密数据并将结果数据返回给客户端。