在 Create-React-App 中隐藏密钥

2020-06-15 08:00:00 · 飞浪

介绍您是否曾想过，当您在Github等地方公开代码时，如何避免发布您的密钥？本指南重点介绍如何帮助您保护create-react-app中的密钥。为了实现这一点，您将设置一个应用程序，

介绍

您是否曾想过，当您在 Github 等地方公开代码时，如何避免发布您的密钥？本指南重点介绍如何帮助您保护 create-react-app 中的密钥。为了实现这一点，您将设置一个应用程序，该应用程序向 Newsapi.org 发出 API 调用，并保护从 API 提供商处获得的密钥。这些功能仅适用于 react-scripts@0.5.0 及更高版本。

设置 Create-React-App

第一步是设置 React 应用。打开终端/shell 并运行以下命令来设置create -react-app项目。

      npx create-react-app react-secret-keys

在create-react-app完成安装后，在终端中输入此命令：

      cd react-secret-keys
yarn start
    

create-react-app的开发服务器应在 localhost:3000 上运行。打开浏览器，您应该会看到 React Logo。转到newsapi.org并注册以获取 API 密钥。

不安全的方式

下面的代码片段展示了如何使用获得的密钥进行 API 调用，而无需考虑安全性。如果您将此密钥发布到 Github，则任何查看您代码的人都可以访问您的密钥。这可不妙！

      const API_URL = "https://newsapi.org/v2/everything?q=usa&apiKey=
OW09823D03ASE48F34RUNF83"; // <- API_KEY inlined in the url

function App(){    
     const [newsList, setNewsList] = useState([]);    
    useEffect(() => {          
      getNews(); 
}, []);   
const getNews = () => {      
fetch(API_URL)          
.then(response => response.json())              
.then(data => setNewsList([...data])
;} 
return (  
 <div>    
      { newsList.map( item => <p key={Math.random()}>{item.headline.title}</p> )} 
 </div>)
    

安全方法

为了保护您从 Newsapi 获得的密钥，请在项目根目录创建一个 .env 文件。您的项目结构应类似于以下内容：

      -react-secret-keys

 -node_modules

 - public 

 - src 

 - .env  ←Right here

 - .gitignore

 - package-lock.json

 - package.json

添加 API 密钥

到 .env 文件create-react-app自动读取以REACT_APP开头的键并在process.env上定义它们（create-react-app在构建时嵌入键）。要添加您的API_KEY，只需在其前面添加REACT_APP并将其添加到您的 .env 文件中。如果开发服务器正在运行，则必须重新启动它（在运行开发服务器的终端中使用 Ctrl+c 或 Cmd+c，然后再次输入命令yarn start）。

将您的密钥添加到.env文件不会阻止您的密钥在生产中公开。create-react-app文档明确说明了这一点。

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

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

解决此问题的一种方法是让您的应用通过后端（node + express）请求数据，但这超出了本指南的范围。简而言之，避免在前端存储关键任务 API 密钥。

      // .env
REACT_APP_API_KEY = OW09823D03ASE48F34RUNF83
API_KEY  = OW09823D03ASE48F34RUNF83 // <- This would not be discoverable on process.env
    

将 .env 添加到 .gitignore

确保将 .env 文件添加到项目文件夹（react-secret-keys）根目录的 .gitignore 文件中，以确保它不会发布到远程存储库。

      // .gitignore 
  .env
    

使用密钥进行 API 调用

现在，您可以轻松地在<App/>组件中引用添加到 .env 文件中的键，而无需将其明确添加到代码中。

      import React,{useState, useEffect } from 'react';


const API_KEY = process.env.REACT_APP_API_KEY  
const API_URL = https://newsapi.org/v2/everything?q=usa&apiKey=${API_KEY}

function App(){
    const [newsList, setNewsList] = useState([]);
    useEffect(() => {
            getNews();
 }, []);
   const getNews = () => {
      fetch(API_URL)
          .then(response => response.json())    
          .then(data => setNewsList([...data]);
}
 
return (
   <div>
    { newsList.map( item => <p key={Math.random()}>{item.headline.title}</p> )}
  </div>
)
;}
    

您还可以在public/index.html中访问 .env 文件中设置的密钥。例如：

      <title>%REACT_APP_API_KEY%</title>

现在，如果您将此代码推送到 Github 存储库或任何其他远程存储库，.env 文件中的密钥将不会被推送到存储库。这样就好多了！

结论

在本指南中，您学习了如何使用create-react-app保护您的密钥。这对您的应用来说非常重要，因为稍有疏忽就可能危及您的应用。现在就这些了。注意安全！您可以通过 Twitter @DesmondNyamador 与我联系。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

在 Create-React-App 中隐藏密钥

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

const API_URL = "https://newsapi.org/v2/everything?q=usa&apiKey= OW09823D03ASE48F34RUNF83"; // <- API_KEY inlined in the url function App(){ const [newsList, setNewsList] = useState([]); useEffect(() => { getNews(); }, []); const getNews = () => { fetch(API_URL) .then(response => response.json()) .then(data => setNewsList([...data]) ;} return ( <div> { newsList.map( item => <p key={Math.random()}>{item.headline.title}</p> )} </div>)

import React,{useState, useEffect } from 'react'; const API_KEY = process.env.REACT_APP_API_KEY const API_URL = https://newsapi.org/v2/everything?q=usa&apiKey=${API_KEY} function App(){ const [newsList, setNewsList] = useState([]); useEffect(() => { getNews(); }, []); const getNews = () => { fetch(API_URL) .then(response => response.json()) .then(data => setNewsList([...data]); } return ( <div> { newsList.map( item => <p key={Math.random()}>{item.headline.title}</p> )} </div> ) ;}