Capacitor Datenschutzschirm: App-Inhalte verbergen

Ein Capacitor Datenschutzschirm verbergt die App-Inhalte, wenn der Benutzer den App Switcher öffnet und auf Android Screenshot und Bildschirmrekorder blockiert. Ohne einen solchen, nehmen iOS und Android einen Screenshot der letzten Bildschirmansicht, sodass ein Bankkonto, ein medizinisches Verzeichnis oder ein einmaliges code im Liste der kürzlich geöffneten Apps sichtbar bleibt. @capgo/capacitor-privacy-screen fügt dies mit einem Aufruf oder einer Konfigurationsflagge hinzu und ermöglicht es Ihnen, nur die Bildschirme zu schützen, die es benötigen.

Was der App Switcher preisgibt

Wenn ein Benutzer Ihre App verlässt, fangen beide Systeme ein Bild des aktuellen Bildschirms ein:

• iOS nimmt ein Snapshot, wenn die App inaktiv wird und zeigt es im App Switcher an, und kurzzeitig, während die App neu gestartet wird.
• Android zeigt ein Live- oder ein gecachtes Vorschau in den Recents.

Jeder, der einen Blick auf das Telefon wirft, sieht dieses Snapshot. Ebenso sieht jeder, der eine Telefonkonferenz mit Bildschirmübertragung führt, oder ein Benutzer, der seine Bildschirmübertragung für ein Supportticket aufnimmt. Screenshots werden auch in Cloud-Foto-Bibliotheken synchronisiert, wo sensible Daten wirklich austraten.

Welche Apps benötigen es

Sicherheitsprüfungen und Penetrationstests für diese Kategorien flaggen routinemäßig fehlende Schutzfunktionen für das App-Switcher. OWASP MASVS enthält Prüfungen für sensitive Daten, die über die Benutzeroberfläche freigegeben werden, und Prüfer testen genau dies.

Installieren

bun add @capgo/capacitor-privacy-screen
bunx cap sync

Das Plugin unterstützt Capacitor 8 mit Version 8.x.

Option 1: Das ganze App schützen, sobald sie gestartet wird

Setze es in capacitor.config.ts. Die native Plugin liest dies, wenn sie geladen wird, bevor dein JavaScript läuft, daher ist sogar der erste Snapshot geschützt:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.bank',
  appName: 'Example Bank',
  webDir: 'dist',
  plugins: {
    PrivacyScreen: {
      enabled: true,
      android: {
        dimBackground: false,
        privacyModeOnActivityHidden: 'splash',
      },
      ios: {
        blurEffect: 'dark',
      },
    },
  },
};

export default config;

Lauf bunx cap sync nachdem Sie die Konfiguration geändert haben. enabled Option wird nur aus der Capacitor-Konfiguration gelesen, es handelt sich nicht um eine Laufzeitoption.

Option 2: spezifische Screens schützen

import { PrivacyScreen } from '@capgo/capacitor-privacy-screen';

export async function enterSensitiveScreen() {
  await PrivacyScreen.enable({
    android: { dimBackground: true },
    ios: { blurEffect: 'light' },
  });
}

export async function leaveSensitiveScreen() {
  await PrivacyScreen.disable();
}

const { enabled } = await PrivacyScreen.isEnabled();

Integriere diese in deinen Router ein, so dass jeder Pfad herein und raus abgedeckt ist. Zum Beispiel mit Vue Router:

router.afterEach(async (to) => {
  if (to.meta.sensitive) {
    await PrivacyScreen.enable();
  } else {
    await PrivacyScreen.disable();
  }
});

Mit Angular verwenden Sie einen Wächter oder einen NavigationEnd subscription. With React Router, a hook in your layout component works. The important thing is that back navigation, deep links and tab switches go through the same logic, otherwise a sensitive screen can end up unprotected.

Was jede Option tut

Android

• Schutz verwendet WindowManager.LayoutParams.FLAG_SECURE. Während aktiviert, werden Bildschirmfotos und -aufnahmen blockiert und die Vorschau im Recents-Menü ist versteckt.
• dimBackground: true zeigt ein dimmeres Overlay im App Switcher. Mit false, zeigt das Plugin Ihren Splash-Drawable, wenn verfügbar, und fällt zurück auf Dimmen.
• privacyModeOnActivityHidden steuert, was angezeigt wird, wenn Ihre Aktivität durch etwas anderes versteckt ist, zum Beispiel durch das System-Biometrie-Fragment: 'none' (Standard) 'dim' oder 'splash'.
• Die alte preventScreenshots Option wird abgelehnt und ignoriert. FLAG_SECURE Wird immer angewendet, solange der Schutz aktiv ist. Um auf einem Bildschirm einen Screenshot zulassen, rufen Sie disable() ist immer angewendet, solange der Schutz aktiviert ist. Um auf einem Bildschirm ein Bildschirmfoto zuzulassen, rufen Sie enable() vorher und

iOS

• Wenn die App inaktiv wird, fügt der Plugin einen Overlay hinzu, so dass der App Switcher-Snapshot nicht Ihren Inhalt anzeigt.
• blurEffect: 'light' oder 'dark' Verwenden Sie native Blur. 'none' (Standard) zeigt Ihr Startbildschirm an, wenn verfügbar, andernfalls ein Systemhintergrund.
• Während aktiviert ist, wird der App-Inhalt auch in einem sicheren Render-Schicht platziert. Behandeln Sie iOS-Screenshot-Blockierung als Best-Effort: Apple bietet keine offizielle API zur Blockierung von Screenshots an, und das Verhalten kann zwischen den iOS-Versionen variieren.

Web

Die Web-Implementierung verfolgt nur die Flag-Status, so dass Ihr code überall ausgeführt wird. Browser können Tab-Vorschauen nicht verbergen oder Screenshot-Blockierung durchführen.

Combine es mit Biometrik

Ein häufiges Muster für Banking-Apps: Blur im Switcher, dann erfordert Face ID oder Fingerabdruck, wenn die App nach einiger Zeit zurückkehrt. Der Plugin’s privacyModeOnActivityHidden hält den Inhalt bedeckt, während der Android-Biometrik-Prompt aktiv ist.

import { App } from '@capacitor/app';
import { NativeBiometric } from '@capgo/capacitor-native-biometric';

// null until the app has really gone to the background
let backgroundedAt: number | null = null;

App.addListener('appStateChange', async ({ isActive }) => {
  if (!isActive) {
    backgroundedAt = Date.now();
    return;
  }
  const away = backgroundedAt === null ? 0 : Date.now() - backgroundedAt;
  backgroundedAt = null;
  if (away > 60_000) {
    await NativeBiometric.verifyIdentity({ reason: 'Confirm it is you' });
  }
});

Siehe das native biometrischer Plugin für die Einrichtung und Fehlerbehandlung.

Das offizielle Plugin und das Capgo Plugin

Das Capacitor-Team veröffentlicht auch @capacitor/privacy-screen mit einem sehr ähnlichen API (enable, disable, isEnabled und den gleichen Plattformoptionen). Das Capgo-Plugin behält das API bei und fügt hinzu:

• enabled: true in der Capacitor-Konfiguration, sodass die Schutzfunktion aktiv ist, bevor JavaScript ausgeführt wird. Das offizielle Plugin wird nur aus JavaScript aktiviert.
• Sichere iOS-Rendertechnik für Inhalte, während aktiv, dokumentiert als Teil der Plugin-Verhaltensweise, zusätzlich zur App-Switcher-Übersicht.
• getPluginVersion() für Diagnosezwecke.
• Eine Web-Implementierung, die die aktiviert Flag behält, sodass das gleiche code in einem Browser-Vorschau läuft.

Wenn Sie bereits das offizielle Plugin verwenden, ist der Wechsel hauptsächlich eine Änderung der Importe.

UX-Details, die zählen

• Blockeiere keine Screenshots überall ohne Grund. Benutzer machen Screenshots von Rechnungen, Bestätigungsnummern und Einstellungen. Schütze Screens mit sensiblen Daten, nicht die ganze App, es sei denn, Ihre Sicherheitspolitik verlangt es.
• Erklären Sie den Benutzern, warum. Wenn jemand versucht, auf Android ein Screenshot zu machen und eine schwarze Bildschirmabbildung erhält, kann ein kurzer Hinweis in Ihrem Hilfezentrum Supporttickets einsparen.
• Testen Sie Bildschirmfreigabe. Videoanrufe und Casting werden auf Android blockiert, während FLAG_SECURE is set. If your app has a “share screen with support” flow, disable protection for it.
• Screenreader funktionieren noch mit , aber testen Sie mit TalkBack und VoiceOver trotzdem. FLAG_SECURE, aber testen Sie es trotzdem mit TalkBack und VoiceOver.

Öffnen Sie eine sensible Seite, gehen Sie zum App Switcher. Der Inhalt muss auf beiden Plattformen versteckt sein.

1. Öffnen Sie eine sensitive Seite, gehen Sie zum App Switcher. Der Inhalt muss auf beiden Plattformen versteckt werden.
2. On Android, versuche einen Screenshot und eine Bildschirmaufzeichnung. Beide müssen schwarz oder blockiert sein.
3. Auslösen Sie einen biometrischen Prompt und überprüfen Sie den Hintergrund.
4. Navigieren Sie von einer sensiblen Seite zu einer normalen zurück. Die Schutzfunktion sollte sich ausschalten, wenn Sie die per-Screen-Modus verwenden.
5. Killen und das App neu starten. Mit enabled: true in der Konfiguration, muss der erste Snapshot geschützt sein.
6. Testen Sie es auf einem iPad mit Split View und Slide Over. Die App kann sichtbar bleiben, während sie nicht aktiv ist.

Schwierige Fälle

Der Snapshot zeigt immer noch Inhalte auf iOS. Sie haben die Schutzfunktion nachdem die App bereits in den Hintergrund gegangen ist, oder nur auf einigen Routen aktiviert. Verwenden Sie die Konfigurationsoption für die ganze-App-Schutzfunktion.

Schwarze Bildschirm in den Recents auf Android anstatt des Splash. Setzen Sie dimBackground: false und stellen Sie sicher, dass Ihr Splash-Drawable existiert, ansonsten fällt der Plugin auf Dimming zurück.

Screenshots still work on Android. Überprüfen isEnabled()Ein anderer Teil Ihrer App ruft disable() Navigation

Schutz verloren nach einer OTA-Update. Konfigurationswerte sind native. Wenn Sie plugins.PrivacyScreen in capacitor.config.ts, schicken Sie ein neues Laden-Build. Laufzeit enable() and disable() Änderungen in Ihren JavaScript-Anweisungen können Capgo Live-Updates.

Schutz verloren nach einem OTA-Update.

Auf der mobilen Sicherheitsliste ist eine Datenschutzschutzschirm eine wichtige Sache. Überprüfen Sie auch den sicheren Speicher, das Zertifikat-Pinnen und die Wurzel-Detektion. Capgo hat Plugins für SSL-Pinnen und Wurzel- und Jailbreak-Detektion, und unsere Post über Apple's Datenschutzregeln für Capacitor-Apps umfasst die Überprüfung. Die vollständigen Plugin-Optionen finden Sie in den Datenschutzschutzschirm-Dokumenten.