Create React App에서 API 키를 숨기려면 어떻게 해야 하나요?

Create React App에서 API 키를 숨기려면 어떻게 해야 하나요?

Create React App에서 날씨 앱을 만들었습니다.create-react-appGit Hub는 API를 사용합니다.

현재 키는 App.js에 있습니다.

const API_KEY = "123456";

와 gitignore를 사용하는 가 유지됩니다.env파일, 안전하지 않습니다.Claudiu Creanga가 지적한 바와 같이 React 환경변수는 빌드에 포함되어 있으며 공개적으로 액세스할 수 있습니다.

API 키 또는 비밀 정보(예: Node.js 또는 Express.js)만 백엔드에 저장해야 합니다.클라이언트가 백엔드 API에 요청을 보내도록 할 수 있습니다.그러면 API 키를 사용하여 실제 API를 호출하여 데이터를 클라이언트에 반송할 수 있습니다.

부인

경고: 개인 API 키 등의 비밀 정보를 React 앱에 저장하지 마십시오!

환경 변수가 빌드에 포함되어 있어 앱의 파일을 검사하여 누구나 볼 수 있습니다.

다음 답변은 환경 변수에 비기밀 데이터를 저장하는 올바른 방법을 제공합니다.개발자 도구를 통해 비밀 데이터에 액세스할 수 있으므로 환경 변수로 저장하는 것이 안전하지 않습니다.비밀 데이터를 저장하고 싶다면 백엔드에 저장하는 것이 좋습니다.클라이언트가 비밀 데이터에 액세스하려면 서버에 요청해야 합니다(비밀 데이터 저장에 대한 자세한 내용은 Antonia의 답변을 참조하십시오).

create-react-app에는 이를 지원하는 기능이 포함되어 있습니다.조지 카라메타스의 통찰에 감사드립니다이 기능에 액세스 하려면 , 다음의 조작을 실시할 필요가 있습니다.

. '1'이라는 ..env이치노

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

2. 부부.env, 프리펜드REACT_APP_API api api api 、 API api api api 。

create-react-app은 「」를 사용합니다.REACT_APP_이러한 변수를 식별합니다.키 키 이름을 사용합니다.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.gitignorefilename을 클릭합니다.

한 후 하세요..gitignore git status .env기트

// .gitignore

# api keys
.env       <-- add this line

# dependencies
/node_modules
...

4.하기 4. API 키에서 process.env★★★★★★ 。

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

경고

튜토리얼 애플리케이션을 만들지 않는 한 클라이언트 측 소스 코드(예: React 앱)에 API 키 등의 비밀을 넣지 마십시오.Create React App 설명서에서 다음 내용을 참조하십시오.

경고: 개인 API 키 등의 비밀 정보를 React 앱에 저장하지 마십시오!

환경 변수가 빌드에 포함되어 있어 앱의 파일을 검사하여 누구나 볼 수 있습니다.

서 .env 파일을 합니다.react-scripts start (오류)yarn start소스 폴더 외부에 있습니다.

그 후 추가한다.

REACT_APP_WEATHER_API_KEY=123456

커밋하기 전에 이 .env 파일을 제외해야 합니다.따라서 .gitignore 파일을 찾아서 .env를 추가합니다.

은 '아까보다'로 시작해야 .REACT_APP_실수로 비밀을 몸에 포함시키지 않도록 보호해 줍니다.

.gitignore 파일에 .env를 추가하는 것을 잊지 마십시오.

---

코드에서 환경변수를 사용하려면:

const API_KEY = process.env.REACT_APP_WEATHER_API_KEY;

를 에한 후 는 환경변수를 읽어야 ..env서버를 재기동합니다.

React 문서에서 다음 내용을 참조하십시오.

경고: 개인 API 키 등의 비밀 정보를 React 앱에 저장하지 마십시오!

환경 변수가 빌드에 포함되어 있어 앱의 파일을 검사하여 누구나 볼 수 있습니다.

이 문제는 안토니아 블레어에 의해 이미 답변이 되었지만, 몇 가지 기본적인 규칙에 대해 좀 더 자세히 설명하고자 합니다.

1: 대부분의 답변은 .env 파일을 사용하는 것을 제안하고 있습니다..env는 보안 계층을 추가하기 위한 것이 아니라는 것을 다시 한 번 분명히 하고 싶습니다.이름 그대로 .env는 빌드 시 환경을 설정하기 위한 것입니다.예를 들어 빌드 시 일부 글로벌 값을 설정하고 실행 시 응용 프로그램에서 이러한 값에 액세스할 수 있습니다.

2: 리액트는 클라이언트브라우저에서 JavaScript 코드를 실행하는 프레임워크입니다.따라서 클라이언트는 JavaScript(React) 코드에 완전히 액세스할 수 있습니다.클라이언트 측에서는 안전한 것은 없습니다.따라서 모든 코드를 클라이언트 측에 보관하는 것만으로 클라이언트로부터 보호하거나 숨길 생각은 하지 마십시오.클라이언트로부터 무언가를 숨길 필요가 있는 경우는, 서버측에서 통합할 필요가 있는 것이 있습니다.서버측 코드만 클라이언트측에서 보호됩니다.

3: 보안 키를 서버 측에 보관합니다.

보안 키의 목적이 클라이언트를 위한 쿠키를 만드는 것이라고 가정하면, 클라이언트는 보안 키가 아닌 쿠키를 필요로 합니다.따라서 클라이언트 측에서 서버에 쿠키를 요청하면 서버는 보안 키를 사용하여 쿠키를 만들고 쿠키를 클라이언트에 반환합니다.결국 고객은 쿠키를 먹으려고 여기 온 것이지 쿠키를 어떻게 만드는지 모른단 말인가?

4: 즉, 기밀 데이터가 있는 곳이라면 어디에서나 서버에 데이터를 보관하는 것이 원칙입니다.서버는 이 기밀 데이터를 사용하고 결과 데이터를 클라이언트에 공개합니다.

유저로부터 코딩의 예를 요구받았기 때문에, 상기의 방법으로 대응한 리얼 타임 시나리오를 작성했습니다.

사용 사례는 다음과 같습니다.

1. 저는 퍼블릭이 아닌 API에 퍼블릭 폼을 제출하는 리액트 앱을 가지고 있습니다.

2. 비공개 API는 Harvest API가 호스팅하는 것입니다.

   https://www.greenhouse.io/
   

3. 이 API를 사용하여 요청을 작성하려면 인증 헤더가 필요합니다.API 소유자에게 가입하여 API에 액세스하기 위해 요청에 사용할 수 있는 비밀 토큰을 받았습니다.

4. 물론 토큰을 개인적으로 보관하고 일반 사용자에게 공개하지 않고 싶다.

5. API와 통신하기 위해 Axios 클라이언트를 사용했습니다.

위의 시나리오를 실행하는 방법에는 다음 두 가지가 있습니다.

잘못된 방법

React 어플리케이션에서 API에 직접 요청을 하고 있습니다.

아래가 내가 치고 싶은 API 엔드포인트라고 합시다.

apiURL = https://boardsapi.greenhouse.io/v1/boards/xyz/jobs/" + jobId + ""

위의 API 엔드포인트에는 인증 헤더가 필요하며, 여기에 비밀 토큰을 제공합니다.

const config = {
  headers: {
    "Authorization": "Basic ####MySecretCode#####",
  } };

이 요청과 함께 폼 데이터를 게시한다고 가정합니다.

let formData = MyFormData

아래와 같이 Axios 클라이언트를 사용하여 요청을 보낼 수 있습니다.

let result = await axios.post(apiURL, formData, config);

위의 기술을 사용하여 하베스트 API에 폼 데이터를 올릴 수 있습니다.

하지만 말했듯이, 이 API로 통신하는 것은 잘못된 방법입니다.고객 측에서 비밀 토큰을 공개했기 때문입니다.

올바른 방법

Node.js에 API를 구축하여 공개 호스팅하였습니다.

일부 폼 데이터를 Harvest API에 게시한다고 가정합니다.

let formData = MyFormData

클라이언트 어플리케이션에서 직접 Harvest API를 클릭하지는 않습니다.대신 미들웨어 API에서 이를 처리하기 위해 엔드포인트와 노출을 했습니다.

예를 들어, 아래가 내가 치고 싶은 미들웨어 API의 엔드포인트 URL이라고 합시다.

apiURL = https://proxy-server/apply

위의 API 엔드포인트에는 인가 헤더가 필요하지 않습니다.그래서 아래와 같이 Axios 클라이언트를 사용하여 투고 요청을 보낼 수 있습니다.

let result = await axios.post(apiURL, formData);

차이는 분명하다.이번 요청에서는 시크릿 토큰을 제공하지 않았습니다.왜냐하면 이것은 하베스트 API에 대한 직접적인 요청이 아니라 제가 개발하고 호스팅하는 미들웨어 API에 대한 요청이기 때문입니다.

이 요청을 미들웨어 API로 수신하여 비밀 토큰을 추가하여 Harvest API로 전송합니다.Harvest API로부터의 응답은 middle_ware API로 반환되어 React 클라이언트응용 프로그램으로 전송됩니다.

시크릿 토큰은 서버측 API에 저장되어 외부 사용자로부터 보호됩니다.

다음과 같은 이점이 있습니다.

루트 폴더에 .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

그런 다음 앱 js 파일의 루트로 돌아갔습니다.저는 그게 index.js였습니다.다른 경우에는 App.js일 수 있습니다.

거기서 const API_KEY를 작성했습니다.

 const API_KEY =`${process.env.REACT_APP_API_KEY_YT}`

콘솔 로그로 동작하고 있는지 확인했습니다.

 console.log("API", API_KEY)

는 ★★★★★★★★★★★★★★를 받고 있었다.undefined.

서버(+)Ctrl를 정지하고 서버를 재기동했습니다.

그 후에 나는 열쇠를 볼 수 있었다.

다음은 환경변수에 API 키를 숨기려고 해도 코드에서 API 키를 찾는 예입니다.

나는 뉴스를 이용하여 매우 간단한 앱을 만들었다.API, API 키 등록이 필요했습니다.여기 뉴스에 대한 나의 소감이 있다.API 키를 환경변수로 사용하는 API 엔드포인트.

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 dev 툴로 네트워크 요청을 확인해보니 API 키의 실제 값을 알 수 있습니다.API 키를 환경변수로 저장하더라도 클라이언트 상에서 API 키를 찾을 수 있는 방법을 사람들이 알 수 있도록 도와줬으면 합니다.

어떻게. API 키를 숨길 수 있습니다.

서버 측 로직에서 HTTP 요청을 하면 .env 파일에서 API 키를 안전하게 숨길 수 있습니다.다음 예제에서는 /top-headlines/:searchTerm에 대한 엔포인트를 만들었습니다.해당 엔드포인트에 대한 요청이 수신되면 .env 파일에 저장된 "NEWS_API_KEY" 환경변수를 사용하여 Axios 요청을 뉴스 API로 보냅니다.

route.get("/top-headlines/:searchTerm", async (req, res) => {
      const { searchTerm } = req.params;

      try {
        const articlesResponse = await axios.get(
          `https://newsapi.org/v2/top-headlines?q=${searchTerm}&apiKey=${process.env.NEWS_API_KEY}`
        );

        const articlesData = articlesResponse.data;

        res.send(articlesData);
      } catch (error) {
        console.log(error);
      }
    });

로컬 개발 목적으로 API 키를 사용하는 경우 .env.development 파일에 저장하면 Git은 이를 무시합니다.빌드 프로세스에서는 .env 파일의 자격 정보가 선택되고 실제 가동 중인 데이터가 노출됩니다.

자세한 내용은 사용할 수 있는 다른 .env 파일은 무엇입니까?를 참조하십시오.

주의하세요!React 클라이언트에 credential을 넣으면 gitignore 및 .env 파일을 사용하더라도 안전하지 않습니다.여전히 그들은 안전하지 않다.

API 키 또는 비밀 정보(Node.js 또는 Express.js 등)만 백엔드에 저장해야 합니다.프록시를 사용하여 프런트 엔드에서 백엔드로 요청을 전송하면 백엔드에서 프런트 엔드로 데이터를 가져오는 요청을 생성합니다.

실제 가동 중인 경우 프런트엔드(React)에 환경변수를 직접 사용할 수 없습니다.실제 가동 중인 환경 변수에 액세스하려면 create-react-app, Docker 및 Nginx를 사용하여 런타임 환경 변수를 구현하는 방법에 대한 지침을 따라야 합니다.

시큐어 키/시크릿은, 클라이언트 측에 송신하지 말아 주세요.예를 들어, S3에서 앱을 통해 클라이언트 머신에 파일을 다운로드(브라우저에서 실행)하려고 합니다.

• 서버에 콜을 발신하여 에페메랄토큰을 취득한다(시간이 지남에 따라 기한이 만료된다).

• 서버(비밀과 모든 것을 가지고 있는 서버)가 토큰을 만들어 반환한다.

• 클라이언트는 토큰을 사용하여 S3에 액세스합니다.

토큰 자체는 비밀이 아니며 한번 유효기간이 지나면 무용지물이다.

.env 파일을 작성하면 이전 답변에서 설명한 바와 같이 도움이 됩니다.하지만 여기서 한 가지 주의할 점은 다음과 같습니다.

사용하시는 경우API_KEY로서 URL에서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}`)

언급URL : https://stackoverflow.com/questions/48699820/how-do-i-hide-an-api-key-in-create-react-app