프론트엔드 첫걸음

Firebase 프로젝트에서 API 키를 github에 노출해버렸을 때 해결방법 본문

개발 공부/웹 개발

Firebase 프로젝트에서 API 키를 github에 노출해버렸을 때 해결방법

차정 2024. 9. 30. 22:30

[문제상황]

Google API key가 깃허브에 노출되었다고 메일이 왔다.

API 코드를 git에 그대로 노출시키는 실수를 했다.
git에 코드를 push하자마자 경고 메일이 날라왔다.
깃헙 어느주소 어느경로의 firebase.config.js파일 안에 키가 그대로 노출되어 있다고....

We have detected a publicly accessible Google API key associated with the following Google Cloud Platform project:
Project [프로젝트명] (id: [프로젝트 아이디]) with API key [API키]
The key was found at the following URL: https://github.com/깃헙주소/client/src/firebaseConfig.js

 

 

[해결방법]

1. API키 재생성

이미 코드가 git에 올라갔으면 API키를 바꾸거나 bfg-repo-cleaner로 git에 올라간 민감한 정보를 삭제해야한다.
나는 API키를 바꾸는 방법을 선택했다.
API 키 재생성하고, 재생성된 API 키를 env파일에서 변수로 관리하도록 하기
( 만약 vite프로젝트라면, env파일 접두사 주의하기 https://ko.vitejs.dev/guide/env-and-mode)

2. 웹사이트 제한사항 추가

웹사이트 제한사항에 API에 접근할 수 있는 사이트주소를 명시하여,
API 키가 노출되더라도 이를 악용할 수 있는 환경을 제한해야한다.
로컬환경 실행할 localhost와 api 받아오는 도메인을 웹사이트 제한사항에 추가한다.

 

 


* 참고 

[bfg-repo-cleaner 로 git repository 에 올린 민감한 정보 삭제하기]
https://www.lesstif.com/gitbook/bfg-repo-cleaner-git-repository-129007840.html

 

bfg-repo-cleaner 로 git repository 에 올린 민감한 정보 삭제하기

 

www.lesstif.com



[API 키를 사용하는 이유 및 조건]
https://cloud.google.com/endpoints/docs/openapi/when-why-api-key?hl=ko

 

API 키를 사용하는 이유 및 조건  |  Cloud Endpoints with OpenAPI  |  Google Cloud

의견 보내기 API 키를 사용하는 이유 및 조건 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 이 페이지에서는 API 키와 인증의 사용 방법 및 차이점, API 키 사

cloud.google.com