[TIL]리액트 네이티브에서 환경변수 관리하기
안전한 방법은 없다
결론부터 말하자면, 리액트 네이티브에서 환경변수를 안전하게 관리하는 방법은 없다.
환경변수(env)란?
환경 변수는 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는, 동적인 값들의 모임이다.
다시 말해 프로그램이 돌아가는 데 필요한 변수들이다.
프로젝트를 하면서 유료 서드파티 sdk를 이용하는 경우에 일반적으로 보안을 위한 app key를 제공받게 되는데, sdk 의 기능을 이용하려면 이 앱키가 어딘가에 등록되어있어야 계정이 인증되고 앱에서 기능을 정상적으로 사용할 수 있다.
그런데 앱키는 노출하면 안되는 중요한 키이다. 이 키가 있으면 누구나 우리 앱의 서드파티 대시보드를 조회하고, 기능 수정 및 삭제가 가능하기 때문에 보안에 신경을 써야 한다. 우리 앱 코드에 반드시 들어가있어야 하지만, 절대 노출되어서는 안된다. 그러므로 값 자체는 가리고 우회적으로 변수만 임포트해서 사용해야 한다.
Next.js 로 서버사이드 렌더링 프론트엔드 프로젝트를 할 때에는 dotenv 라이브러리를 이용하여 앱키를 .env 파일에 환경변수로 등록해 전역적으로 사용하고, .gitignore 에 .env 파일을 등록하여 관리되는 파일에서 제외하였다.
이렇게 하면 퍼블릭 레포지토리를 사용하면서도 앱키는 안전하게 보관할 수 있다.
그런데 리액트 네이티브(앱 코드)는 서버 사이드와 달리 환경변수를 아무리 감추더라도 노출될 우려가 있다고 한다.
https://reactnative.dev/docs/security이전에 간단한 기능을 가진 작은 앱을 만들 때 react-native-dotenv 를 사용해 환경변수를 관리한 적이 있었다. 그때는 보안이 필요한 변수는 아니었다. 이번에 채팅앱 토이 프로젝트를 시작하면서 PUSHER 라는 saas를 이용하려고 앱키를 발급받았는데, 환경변수로 관리하기 전에 확실히 짚고 넘어가고 싶어서 찾아보았더니 react-native-dotenv 나 react-native-config 라이브러리로 환경변수를 관리하는 것이 편리하기는 하지만 보안에 취약하다는 것을 알게 되었다.
굳이 앱 프로젝트 내에 앱키를 두고 싶으면 오케스트레이션 레이어(?)라는 서버리스 함수를 만들라는데 이건 뭔지 잘 모르겠다.
결론은, 리액트네이티브에서 환경변수를 관리려면 react-native-dotenv 나 react-native-config 라이브러리를 사용하면 되지만, 보안이 중요한 키는 따로 관리해야 한다. API 를 통해 서버에서 받아오도록 처리하는 것이 가장 안전하다.
nacho-pusher : https://github.com/newnorm/nacho-pusher
nacho-server: https://github.com/newnorm/nacho-server
Photo by janan lagerwall on Unsplash
TMI.
도대체 왜 앱은 보안이 약하다는 걸까? 왜 서버는 보안이 강할까?
... 나는 앱개발자니까 서버에 대해서는 관심을 끄는 게 좋을까?
