1. 소개
최종 업데이트: 2023년 2월 23일
Firebase 리소스에 대한 무단 액세스를 방지하려면 어떻게 해야 하나요?
Firebase 앱 체크를 사용하면 수신 요청에 실제 앱에서 보낸 요청이라는 증명을 첨부하도록 요구하고 적절한 증명이 없는 트래픽을 차단하여 승인되지 않은 클라이언트가 백엔드 리소스에 액세스하지 못하도록 방지할 수 있습니다. Firebase 앱 체크는 플랫폼별 증명 제공자를 사용하여 클라이언트의 진위 여부를 확인합니다. 웹 앱의 경우 앱 체크는 reCAPTCHA v3 및 reCAPTCHA Enterprise를 증명 제공자로 지원합니다.
앱 체크는 Cloud Firestore, 실시간 데이터베이스, Cloud Functions, Identity Platform을 사용한 Firebase 인증, 자체 호스팅 백엔드에 대한 요청을 보호하는 데 사용할 수 있습니다.
빌드할 항목
이 Codelab에서는 먼저 앱 체크를 추가한 후 적용하여 채팅 애플리케이션을 보호합니다.

학습 내용
- 무단 액세스를 위해 백엔드를 모니터링하는 방법
- Firestore 및 Cloud Storage에 시행을 추가하는 방법
- 로컬 개발을 위해 디버그 토큰으로 애플리케이션을 실행하는 방법
필요한 사항
- 원하는 IDE/텍스트 편집기
- 일반적으로 Node.js와 함께 제공되는 패키지 관리자 npm
- 계정에서 작동하도록 설치 및 구성된 Firebase CLI
- 터미널/콘솔
- 원하는 브라우저(예: Chrome)
- Codelab의 샘플 코드(코드를 가져오는 방법은 Codelab의 다음 단계 참고)
2. 샘플 코드 가져오기
명령줄에서 Codelab의 GitHub 저장소를 클론합니다.
git clone https://github.com/firebase/codelab-friendlychat-web
또는 Git이 설치되어 있지 않으면 저장소를 ZIP 파일로 다운로드할 수 있습니다.
시작 앱 가져오기
IDE를 사용하여 클론된 저장소에서 📁 appcheck-start 디렉터리를 열거나 가져옵니다. 이 📁 appcheck-start 디렉터리에는 Codelab의 시작 코드가 포함되어 있으며, 이 코드는 완전히 작동하는 채팅 웹 앱입니다. 📁 appcheck 디렉터리에는 Codelab의 완성된 코드가 포함됩니다.
3. Firebase 프로젝트 만들기 및 설정
Firebase 프로젝트 만들기
- Google 계정을 사용하여 Firebase Console에 로그인합니다.
- 버튼을 클릭하여 새 프로젝트를 만든 다음 프로젝트 이름(예:
FriendlyChat)을 입력합니다.
- 계속을 클릭합니다.
- 메시지가 표시되면 Firebase 약관을 검토하고 이에 동의한 다음 계속을 클릭합니다.
- (선택사항) Firebase Console에서 AI 지원('Firebase의 Gemini'라고 함)을 사용 설정합니다.
- 이 Codelab에서는 Google 애널리틱스가 필요하지 않으므로 Google 애널리틱스 옵션을 사용 중지합니다.
- 프로젝트 만들기를 클릭하고 프로젝트가 프로비저닝될 때까지 기다린 후 계속을 클릭합니다.
Firebase 요금제 업그레이드
Firebase용 Cloud Storage를 사용하려면 Firebase 프로젝트가 사용한 만큼만 지불하는(Blaze) 요금제를 사용해야 합니다. 즉, Cloud Billing 계정에 연결되어 있어야 합니다.
- Cloud Billing 계정에는 신용카드와 같은 결제 수단이 필요합니다.
- Firebase와 Google Cloud를 처음 사용하는 경우 $300 크레딧과 무료 체험판 Cloud Billing 계정을 받을 자격이 되는지 확인하세요.
- 이벤트의 일환으로 이 Codelab을 진행하는 경우 주최자에게 사용 가능한 Cloud 크레딧이 있는지 문의하세요.
프로젝트를 Blaze 요금제로 업그레이드하려면 다음 단계를 따르세요.
- Firebase Console에서 요금제 업그레이드를 선택합니다.
- Blaze 요금제를 선택합니다. 화면에 표시된 안내에 따라 Cloud Billing 계정을 프로젝트에 연결합니다.
이 업그레이드의 일환으로 Cloud Billing 계정을 만들어야 하는 경우 업그레이드를 완료하기 위해 Firebase Console의 업그레이드 흐름으로 돌아가야 할 수 있습니다.
프로젝트에 Firebase 웹 앱 추가
- 웹 아이콘
을 클릭하여 새 Firebase 웹 앱을 만듭니다. - Friendly Chat이라는 닉네임으로 앱을 등록한 다음 또한 이 앱의 Firebase 호스팅을 설정하세요 옆의 체크박스를 선택합니다. 앱 등록을 클릭합니다.
- 다음 단계에서는 npm 및 구성 객체를 사용하여 Firebase를 설치하는 명령어가 표시됩니다. 이 객체는 Codelab의 뒷부분에서 복사하므로 지금은 Next를 누릅니다.

- 그러면 Firebase CLI를 설치하는 옵션이 표시됩니다. 아직 설치하지 않았다면 지금
npm install -g firebase-tools명령어를 사용하여 설치합니다. 다음을 클릭합니다. - 그러면 Firebase에 로그인하고 Firebase 호스팅에 배포하는 옵션이 표시됩니다.
firebase login명령어를 사용하여 Firebase에 로그인한 다음 콘솔로 이동을 클릭합니다. 이후 단계에서 Firebase 호스팅에 배포합니다.
Firebase 제품 설정
빌드할 애플리케이션에는 웹 앱에 사용할 수 있는 다음과 같은 Firebase 제품이 사용됩니다.
- Firebase 인증 - 사용자가 앱에 간편하게 로그인할 수 있음
- Cloud Firestore: 클라우드에 정형 데이터를 저장하고 데이터가 변경되면 즉시 알림을 받습니다.
- Firebase용 Cloud Storage를 사용하여 클라우드에 파일을 저장합니다.
- 애셋을 호스팅하고 제공하는 Firebase 호스팅
- Firebase 클라우드 메시징을 사용하여 푸시 알림을 전송하고 브라우저 팝업 알림을 표시합니다.
- Firebase Performance Monitoring: 앱의 사용자 성능 데이터를 수집합니다.
이러한 제품 중에는 특수 구성이 필요하거나 Firebase Console을 사용하여 사용 설정해야 하는 제품이 있습니다.
Firebase 인증에 Google 로그인 사용 설정
사용자가 Google 계정으로 웹 앱에 로그인할 수 있도록 Google 로그인 방법을 사용합니다.
Google 로그인을 사용 설정해야 합니다.
- Firebase Console의 왼쪽 패널에서 빌드 섹션을 찾습니다.
- 인증을 클릭하고 해당하는 경우 시작하기를 클릭한 다음 로그인 방법 탭을 클릭합니다(또는 여기를 클릭하여 바로 이동).
- Google 로그인 제공업체 사용 설정
- 앱의 공개용 이름을 Friendly Chat으로 설정하고 드롭다운 메뉴에서 프로젝트 지원 이메일을 선택합니다.
- 저장을 클릭합니다.

Cloud Firestore 설정
웹 앱은 Cloud Firestore를 사용하여 채팅 메시지를 저장하고 새 채팅 메시지를 수신합니다.
Firebase 프로젝트에서 Cloud Firestore를 설정하는 방법은 다음과 같습니다.
- Firebase Console의 왼쪽 패널에서 빌드를 펼친 다음 Firestore 데이터베이스를 선택합니다.
- 데이터베이스 만들기를 클릭합니다.
- 데이터베이스 ID를
(default)로 설정된 상태로 둡니다. - 데이터베이스의 위치를 선택한 후 다음을 클릭합니다.
실제 앱의 경우 사용자와 가까운 위치를 선택하는 것이 좋습니다. - 테스트 모드에서 시작을 클릭합니다. 보안 규칙에 관한 면책조항을 읽습니다.
이 Codelab의 후반부에서 데이터를 보호하는 보안 규칙을 추가합니다. 데이터베이스에 대한 보안 규칙을 추가하지 않은 채 앱을 공개적으로 배포하거나 노출하지 마세요. - 만들기를 클릭합니다.
Firebase용 Cloud Storage 설정
웹 앱은 Firebase용 Cloud Storage를 사용하여 사진을 저장, 업로드, 공유합니다.
Firebase 프로젝트에서 Firebase용 Cloud Storage를 설정하는 방법은 다음과 같습니다.
- Firebase Console의 왼쪽 패널에서 빌드를 펼친 다음 스토리지를 선택합니다.
- 시작하기를 클릭합니다.
- 기본 Storage 버킷의 위치를 선택합니다.
US-WEST1,US-CENTRAL1,US-EAST1의 버킷은 Google Cloud Storage의 '항상 무료' 등급을 활용할 수 있습니다. 다른 모든 위치의 버킷은 Google Cloud Storage 가격 책정과 사용량을 따릅니다. - 테스트 모드에서 시작을 클릭합니다. 보안 규칙에 관한 면책 조항을 읽습니다.
이 Codelab의 후반부에서 데이터를 보호하는 보안 규칙을 추가합니다. 스토리지 버킷에 대한 보안 규칙을 추가하지 않은 채 앱을 공개적으로 배포하거나 노출하지 마세요. - 만들기를 클릭합니다.
4. Firebase 구성하기
appcheck-start 디렉터리에서 다음을 호출합니다.
firebase use --add
메시지가 표시되면 프로젝트 ID를 선택한 후 Firebase 프로젝트에 별칭을 지정합니다. 이 프로젝트에서는 별칭을 default로 지정하면 됩니다. 다음으로 Firebase와 연동되도록 로컬 프로젝트를 구성해야 합니다.
- Firebase Console의 프로젝트 설정으로 이동합니다.
- '내 앱' 카드에서 구성 객체가 필요한 앱의 닉네임을 선택합니다.
- Firebase SDK 스니펫 창에서 구성을 선택합니다.
- 구성 객체 스니펫을 복사한 후
appcheck-start/hosting/src/firebase-config.js에 추가합니다. 이 Codelab의 나머지 부분에서는 변수 이름이 config라고 가정합니다.
firebase-config.js
const config = {
apiKey: "API_KEY",
authDomain: "PROJECT_ID.firebaseapp.com",
databaseURL: "https://PROJECT_ID.firebaseio.com",
projectId: "PROJECT_ID",
storageBucket: "PROJECT_ID.firebasestorage.app",
messagingSenderId: "SENDER_ID",
appId: "APP_ID",
measurementId: "G-MEASUREMENT_ID",
};
동일한 appcheck-start 디렉터리에서 다음을 호출합니다.
firebase experiments:enable webframeworks
이렇게 하면 이 프로젝트가 빌드된 웹 프레임워크 지원이 사용 설정됩니다.
이제 프로젝트를 실행하고 기본 프로젝트가 작동하는지 테스트할 준비가 되었습니다.
5. 앱 체크 없이 앱 사용해 보기
이제 앱을 구성하고 SDK를 설정했으므로 원래 설계된 대로 앱을 사용해 보세요. 먼저 모든 종속 항목을 설치합니다. 터미널에서 appcheck-start/hosting 디렉터리로 이동합니다. 해당 디렉터리 내에서 npm install를 실행합니다. 이렇게 하면 프로젝트가 작동하는 데 필요한 모든 종속 항목을 가져옵니다. 현재 상태에서 앱을 시작하려면 firebase serve를 실행하면 됩니다. 앱에서 Google 계정으로 로그인하라는 메시지가 표시되면 로그인한 다음 채팅에 채팅 메시지와 사진을 몇 개 게시해 봅니다.
이제 로컬에서 테스트했으므로 프로덕션에서 확인할 차례입니다. firebase deploy를 실행하여 웹 애플리케이션을 웹에 배포합니다. 이 부분은 reCAPTCHA Enterprise 증명 제공자에 도메인을 구성해야 하므로 실제 환경에서 앱 체크가 작동하는 방식을 보여주는 데 중요한 단계입니다.
앱에서 제공하는 기본 기능을 경험하고 계실 것입니다. 채팅 메시지 게시 및 이와 같은 앱에서만 수행해야 하는 기타 모든 작업 현재 상태의 단점은 이전 단계의 앱 구성을 가진 누구나 백엔드 리소스에 액세스할 수 있다는 것입니다. Firestore 및 Cloud Storage 시스템에서 적용하는 보안 규칙을 준수해야 하지만, 그 외에는 저장된 데이터를 쿼리, 저장, 액세스할 수 있습니다.
다음 몇 단계에서는 다음을 수행합니다.
- 앱 체크 등록
- 시정 조치 확인
- 규칙 시행 시작하기
6. 앱 체크 및 시행 사용 설정
먼저 프로젝트의 reCAPTCHA Enterprise 키를 가져와 앱 체크에 추가합니다. 먼저 Google Cloud 콘솔의 reCAPTCHA Enterprise 섹션으로 이동합니다. 프로젝트를 선택하면 reCAPTCHA Enterprise API를 사용 설정하라는 메시지가 표시됩니다. API를 사용 설정하고 완료될 때까지 몇 분 정도 기다립니다. 그런 다음 엔터프라이즈 키 옆에 있는 키 만들기를 클릭합니다. 그런 다음 이 섹션에서 표시 이름을 지정하고 웹사이트 유형 키를 선택합니다. 앱이 호스팅되는 도메인을 지정해야 합니다. Firebase 호스팅에서 호스팅할 계획이므로 일반적으로 ${YOUR_PROJECT_ID}.web.app인 기본 호스팅 이름을 사용합니다. Firebase Console의 호스팅 섹션에서 호스팅 도메인을 찾을 수 있습니다. 이 정보를 입력한 후 완료 및 키 만들기를 누릅니다.

완료되면 키 세부정보 페이지 상단에 ID가 표시됩니다.

이 ID를 클립보드에 복사합니다. 앱 체크에 사용하는 키입니다. 그런 다음 Firebase Console의 앱 체크 섹션으로 이동하여 시작하기를 클릭합니다. 그런 다음 등록을 클릭하고 reCAPTCHA Enterprise를 클릭한 후 복사한 ID를 reCAPTCHA Enterprise 사이트 키의 텍스트 상자에 붙여넣습니다. 나머지 설정은 기본값으로 둡니다. 앱 체크 페이지는 다음과 같이 표시됩니다.

확인되지 않고 시행되지 않은 요청
이제 Firebase Console에 등록된 키가 있으므로 firebase serve를 실행하여 브라우저에서 사이트를 다시 실행합니다. 이제 웹 앱이 로컬에서 실행되고 있으며 Firebase 백엔드에 다시 요청을 보낼 수 있습니다. 요청이 Firebase 백엔드에 대해 실행되면 앱 체크에서 이러한 요청을 모니터링하지만 적용하지는 않습니다. 들어오는 요청의 상태를 확인하려면 Firebase Console의 앱 체크 페이지에 있는 API 탭에서 Cloud Firestore 섹션으로 이동하면 됩니다. 아직 앱 체크를 사용하도록 클라이언트를 구성하지 않았으므로 다음과 유사한 내용이 표시됩니다.

백엔드에 확인되지 않은 요청이 100% 들어옵니다. 이 화면은 거의 모든 클라이언트 요청이 앱 체크가 통합되지 않은 클라이언트에서 발생한다는 것을 보여주므로 유용합니다.
이 대시보드는 몇 가지를 나타낼 수 있습니다. 첫 번째는 모든 클라이언트 앱이 최신 버전의 클라이언트를 실행하고 있는지 여부입니다. 그렇다면 애플리케이션의 실제 클라이언트에 대한 액세스를 사용 중지할 걱정 없이 앱 체크를 안전하게 적용할 수 있습니다. 이 그래프를 통해 앱 내부에서 발생하지 않은 백엔드 액세스 시도 횟수도 알 수 있습니다. 이는 사용자가 개발자 모르게 백엔드를 직접 쿼리하는 경우일 수 있습니다. 요청이 확인되지 않은 것을 확인할 수 있으므로, 요청을 확인하기 전에 백엔드에 확인되지 않은 요청이 있을 수 있는 사용자에게 어떤 일이 발생하는지 확인해 보겠습니다.
확인되지 않은 요청 및 시정 조치가 적용된 요청
이전 화면에서 시행 버튼을 누른 다음 메시지가 표시되면 시행을 다시 누릅니다.

이렇게 하면 앱 체크가 적용되기 시작합니다. 이제 선택한 증명 제공자(이 경우 reCAPTCHA Enterprise)를 통해 확인되지 않은 백엔드 서비스에 대한 요청이 차단됩니다. http://localhost:5000에서 실행 중인 웹 앱으로 돌아갑니다. 페이지를 새로고침하고 데이터베이스에서 데이터를 가져오려고 하면 아무 일도 일어나지 않습니다. Chrome 콘솔을 열어 오류를 읽으면 다음과 유사한 내용이 표시됩니다.
Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.
이는 앱 체크가 Firebase 리소스에 대한 요청에서 유효한 증명 토큰을 전달하지 않은 요청을 차단하는 것입니다. 당분간은 앱 체크 시행을 사용 중지할 수 있으며, 다음 섹션에서는 Friendly Chat 예시에 reCAPTCHA Enterprise 앱 체크를 추가하는 방법을 살펴봅니다.
7. 사이트에 reCAPTCHA Enterprise 키 추가
애플리케이션에 엔터프라이즈 키를 추가하겠습니다. 먼저 hosting/src/firebase-config.js을 열고 다음 코드 스니펫에 reCAPTCHA Enterprise 키를 추가합니다.
const reCAPTCHAEnterpriseKey = {
// Replace with your recaptcha enterprise site key
key: "Replace with your recaptcha enterprise site key"
};
완료되면 hosting/src/index.js를 열고 51번째 줄에 firebase-config.js에서 가져오기를 추가하여 reCAPTCHA 키를 가져오고 앱 체크 라이브러리를 가져와 reCAPTCHA Enterprise 제공업체를 사용할 수 있도록 합니다.
// add from here
import {
initializeAppCheck,
ReCaptchaEnterpriseProvider,
} from 'firebase/app-check';
// to here
// replace this line
import { getFirebaseConfig } from './firebase-config.js';
// with this line
import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';
그런 다음, 다음 줄에서 앱 체크를 설정하는 함수를 만듭니다. 이 함수는 먼저 개발 환경에 있는지 확인하고, 개발 환경에 있는 경우 로컬 개발에 사용할 수 있는 디버그 토큰을 출력합니다.
import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';
// add from here
function setupAppCheck(app) {
if(import.meta.env.MODE === 'development') {
self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}
}
// to here
이제 선택한 제공업체(이 경우 reCAPTCHA Enterprise)와 함께 작동하도록 앱 체크를 초기화할 차례입니다. 또한 백그라운드에서 앱 체크 토큰을 자동으로 새로고침하여 앱 체크 토큰이 오래된 경우 사용자가 서비스와 상호작용하는 데 지연이 발생하지 않도록 해야 합니다.
function setupAppCheck(app) {
if(import.meta.env.MODE === 'development') {
self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}
// add from here
// Create a ReCaptchaEnterpriseProvider instance using your reCAPTCHA Enterprise
// site key and pass it to initializeAppCheck().
initializeAppCheck(app, {
provider: new ReCaptchaEnterpriseProvider(getReCaptchaKey()),
isTokenAutoRefreshEnabled: true // Set to true to allow auto-refresh.
});
// to here
}
마지막으로 앱이 초기화되었는지 확인한 후 방금 만든 setupAppCheck 함수를 호출해야 합니다. hosting/src/index.js 파일 하단에 최근에 추가한 메서드에 대한 호출을 추가합니다.
const firebaseApp = initializeApp(getFirebaseConfig());
// add from here
setupAppCheck(firebaseApp);
// to here
getPerformance();
initFirebaseAuth();
loadMessages();
로컬에서 먼저 테스트
먼저 로컬에서 애플리케이션을 테스트합니다. 아직 애플리케이션을 로컬에서 제공하고 있지 않다면 firebase serve를 실행합니다. 애플리케이션이 여전히 로컬에서 로드되지 않는 것을 확인할 수 있습니다. 이는 reCAPTCHA 증명 제공업체에 Firebase 도메인만 등록하고 localhost 도메인은 등록하지 않았기 때문입니다. localhost를 승인된 도메인으로 등록하면 사용자가 자신의 머신에서 로컬로 실행되는 애플리케이션에서 제한된 백엔드에 액세스할 수 있으므로 localhost를 승인된 도메인으로 등록해서는 안 됩니다. 대신 self.FIREBASE_APPCHECK_DEBUG_TOKEN = true를 설정했으므로 JavaScript 콘솔에서 다음과 유사한 줄을 확인해야 합니다.
App Check debug token: 55183c20-de61-4438-85e6-8065789265be. You will need to add it to your app's App Check settings in the Firebase console for it to work.
제공된 디버그 토큰(예시의 경우 55183c20-de61-4438-85e6-8065789265be)을 가져와 앱의 더보기 메뉴 아래에 있는 앱 체크 구성에 연결합니다.

토큰에 기억하기 쉬운 고유한 이름을 지정하고 저장을 클릭합니다. 이 옵션을 사용하면 앱에서 클라이언트 생성 토큰을 사용할 수 있습니다. 이는 디버그 토큰을 생성하여 애플리케이션 내에 삽입하는 것보다 더 안전한 대안입니다. 앱 내에 토큰을 삽입하면 실수로 최종 사용자에게 배포될 수 있으며, 최종 사용자는 이를 악용하여 검사를 우회할 수 있습니다. CI 환경 등에서 디버그 토큰을 배포하려면 이 문서를 읽고 배포 방법을 자세히 알아보세요.

Firebase Console에 디버그 토큰을 등록한 후 앱 체크 적용을 다시 사용 설정하고 터미널에서 firebase serve를 호출하여 앱 콘텐츠가 로컬에서 로드되는지 테스트할 수 있습니다. 이전에 입력한 데이터가 웹 애플리케이션의 로컬 버전에 제공되는 것을 확인할 수 있습니다. 콘솔에 디버그 토큰이 출력된 메시지가 계속 표시됩니다.
프로덕션에서 사용해 보기
앱 체크가 로컬에서 작동하는지 확인한 후 웹 애플리케이션을 프로덕션에 배포합니다. 터미널에서 firebase deploy를 다시 호출하고 페이지를 새로고침합니다. 이렇게 하면 Firebase 호스팅에서 실행되도록 웹 애플리케이션이 패키징됩니다. 애플리케이션이 Firebase 호스팅에서 호스팅되면 ${YOUR_PROJECT_ID}.web.app에서 애플리케이션을 방문해 보세요. JavaScript 콘솔을 열면 디버그 토큰이 더 이상 표시되지 않고 프로젝트에 채팅이 로드됩니다. 또한 애플리케이션과 잠시 상호작용한 후 Firebase Console의 앱 체크 섹션으로 이동하여 애플리케이션에 대한 요청이 모두 확인된 상태로 전환되었는지 확인할 수 있습니다.
8. 수고하셨습니다
축하합니다. Firebase 앱 체크를 웹 앱에 추가했습니다.
프로덕션 환경의 reCAPTCHA Enterprise 토큰을 처리하도록 Firebase Console을 설정하고 로컬 개발을 위한 디버그 토큰도 설정했습니다. 이렇게 하면 앱이 승인된 클라이언트에서 Firebase 리소스에 계속 액세스할 수 있으며 애플리케이션 내에서 허위 행위가 발생하는 것을 방지할 수 있습니다.
다음 단계
다음 문서를 참고하여 Firebase 앱 체크를 추가하세요.