使用 React 时隐藏 API 密钥的最安全方法

作者：Terry2025.03.14来源：Web前端之家浏览：96评论:0

关键词：React

想要确保在使用 React 时 API 密钥安全可靠吗？可以帮您搞定！我们将向您展示隐藏 API 密钥的最佳方法，从使用环境变量到构建您自己的后端代理服务器。

过去，开发人员必须编写各种自定义代码才能让不同的应用程序相互通信。但是，如今，应用程序编程接口(API) 让这一切变得容易得多。API 为您提供了与不同应用程序顺畅高效交互所需的一切，最常见的情况是，一个应用程序向另一个应用程序请求数据。

虽然 API 提供了许多好处，但它们也给您的应用程序安全带来了重大风险。这就是为什么了解它们的漏洞以及如何保护它们至关重要。在本文中，我们将深入探讨 API 密钥的奇妙世界，讨论为什么要保护您的 API 密钥，并研究使用 React 时保护 API 密钥的最佳方法。

什么是 API 密钥？

如果您最近注册了 API，您将获得一个 API 密钥。API 密钥可视为秘密密码，可向提供商证明您或您的应用正在尝试访问 API。虽然有些 API 是免费的，但有些 API 需要付费才能访问，而且由于大多数 API 密钥的到期日期为零，因此不担心密钥的安全性是一件令人恐惧的事情。

为什么 API 密钥需要保护？

保护 API 密钥对于保证应用程序的安全性和完整性至关重要。以下是您应该保护 API 密钥的一些原因：

防止未经授权的 API 请求。如果有人获取了您的 API 密钥，他们可以使用它发出未经授权的请求，这可能会造成严重后果，尤其是当您的 API 包含敏感数据时。
财务不安全。某些 API 需要财务成本。如果有人获得您的 API 密钥的访问权限并超出您的预算要求，您可能会面临巨额账单，这可能会让您损失惨重并危及您的财务稳定。
数据盗窃、操纵或删除。如果恶意人员获得您的 API 密钥的访问权限，他们可能会窃取、操纵、删除或使用您的数据来达到他们的目的。

在 React 应用程序中隐藏 API 密钥的最佳实践

现在您了解了为什么必须保护 API 密钥，让我们看一些隐藏 API 密钥的方法以及如何将它们集成到您的 React 应用程序中。

环境变量

环境变量( env) 用于存储有关程序运行环境的信息。它使您能够隐藏应用程序代码中的敏感数据，例如 API 密钥、令牌、密码以及您希望对公众隐藏的任何其他数据。

您可以在 React 应用程序中使用最流行的软件包之一env来隐藏敏感数据，该dotenv软件包就是。开始使用：

导航到您的 React 应用程序目录并运行以下命令。

npm install dotenv --save

src在项目根目录的文件夹外部，创建一个名为的新文件.env。

在您的文件中.env，按照以下格式添加 API 密钥及其对应的值：

// for CRA applications
REACT_APP_API_KEY = A1234567890B0987654321C ------ correct

// for Vite applications
VITE_SOME_KEY = 12345GATGAT34562CDRSCEEG3T  ------ correct

保存.env文件并避免公开共享或提交到版本控制。
您现在可以使用该env对象来访问 React 应用程序中的环境变量。

// for CRA applications
'X-RapidAPI-Key':process.env.REACT_APP_API_KEY
// for Vite  applications
'X-RapidAPI-Key':import.meta.env.VITE_SOME_KEY

重新启动应用程序以使更改生效。
但是，在本地计算机上运行项目只是开始。有时，您可能需要将代码上传到 GitHub，这可能会暴露您的.env文件。那么该怎么办呢？您可以考虑使用该.gitignore文件来隐藏它。
文件.gitignore
该.gitignore文件是一个文本文件，用于指示 Git 在将文件推送到存储库时忽略尚未添加到存储库的文件。为此，请在暂存提交并将代码推送到 GitHub 之前将添加到文件.env中。

.gitignore

// .gitignore
# dependencies
/node_modules
/.pnp
.pnp.js

# api keys
.env

请记住，无论何时您决定使用任何托管平台（如Vercel或Netlify ）托管您的项目，您都需要在项目设置中提供您的环境变量，然后重新部署您的应用程序以查看更改。

后端代理服务器

虽然环境变量是保护 API 密钥的绝佳方式，但请记住，它们仍然可能被盗用。如果攻击者在浏览器中检查您的捆绑代码，您的密钥仍然可能被盗用。那么，您能做什么呢？使用后端代理服务器。

后端代理服务器充当客户端应用程序和服务器应用程序之间的中介。前端不会直接从前端访问 API，而是向后端代理服务器发送请求；然后代理服务器检索 API 密钥并向 API 发出请求。收到响应后，它会在将响应返回前端之前删除 API 密钥。这样，您的 API 密钥就永远不会出现在您的前端代码中，而且没有人能够通过检查您的代码来窃取您的 API 密钥。太棒了！现在让我们看看如何做到这一点：

安装必要的软件包。首先，你需要安装一些软件包，比如Express、CORS、Axios和Nodemon。为此，导航到包含你的 React 项目的目录并执行以下命令：

npm install express cors axios nodemon

创建后端服务器文件。在项目根目录中的文件夹外部src，创建一个 JavaScript 文件，其中包含您对 API 的所有请求。

初始化依赖项并设置端点。在后端服务器文件中，初始化已安装的依赖项并设置端点，该端点将向GET第三方 API 发出请求并在侦听的端口上返回响应数据。以下是示例代码片段：

// defining the server port
const port = 5000

// initializing installed dependencies
const express = require('express')
require('dotenv').config()
const axios = require('axios')
const app = express()
const cors = require('cors')
app.use(cors())

// listening for port 5000
app.listen(5000, ()=> console.log(`Server is running on ${port}` ))

// API request
app.get('/', (req,res)=>{    
    const options = {
        method: 'GET',
        url: 'https://wft-geo-db.p.rapidapi.com/v1/geo/adminDivisions',
        headers: {
            'X-RapidAPI-Key':process.env.REACT_APP_API_KEY,
            'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
        }
   };
   
    axios.request(options).then(function (response) {
        res.json(response.data);
    }).catch(function (error) {
        console.error(error);
    });
}

package.json在将运行后端代理服务器的文件中添加一个脚本标签。

通过运行以下命令启动后端服务器，然后在本例中导航到localhost:5000。

npm run start:backend

http://localhost:5000/从前端向后端服务器 ( ) 发出请求，而不是直接向 API 端点发出请求。以下是一个例子：

import axios from "axios";
import {useState, useEffect} from "react"

function App() {

  const [data, setData] = useState(null)

  useEffect(()=>{
    const options = {
      method: 'GET',
      url: "http://localhost:5000",
    }
    axios.request(options)
    .then(function (response) {
        setData(response.data.data)
    })
    .catch(function (error) {
        console.error(error);
    })  
  }, [])

  console.log(data)

  return (
    <main className="App">
    <h1>How to Create a Backend Proxy Server for Your API Keys</h1>
     {data && data.map((result)=>(
      <section key ={result.id}>
        <h4>Name:{result.name}</h4>
        <p>Population:{result.population}</p>
        <p>Region:{result.region}</p>
        <p>Latitude:{result.latitude}</p>
        <p>Longitude:{result.longitude}</p>
      </section>
    ))}
    </main>
  )
}
export default App;

好的，就是这样！通过遵循这些步骤，您将能够使用 React 应用程序中的后端代理服务器隐藏 API 密钥。

密钥管理服务

尽管环境变量和后端代理服务器允许您安全地在线隐藏 API 密钥，但您仍然不是完全安全的。您身边可能有朋友或敌人可以访问您的计算机并窃取您的 API 密钥。这就是数据加密至关重要的原因。

使用密钥管理服务提供商，您可以加密、使用和管理 API 密钥。您可以将大量密钥管理服务集成到 React 应用程序中，但为了简单起见，我仅提及其中几个：

AWS Secrets ManagerAWS Secrets Manager是 Amazon Web Services 提供的一项机密管理服务。它使您能够通过对 AWS Secret Manager 服务的 API 调用以编程方式存储和检索机密，例如数据库凭证、API 密钥和其他敏感信息。有大量资源可以帮助您立即开始使用。
Google Cloud Secret ManagerGoogle Cloud Secret Manager是 Google Cloud Platform 提供并全面管理的密钥管理服务。它能够存储、管理和访问敏感数据，例如 API 密钥、密码和证书。最好的部分是它与 Google 的后端即服务功能无缝集成，使其成为任何寻求简单解决方案的开发人员的绝佳选择。
Azure Key VaultAzure Key Vault是 Microsoft Azure 提供的基于云的服务，可让您无缝存储和管理各种机密，包括密码、API 密钥、数据库连接字符串以及您不想在应用程序代码中直接公开的其他敏感数据。

还有更多密钥管理服务可供选择，您可以选择使用上述任何一项。但如果您想使用未提及的服务，那也是完全没问题的。