트위터(React, TypeScript, Firebase, Vite)

27. Deploy - API Key Security

본시모니 2025. 4. 25. 09:22

트위터 프로젝트에서 API key를 사용자에게 제공하고 있는데

이는 Firebase를 사용자들의 브라우저를 통해 호출해야 하기 때문이다.

이것은 API key가 사용자들의 브라우저가 다운받는 코드에 포함됨을 뜻한다.

사용자들이 웹사이트에 접속할 때 다운받아지는 코드이다.

API key를 숨기는 것은 무가치한 일이다.

이 글에서는 API를 사용할 수 있는 장소가 제한되도록 만든다.

다시 말하자면, 사용자는 API key 코드를 받게 되는데

이전 글을 보면 Firestore Database와 Storage에 대한 보안을 확보했고이를 통해 API key 사용에 대한 보안 역시 확보할 수 있다.

 

 

 

 

 

nwitter-reloaded 프로젝트를 선택 후 사용자 인증 정보 탭을 클릭한 후 Browser Key를 클릭한다.

Browser Key는 Firebase에 의해 자동으로 생성된 것이다.

키 제한사항 하위에 애플리케이션 제한사항에서 "웹사이트"를 통해서만 사용하는 옵션을 선택한다.

이를 통해 다른 웹사이트를 통한 API 사용을 전부 차단할 수 있다.

ADD 버튼을 클릭해서 제외할 주소를 입력한다.

https://nwitter-reloaded.web.app/

해당 주소를 입력 후 완료 버튼을 클릭한다.

마지막으로 최종적으로 저장 버튼을 통해 지금까지 변경했던 사항들을 저장한다.

이렇게 되면 localhost를 통해서 API를 이용하려고 하면 동작이 되지 않는다.

 

https://console.cloud.google.com/apis/credentials

 

Google 클라우드 플랫폼

로그인 Google 클라우드 플랫폼으로 이동

accounts.google.com