프로젝트에서 로그인 기능은 firebase auth 의 google login 을 사용하고 있고, 데이터 CRUD는 firestore 를 사용하고 있다.
CRA 환경에서 firebase api key 값을 .env 파일에 분리하여 저장하고있다.
.env 파일이 보안을 위해 사용한다고 알려져있지만, 개발자 도구 source를 통해 충분히 노출될 가능성이 있다. env에 명시한 value가 그대로 노출되는 모습
이를 막기 위해선 백엔드의 도움이 필요하지만, SNU FESTIVAL 프로젝트는 1인 개발이므로 firebase 의 보안 기능을 최대한으로 이용해 악용을 막고자했다.
해결방법
firebase login을 승인된 도메인에서만 허용한다. 승인된 도메인 설정
firestore rule 에서 firebase auth 인증이 되어있는 사용자만 데이터를 조작할 수 있도록 설정한다. 즉 firebase 인증은 승인된 도메인에서만 가능하고, 인증이 되어야지만 데이터를 조작할 수 있기 때문에, api key가 유출되어도 데이터 접근은 막을 수 있다. firestore rule의 일부
위의 사진은 특정 collection에 대해 로그인된 유저만 새로운 문서를 만들 수 있고, 본인이 만든 문서만 read, update 할 수 있도록 설정한 예시이다.
한 걸음 더
카카오톡 로그인/공유하기 기능을 사용할 때에도 비슷한 과정을 거친다. 사이트 도메인에 등록된 곳에서만 해당 기능이 정상 작동한다. 승인된 도메인 등록
네이버 map 을 사용할 때에도 비슷한 과정을 거친다.
secret key 가 노출되더라도 승인된 도메인에서만 naver api 를 사용할 수 있다.