Nicht Firebase-Ressourcen in Web-Apps mit App Check schützen

Sie können die nicht Firebase-Ressourcen Ihrer App, z. B. selbst gehostete Backends, mit App Check schützen. Dazu sind die folgenden beiden Schritte erforderlich:

  • Ändern Sie Ihren Anwendungsclient so, dass ein App Check-Token zusammen mit jeder Anfrage an Ihr Back-End gesendet wird, wie auf dieser Seite beschrieben.
  • Ändern Sie das Back-End so, dass für jede Anfrage ein gültiges App Check-Token erforderlich ist, wie unter App Check-Tokens aus einem benutzerdefinierten Back-End überprüfen beschrieben.

Hinweis

Fügen Sie Ihrer Anwendung App Check hinzu. Verwenden Sie dazu entweder den reCAPTCHA Enterprise-Anbieter oder einen benutzerdefinierten Anbieter.

App Check Tokens mit Backend-Anfragen senden

Rufen Sie im Anwendungsclient vor jeder Anfrage ein gültiges, nicht abgelaufenes App Check-Token mit appCheck().getToken() ab. Die Bibliothek App Check aktualisiert das Token bei Bedarf.

Sobald du ein gültiges Token hast, sende es zusammen mit der Anfrage an dein Backend. Wie Sie dies erreichen, liegt ganz bei Ihnen. Senden Sie jedoch keine App Check-Tokens als Teil von URLs, auch nicht in Abfrageparametern, da sie dadurch anfällig für versehentliches Datenleck und Abfangen sind. Im folgenden Beispiel wird das Token in einem benutzerdefinierten HTTP-Header gesendet. Dies ist die empfohlene Vorgehensweise.

Web

import { initializeAppCheck, getToken } from 'firebase/app-check';

const appCheck = initializeAppCheck(
    app,
    { provider: provider } // ReCaptchaV3Provider or CustomProvider
);

const callApiWithAppCheckExample = async () => {
  let appCheckTokenResponse;
  try {
      appCheckTokenResponse = await getToken(appCheck, /* forceRefresh= */ false);
  } catch (err) {
      // Handle any errors if the token was not retrieved.
      return;
  }

  // Include the App Check token with requests to your server.
  const apiResponse = await fetch('https://yourbackend.example.com/yourApiEndpoint', {
      headers: {
          'X-Firebase-AppCheck': appCheckTokenResponse.token,
      }
  });

  // Handle response from your backend.
};

Web

const callApiWithAppCheckExample = async () => {
  let appCheckTokenResponse;
  try {
      appCheckTokenResponse = await firebase.appCheck().getToken(/* forceRefresh= */ false);
  } catch (err) {
      // Handle any errors if the token was not retrieved.
      return;
  }

  // Include the App Check token with requests to your server.
  const apiResponse = await fetch('https://yourbackend.example.com/yourApiEndpoint', {
      headers: {
          'X-Firebase-AppCheck': appCheckTokenResponse.token,
      }
  });

  // Handle response from your backend.
};

Wiederholungsschutz (Beta)

Wenn du eine Anfrage an einen Endpunkt sendest, für den du den Replay-Schutz aktiviert hast, musst du ein Token mit getLimitedUseToken() statt getToken() abrufen:

import { getLimitedUseToken } from "firebase/app-check";

// ...

appCheckTokenResponse = await getLimitedUseToken(appCheck);