🔐 파이어베이스 키 공개 보안 설정 - FRONTENDBOOTCAMP-13th/JS-07-7zzang-Arcade GitHub Wiki

구분

• 날짜 : 2025.05.22
• 종류 : 설계 문제
• 중요도 : 🟡

---

1. 문제 상황

키가 노출되면 보안 공격에 취약해지기 때문에 해당 부분을 해결하고자 하였다.

따라서 데이터베이스 규칙을 인증된 사용자만 접근 가능하도록 바꾸었다.

근데 이렇게 설정하고 나니, db 반영을 안하고, 당연히 점수 입력도 불가능해졌다.

---

2. 해결 방법

현재 우리 팀 페이지에서는 로그인 과정이 없기 때문에 익명 로그인이 되도록 설정해야 한다.

따라서 파이어베이스의 프로젝트 빌드에서 Authentication을 프로젝트에 추가해야 한다.

이런 식으로 데이터가 들어온다

이렇게 추가를 해주고, 파이어베이스를 불러와서 초기화하는 firebase.ts와 스코어 컬렉션을 설정한 scoreService.ts에 인증에 대한 코드를 넣어서 수정해주면 db 연결이 잘 되고, 익명이어도 점수 저장이 가능해진다.

// firebase.ts
// 추가 !
import { getAuth, signInAnonymously } from 'firebase/auth'; 
export const auth = getAuth(app);

signInAnonymously(auth).catch();

// scoreServic.ts
// 추가 !
import { getAuth, signInAnonymously, onAuthStateChanged } from 'firebase/auth';

// 인증 객체 가져오기. 불러와서 설정에 맞게 변수를 이용하면 된다.
const auth = getAuth();

---

3. 해결 방법 개선점

이 방법은 소규모 프로젝트고 공격 위험성이 있긴 하지만 낮기 때문에 현재 단계에서 할 수 있는 방법이다. 현재 페이지를 실제로 배포하여 서비스 운영을 하게 될 경우에는 익명 인증보다 인증업체를 등록해서 로그인 받도록 하는 것이 좋다고 한다.

팀단위 프로젝트라 인증에 대해 생각하지 못했는데 초반 api 설정할 때 넣어두면 좋았을 걸 싶었다. 나중에 추가하니 인증 시 케이스를 고려하여 코드를 다시 작성해야하는 일이 … 🥲