KakaoMap API KEY 관리

프로젝트에서 카카오맵에 api key를 관리할때 보안처리를 어떻게 해줘야하나 고민이 많았다.

처음에는 index.html파일안에 키 자체를 넣어서 보관을 했었는데 

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=카카오맵api키" ></script>

이렇게 하면 api보안키인데 위에 코드처럼 그대로 노출이 되다보니 보안적으로 안전하지 않고 실제로 권장되는 로직이 아니라는걸 알게되었다.

 

카카오맵 API 키를 보안 처리하려면 다음과 같은 방법을 알게되었다.

1. 서버 측 엔드포인트 사용: 카카오맵 API 키를 직접 클라이언트 측에서 사용하지 말고, 서버 측 엔드포인트를 통해 카카오맵 API를 호출하는 방법을 사용합니다. 클라이언트는 서버에 요청을 보내고, 서버에서 카카오맵 API를 호출하여 응답을 클라이언트로 전달합니다. 이렇게 하면 API 키가 클라이언트에 노출되지 않으므로 보안이 강화됩니다.
2. 서버 측 환경 변수: 서버 측에 API 키를 환경 변수로 설정하여 사용합니다. 서버에서 카카오맵 API를 호출할 때, 환경 변수를 사용하여 API 키를 전달합니다. 이 방법을 사용하면 API 키가 서버의 코드나 설정 파일에 직접 노출되지 않으므로 보안이 강화됩니다.
3. 암호화: API 키를 암호화하여 저장하고, 필요할 때만 암호화된 키를 복호화하여 사용합니다. 이 방법을 사용하면 API 키가 노출되어도 암호화되어 있어서 직접 사용할 수 없으므로 보안이 강화됩니다.
4. 접근 제어: 카카오맵 API 키를 사용하는 엔드포인트에 대해 접근 제어를 설정합니다. 예를 들어, IP 기반의 접근 제어나 API 키를 사용하는 클라이언트의 도메인 제한 등을 설정하여 무단 사용을 방지합니다.

클라이언트에서 .env파일을 사용해서 이용하려다가 환경변수 처리를 하게되면 애플리케이션의 번들 파일을 분석하거나 개발자 도구를 통해 환경 변수를 확인할 수 있다고해서 위 방법중 서버를통해서 해야하나 했지만 카카오 로그인처럼 개인정보를 보관하는게 아닌 지도를 사용하는것 뿐이여서 카카오맵은 서버이용이 아닌 클라이언트에서 환경변수 처리로 하는걸로 결정했다.

 

환경변수 처리 방법 

 

1. 프로젝트 루트 디렉토리에 .env파일을 생성

2. .env파일에 변수를 설정

3. react컴포넌트에서 API키를 사용 할 때 환경변수를 참조

const apiKey = process.env.REACT_APP_KAKAO_API_KEY;