오늘은 서류 합격을 받은 회사의 면접을 보러 가는 날이었다. 면접이 진행되는 동안 여러 질문에 답변을 하다가 면접관님께서 갑자기 이렇게 물어보셨다.
"왜 Firebase API Key가 그대로 노출되게 했나요?"
이상했다. 나는 분명 .env 파일에 API Key를 저장하고, gitignore 설정도 잘 해두었는데... 노출이 되다니? 당황한 나머지 다시 질문을 드렸더니, 네트워크 창에서 API Key가 그대로 보이고 있다는 것이었다.
면접관님께서는 이렇게 키가 노출되면 해커들이 이를 탈취하여 내 계정으로 과금할 수도 있다는 점을 알려주셨다. 면접이 끝나자마자 급하게 카페로 가서 원인을 분석하기 시작했다.
💥 문제 분석: Firebase API Key 노출 원인
구글링을 하면서 관련 블로그 글을 찾아보았지만, 대부분 API Key를 숨기는 방법이 아니라 보안 규칙을 강화하는 방법만 제시하고 있었다. 예를 들면 HTTP 리퍼러 설정이나 Firestore 규칙을 수정하는 방식이었다.
하지만 내가 원하는 해결책은 API Key 자체가 아예 노출되지 않도록 하는 것이었다. 그래서 어떻게 해결할 수 있을지 고민하다가 문득 이런 생각이 들었다.
기존 코드 구조:
모든 API 함수가 Next.js 서버를 거치도록 하면 되지 않을까?
🛠️ 해결 방법: Firebase 직접 접근을 Next.js API로 대체하기
대부분의 API 요청은 Next.js의 라우터를 통해 처리하고 있었지만, updateTodo 함수만 클라이언트에서 Firebase에 직접 접근하고 있었다. 여기서 문제가 발생한 것이었다.
그래서 updateTodo 함수를 수정하여 기존에 만들어둔 Next.js API를 거치도록 변경해 보았다.
🔴 기존 코드 (Firebase에 직접 접근)
이렇게 직접 Firebase를 호출했기 때문에 브라우저의 네트워크 탭에서 API Key가 그대로 노출되고 있었다.
🟢 수정 후 코드 (Next.js API를 통해 접근)
기존에 만들어둔 api 함수로 교체하면서 이제 클라이언트는 API 요청을 Next.js 서버로 보내고, 서버에서 Firebase와 통신하도록 만들었다.
✅ 결과적으로 네트워크 창에서 API Key가 노출되지 않게 되었다!
사실 Firebase를 처음 사용할 때는 "굳이 Next.js API를 거칠 필요가 있을까? 클라이언트에서 바로 호출하면 더 간단한데?" 라고 생각했었다. 하지만 이번 경험을 통해 서버를 거치는 것이 보안 측면에서 얼마나 중요한지 깨닫게 되었다.
면접관님들의 피드백 덕분에 보안 문제를 빠르게 수정할 수 있었고, 덤으로 Firebase를 좀 더 안전하게 다루는 방법도 배울 수 있었다. 앞으로도 보안 관련 부분은 더욱 신경 써야겠다는 다짐을 했다ㅎㅎ
