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

Question

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

现在关键是在App.js中： const API_KEY =＆＃34; 123456＆＃34 ;;

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文件并执行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文件。

然后，添加

REACT_APP_WEATHER_API_KEY=123456

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

现在你可以自由地去了。

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

添加了：

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

const API_KEY = process.env.REACT_APP_WEATHER_API_KEY;

1. env变量未定义。我该如何解决？

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

Answer 3

来自反应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

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

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

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

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

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

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

Answer 6

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

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

Answer 7

希望现在还不晚，所以这就是我的做法。在根文件夹上，如果您使用react，则将环境变量加上REACT_APP_，因此是这样的。 REACT_APP_API_KEY=<keye here>不是。 React环境将查看.env，检查是否在REACT_APP_之前添加，然后就可以使用它了。

import React from 'React';
console.log(`${process.env.REACT_APP_API_KEY}`);

这会让你变数。

如果您正在使用节点，则需要一个软件包https://www.npmjs.com/package/dotenv

就这样。享受：）

Answer 8

在上述所有方法之后，如果其他人变得不确定，请稍加补充。我已经将.env放在客户端（create-react-app）文件夹下，而不是在根服务器下。那产生了错误。当然，当您在其中放置敏感数据时，会带来某些安全隐患。

Answer 9

如果您使用API​​密钥进行本地开发，请将其放在.env.development文件下，而git忽略它。 .env文件中的凭据将由生成过程获取，这将在生产中公开数据。

详细信息，请参见https://create-react-app.dev/docs/adding-custom-environment-variables/#what-other-env-files-can-be-used

Answer 10

如上所述，创建.env文件是有帮助的。但是这里注意的一点是-

-如果您在 url 中像这样API_KEY使用state-

this.state = {          
         url:`http://newsapi.org/v2/everything&apiKey=${process.env.REACT_APP_API_KEY}`
}

然后它将在React开发人员工具中可见。

相反，您可以将API_KEY直接放在获取的位置。例如-

fetch(`http://newsapi.org/v2/everything?&apiKey=${process.env.REACT_APP_API_KEY}`)

Answer 11

这是一个在代码中查找 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 密钥存储为环境变量，也有人如何在客户端上找到它。

Answer 12

您可以使用所有凭据创建单独的文件，并在那里声明您的密钥。并将此文件添加到.gitignore

//credentials.js
export const API_KEY = '12345'

Answer 13

创建一个包含密钥的config_keys.js文件。将它们导出为默认值

const API_K = "123456788345345235"
export default API_K

然后在app.js或目标.js文件中导入它们

IMPORT API_K from './config_keys/js'
const API_KEY = API_K

然后将config_keys.js添加到.gitignore