Проверка приложений. Лаборатория веб-кода.

1. Введение

Последнее обновление: 23.02.2023

Как предотвратить несанкционированный доступ к ресурсам Firebase?

С помощью Firebase App Check можно предотвратить несанкционированный доступ клиентов к ресурсам бэкэнда, требуя, чтобы входящие запросы сопровождались подтверждением того, что запрос исходит от вашего подлинного приложения, и блокируя трафик без надлежащего подтверждения. Firebase App Check использует платформенно-специфичные поставщики подтверждения для проверки подлинности клиента: для веб-приложений App Check поддерживает reCAPTCHA v3 и reCAPTCHA Enterprise в качестве поставщиков подтверждения.

App Check можно использовать для защиты запросов к Cloud Firestore, Realtime Database, Cloud Functions, Firebase Authentication с Identity Platform, а также к бэкэндам, которые вы размещаете самостоятельно.

Что вы построите

В этом практическом задании вы научитесь защищать приложение для чата, сначала добавив, а затем применив проверку приложений (App Check).

Созданное вами удобное приложение для чата.

Что вы узнаете

  • Как отслеживать несанкционированный доступ к вашей серверной части
  • Как добавить проверку соблюдения правил в Firestore и Cloud Storage
  • Как запустить приложение с отладочным токеном для локальной разработки

Что вам понадобится

  • Среда разработки/текстовый редактор на ваш выбор
  • Менеджер пакетов npm , который обычно поставляется вместе с Node.js.
  • Установлен и настроен Firebase CLI для работы с вашей учетной записью.
  • Терминал/консоль
  • Любой браузер на ваш выбор, например Chrome.
  • Пример кода из практического занятия (инструкции по получению кода см. на следующем шаге практического занятия).

2. Получите пример кода.

Клонируйте репозиторий codelab на GitHub из командной строки:

git clone https://github.com/firebase/codelab-friendlychat-web

В качестве альтернативы, если у вас не установлен Git, вы можете загрузить репозиторий в виде ZIP-файла .

Импортируйте стартовое приложение

С помощью вашей IDE откройте или импортируйте каталог 📁 appcheck-start из клонированного репозитория. Этот каталог 📁 appcheck-start содержит начальный код для практического занятия, которое будет представлять собой полностью функциональное веб-приложение для чата. В каталоге 📁 appcheck будет находиться готовый код для практического занятия.

3. Создайте и настройте проект Firebase.

Создайте проект Firebase.

  1. Войдите в консоль Firebase, используя свою учетную запись Google.
  2. Нажмите кнопку, чтобы создать новый проект, а затем введите название проекта (например, FriendlyChat ).
  3. Нажмите «Продолжить» .
  4. Если появится запрос, ознакомьтесь с условиями использования Firebase и примите их, после чего нажмите «Продолжить» .
  5. (Необязательно) Включите помощь ИИ в консоли Firebase (в Firebase она называется "Gemini").
  6. Для этого практического занятия вам не понадобится Google Analytics, поэтому отключите эту опцию.
  7. Нажмите «Создать проект» , дождитесь завершения подготовки проекта, а затем нажмите «Продолжить» .

Обновите свой тарифный план Firebase.

Для использования Cloud Storage for Firebase ваш проект Firebase должен быть подключен к тарифному плану с оплатой по мере использования (Blaze) , то есть он должен быть связан с учетной записью Cloud Billing .

Чтобы перейти на тарифный план Blaze для вашего проекта, выполните следующие шаги:

  1. В консоли Firebase выберите вариант обновления вашего тарифного плана .
  2. Выберите тарифный план Blaze. Следуйте инструкциям на экране, чтобы связать учетную запись Cloud Billing с вашим проектом.
    Если в рамках этого обновления вам потребовалось создать учетную запись Cloud Billing, возможно, вам нужно будет вернуться к процессу обновления в консоли Firebase, чтобы завершить обновление.

Добавьте веб-приложение Firebase в проект.

  1. Нажмите на значок веб-браузера 58d6543a156e56f9.png создать новое веб-приложение Firebase.
  2. Зарегистрируйте приложение под псевдонимом Friendly Chat, затем поставьте галочку рядом с пунктом «Также настройте Firebase Hosting для этого приложения» . Нажмите «Зарегистрировать приложение» .
  3. На следующем шаге вы увидите команду для установки Firebase с помощью npm и объект конфигурации. Этот объект вы скопируете позже в ходе выполнения задания, поэтому пока нажмите «Далее» .

Добавьте Firebase в окно вашего веб-приложения.

  1. Затем вы увидите опцию установки Firebase CLI. Если вы еще не установили его, сделайте это сейчас, используя команду npm install -g firebase-tools . Затем нажмите «Далее» .
  2. Затем вы увидите опцию входа в Firebase и развертывания на хостинге Firebase. Войдите в Firebase, используя команду firebase login , затем нажмите «Продолжить в консоль» . Развертывание на хостинге Firebase будет выполнено на следующем шаге.

Настройка продуктов Firebase

Приложение, которое мы собираемся создать, использует продукты Firebase, доступные для веб-приложений:

  • Аутентификация Firebase позволит вашим пользователям легко входить в ваше приложение.
  • Cloud Firestore позволяет сохранять структурированные данные в облаке и получать мгновенные уведомления об изменениях данных.
  • Облачное хранилище Firebase для сохранения файлов в облаке.
  • Firebase Hosting — это хостинг для размещения и обслуживания ваших ресурсов.
  • Firebase Cloud Messaging для отправки push-уведомлений и отображения всплывающих уведомлений в браузере.
  • Firebase Performance Monitoring — это инструмент для сбора данных о производительности вашего приложения пользователями.

Для некоторых из этих продуктов требуется специальная настройка или их включение через консоль Firebase.

Включите вход через Google для аутентификации Firebase.

Чтобы пользователи могли входить в веб-приложение с помощью своих учетных записей Google, мы будем использовать метод входа через Google.

Вам потребуется включить вход через Google:

  1. В консоли Firebase найдите раздел «Сборка» на левой панели.
  2. Нажмите «Аутентификация» , при необходимости нажмите «Начать» , затем перейдите на вкладку «Способ входа» (или нажмите здесь , чтобы перейти непосредственно туда).
  3. Включите использование сервиса авторизации Google.
  4. Установите для своего приложения общедоступное название Friendly Chat и выберите адрес электронной почты службы поддержки проекта из выпадающего меню.
  5. Нажмите «Сохранить».

f96888973c3d00cc.png

Настройка Cloud Firestore

Веб-приложение использует Cloud Firestore для сохранения сообщений чата и получения новых сообщений.

Вот как настроить Cloud Firestore в вашем проекте Firebase:

  1. В левой панели консоли Firebase разверните раздел «Сборка» , а затем выберите базу данных Firestore .
  2. Нажмите «Создать базу данных» .
  3. Оставьте значение параметра " Идентификатор базы данных" равным (default) .
  4. Выберите местоположение для вашей базы данных, затем нажмите «Далее» .
    Для создания настоящего приложения вам следует выбрать местоположение, расположенное недалеко от ваших пользователей.
  5. Нажмите «Пуск» в тестовом режиме . Ознакомьтесь с отказом от ответственности в отношении правил безопасности.
    В дальнейшем в этом практическом занятии вы добавите правила безопасности для защиты ваших данных. Не распространяйте и не предоставляйте публичный доступ к приложению, не добавив правила безопасности для вашей базы данных.
  6. Нажмите «Создать» .

Настройка облачного хранилища для Firebase

Веб-приложение использует Cloud Storage for Firebase для хранения, загрузки и обмена фотографиями.

Вот как настроить Cloud Storage для Firebase в вашем проекте Firebase:

  1. В левой панели консоли Firebase разверните раздел «Сборка» , а затем выберите «Хранилище» .
  2. Нажмите « Начать» .
  3. Выберите местоположение для вашего хранилища по умолчанию.
    Для регионов US-WEST1 , US-CENTRAL1 и US-EAST1 доступен тариф "Всегда бесплатно" от Google Cloud Storage. Для регионов во всех остальных регионах действуют тарифные планы и правила использования Google Cloud Storage .
  4. Нажмите «Пуск» в тестовом режиме . Ознакомьтесь с отказом от ответственности в отношении правил безопасности.
    В дальнейшем в этом практическом занятии вы добавите правила безопасности для защиты ваших данных. Не распространяйте и не предоставляйте публичный доступ к приложению без добавления правил безопасности для вашего хранилища.
  5. Нажмите «Создать» .

4. Настройка Firebase

Из каталога appcheck-start вызовите:

firebase use --add

При появлении запроса выберите идентификатор вашего проекта, затем присвойте вашему проекту Firebase псевдоним. Для этого проекта вы можете просто указать псевдоним default . Далее вам потребуется настроить локальный проект для работы с Firebase.

  1. Перейдите в настройки проекта в консоли Firebase.
  2. В карточке «Ваши приложения» выберите псевдоним приложения, для которого вам нужен объект конфигурации.
  3. Выберите «Config» на панели фрагментов кода Firebase SDK.
  4. Скопируйте фрагмент кода объекта конфигурации и добавьте его в файл appcheck-start/hosting/src/firebase-config.js . В остальной части практического задания предполагается, что переменная называется 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 , чтобы развернуть веб-приложение в сети. Этот шаг крайне важен для демонстрации работы App Check в реальных условиях, поскольку требует настройки домена для поставщика аттестации reCAPTCHA Enterprise.

Надеюсь, вы используете стандартные возможности приложения. Отправка сообщений в чате и все остальное, что должно делаться только из подобных приложений. Недостаток текущего состояния заключается в том, что любой, у кого есть конфигурация вашего приложения, полученная на предыдущем шаге, может получить доступ к вашим внутренним ресурсам. Им по-прежнему необходимо соблюдать правила безопасности, установленные вашими системами Firestore и Cloud Storage, но в остальном они могут запрашивать, сохранять и получать доступ к хранящимся там данным.

На следующих этапах вам предстоит:

  • Зарегистрируйтесь для проверки приложения.
  • Подтверждение правоприменения
  • Начните обеспечивать соблюдение правил.

6. Включите проверку приложений и принудительное применение мер.

Начнём с получения ключа reCAPTCHA Enterprise для вашего проекта и добавления его в App Check. Для этого перейдите в раздел reCAPTCHA Enterprise в консоли Google Cloud. Выберите свой проект, после чего вам будет предложено включить API reCAPTCHA Enterprise. Включите API и подождите несколько минут, пока процесс завершится. Затем нажмите «Создать ключ» рядом с разделом «Ключи Enterprise» . В этом разделе укажите отображаемое имя и выберите ключ типа «Веб-сайт» . Вам необходимо указать домены, на которых размещено ваше приложение. Поскольку вы планируете разместить его на Firebase Hosting, используйте имя хостинга по умолчанию, которое обычно равно ${YOUR_PROJECT_ID}.web.app . Вы можете найти свой домен хостинга в разделе «Хостинг» консоли Firebase. После заполнения этой информации нажмите «Готово» и «Создать ключ» .

экран создания ключа reCAPTCHA

После завершения процесса в верхней части страницы «Подробная информация о ключе» отобразится идентификатор.

Окно регистрации предприятия reCAPTCHA

Скопируйте этот ID в буфер обмена. Это ключ, который вы используете для проверки приложений. Затем перейдите в раздел «Проверка приложений» в консоли Firebase и нажмите «Начать» . После этого нажмите «Зарегистрировать» , затем выберите reCAPTCHA Enterprise и вставьте скопированный ID в текстовое поле для ключа сайта reCAPTCHA Enterprise . Остальные настройки оставьте по умолчанию. Ваша страница проверки приложений должна выглядеть примерно так:

Окно проверки приложений, где вы регистрируете свой корпоративный токен reCAPTCHA.

Непроверенные и невыполненные запросы

Теперь, когда у вас есть зарегистрированный ключ в консоли Firebase, вернитесь к запуску вашего сайта в браузере, выполнив firebase serve . Теперь веб-приложение работает локально, и вы можете снова начать отправлять запросы к бэкэнду Firebase. Поскольку запросы к бэкэнду Firebase отслеживаются App Check, они не подвергаются принудительному исполнению. Если вы хотите увидеть статус поступающих запросов, вы можете перейти в раздел Cloud Firestore на вкладке API страницы App Check в консоли Firebase. Поскольку вы еще не настроили клиент для использования App Check, вы должны увидеть что-то подобное:

Панель мониторинга App Check, показывающая 100% неподтвержденных запросов клиентов к вашему приложению.

На бэкэнде поступает 100% непроверенных запросов. Этот экран полезен, поскольку показывает, что почти все запросы от клиентов поступают от тех, у кого не интегрирована функция App Check.

Эта панель мониторинга может показывать несколько вещей. Во-первых, она может указывать на то, работают ли все ваши клиентские приложения на последней версии вашего приложения. Если да, то вы можете безопасно включить проверку приложений, не беспокоясь о блокировке доступа для подлинных клиентов вашего приложения. Во-вторых, она может показать вам, сколько попыток доступа к вашему бэкэнду было совершено вне вашего приложения. Это могут быть пользователи, которые обращаются к вашему бэкэнду напрямую без вашего ведома. Поскольку вы видите, что запросы не подтверждены, пора посмотреть, что произойдет с теми пользователями, которые могут отправлять неподтвержденные запросы к вашему бэкэнду, прежде чем переходить к подтверждению их запросов.

Непроверенные и принудительно исполняемые запросы

Нажмите кнопку «Применить» на предыдущем экране, а затем, если появится соответствующее сообщение, нажмите «Применить» еще раз.

Непроверенная панель показателей с выделенной кнопкой «Применить».

Это запустит проверку приложений (App Check); теперь она будет блокировать запросы к вашим бэкэнд-сервисам, которые не подтверждены выбранным вами поставщиком аттестации (в данном случае reCAPTCHA Enterprise). Вернитесь к работающему веб-приложению, которое должно быть запущено по адресу http://localhost:5000 . При обновлении страницы и попытке получить данные из базы данных ничего не происходит. Если вы откроете консоль Chrome, чтобы прочитать ошибки, вы должны увидеть что-то похожее на следующее:

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

Это блокировка запросов App Check, которые не передали действительный токен подтверждения в своих запросах к вашим ресурсам Firebase. На данный момент вы можете отключить проверку App Check, а в следующем разделе вы узнаете, как добавить проверку reCAPTCHA Enterprise App Check в пример Friendly Chat.

7. Добавьте ключ reCAPTCHA Enterprise на сайт.

Мы собираемся добавить корпоративный ключ в ваше приложение. Сначала откройте hosting/src/firebase-config.js и добавьте свой корпоративный ключ reCAPTCHA в следующий фрагмент кода:

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, а также импортируйте библиотеку App Check, чтобы работать с поставщиком 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';

Затем, на следующей строке, вы создадите функцию для настройки проверки приложений (App Check). Функция сначала проверит, находитесь ли вы в среде разработки, и если да, то выведет отладочный токен, который вы сможете использовать для локальной разработки.

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

Теперь пришло время инициализировать App Check для работы с выбранным вами поставщиком — в данном случае это reCAPTCHA Enterprise. Затем вам также потребуется автоматически обновлять токен App Check в фоновом режиме, что предотвратит любые задержки во взаимодействии пользователя с вашим сервисом в случае, если его токен App Check устарел.

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 . Вы заметите, что приложение по-прежнему не загружается локально. Это происходит потому, что вы зарегистрировали свой домен Firebase только у поставщика аттестации reCAPTCHA, а не у домена 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 ) и вставить его в конфигурацию App Check в меню дополнительных параметров для вашего приложения.

Панель мониторинга App Check, указывающая местоположение раздела «Управление отладочными токенами».

Присвойте токену уникальное имя, которое вы запомните, и нажмите «Сохранить» . Эта опция позволяет использовать сгенерированный клиентом токен в вашем приложении, что является более безопасной альтернативой, чем генерация отладочного токена и его встраивание в приложение. Встраивание токена в приложение может привести к его случайной передаче конечным пользователям, которые могут использовать это в своих целях, обходя ваши проверки. Если вы хотите распространять отладочный токен, например, в среде CI, ознакомьтесь с этой документацией , чтобы узнать больше о том, как его распространять.

Пример заполнения отладочного токена псевдонимом.

После регистрации отладочного токена в консоли Firebase вы можете повторно включить проверку App Check и проверить, загружается ли контент приложения локально, вызвав команду firebase serve в терминале. Вы должны увидеть, как ранее введенные данные передаются локальной версии веб-приложения. При этом в консоль должно по-прежнему выводиться сообщение с отладочным токеном.

Попробуйте это в производственной среде.

Убедившись, что проверка приложений работает локально, разверните веб-приложение в продакшене. В терминале снова вызовите firebase deploy и перезагрузите страницу. Это упакует ваше веб-приложение для работы на Firebase Hosting. После размещения приложения на Firebase Hosting попробуйте посетить его по адресу ${YOUR_PROJECT_ID}.web.app . Вы можете открыть консоль JavaScript, и там больше не должно отображаться отладочное сообщение, а должны загружаться чаты в вашем проекте. Кроме того, после нескольких минут работы с приложением вы можете перейти в раздел «Проверка приложений» в консоли Firebase и убедиться, что все запросы к вашему приложению теперь проверяются.

8. Поздравляем!

Поздравляем, вы успешно добавили Firebase App Check в веб-приложение!

Вы настраиваете консоль Firebase для обработки токена reCAPTCHA Enterprise в производственных средах и даже создаете токены отладки для локальной разработки. Это гарантирует, что ваши приложения по-прежнему смогут получать доступ к ресурсам Firebase от авторизованных клиентов и предотвращает мошеннические действия внутри вашего приложения.

Что дальше?

Чтобы добавить проверку приложений Firebase, ознакомьтесь со следующей документацией:

Справочная документация