React JS API Key(키) 숨기기

1. 문제 인식

앞선 포스트에서 create-react-app으로 미세먼지 정보 OpenAPI를 받아오는 React Application을 제작하는 과정을 소개했었다. 

이러한 API에서 데이터를 받아오는 기능을 구현하는 React Application을 제작할 때는 API Key가 노출되지 않도록 하는 것이 중요하다. GitHub public repository에 올리거나 배포할 경우 API Key가 다른 사용자에 의해 악용될 우려가 있기 때문이다. 

실제로 필자도 아무 생각 없이 GitHub Public Repositiry에 API Key가 포함된 코드를 올렸다가 바로 이런 이메일을 받았다.

 

 

GitGuardian은 GitHub에서 다체적으로 운영하는 서비스도 아니고 가입한 적도 없는데.. 뭐지 GItHub 사용자들의 commit을 다 지켜보나..?

따라서 API 키를 숨길 필요가 있고, 아래와 같이 진행하면 된다. 

 

2. 적용 방법

2-1. .env 파일 생성

create-react-app으로 생성된 디렉토리 안(즉 src 폴더 밖)에 .env 파일을 생성하고 그 안에 아래와 같이 입력한다. 

 

 

REACT_APP_API_KEY=발급받은 API 키

무조건 REACT_APP_으로 시작해야 하며, 

REACT_APP_GOOGLE_KEY=12345678
REACT_APP_WEATHER_KEY=87654321

위와 같이 여러 API Key를 저장할 수 있다. 

 

2-2. gitignore에 .env 파일 추가

이후 .gitignore 파일에 .env 파일을 추가한다. 

 

 

.gitignore 파일에 .env 추가

 

3. API Key 접근 예시

이후 JS 파일 내에서 API Key를 사용하고자 할 때는 아래 예시와 같이 접근할 수 있다. 

const API_KEY = process.env.REACT_APP_API_KEY;
const url = `...returnType=json&ServiceKey=${API_KEY}&ver=1.3`;