Schermo di privacy di Capacitor: nascondi contenuto dell'app

Un Capacitor schermo di privacy nasconde il contenuto dell'app quando l'utente apre la schermata delle applicazioni e, su Android, blocca le immagini di schermo e la registrazione della schermata. Senza uno, iOS e Android prendono una snapshot della tua ultima schermata, quindi un saldo bancario, un registro medico o un code unico rimane visibile nella lista delle applicazioni recenti. @capgo/capacitor-privacy-screen Aggiunge questo con un'unica chiamata o un'unica flag di configurazione, e ti consente di proteggere solo le schermate che ne hanno bisogno.

Cosa la schermata delle applicazioni espone

When un app utente lascia la tua app, entrambi i sistemi catturano un'immagine della schermata corrente:

• iOS prende una snapshot quando l'app si dimette attiva e lo mostra nel menu delle applicazioni, e brevemente mentre l'app si riavvia.
• Android mostra un anteprima live o memorizzata nei Recents.

Chiunque scorri la schermata del telefono vede quella snapshot. Lo stesso vale per chi condivide la schermata durante una chiamata, o un utente che registra la schermata per un ticket di supporto. Le immagini di schermo vengono anche sincronizzate con le librerie di foto cloud, dove i dati sensibili veramente fuoriescono.

Quali app ne hanno bisogno

Le rassegne di sicurezza e i test di penetrazione per queste categorie segnalano regolarmente la mancanza di protezione del commutatore di app. OWASP MASVS include controlli per i dati sensibili esposti attraverso l'interfaccia utente, e gli auditor test esattamente questo.

Installa

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

Il plugin supporta Capacitor 8 con la versione 8.x.

Opzione 1: proteggere l'intera app dal lancio

Impostalo in capacitor.config.ts. Il plugin nativo legge questo quando si carica, prima che il tuo JavaScript si esegua, quindi anche la prima snapshot è protetta:

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;

Esegui bunx cap sync dopo aver modificato le impostazioni. enabled L'opzione viene letta solo dal file di configurazione Capacitor, non è un'opzione di esecuzione.

Opzione 2: proteggere schermi specifici

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();

Inserisci questi hook nel tuo router in modo che ogni percorso in ingresso e in uscita sia coperto. Ad esempio con Vue Router:

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

Con Angular, utilizza un guardiano o un 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.

Cosa fa ogni opzione

Android

• Utilizza la protezione WindowManager.LayoutParams.FLAG_SECUREMentre è abilitato, vengono bloccate le schermate e le registrazioni della schermata e viene nascosta la anteprima dei recenti.
• dimBackground: true Mostra un overlay opaco nell'applicazione switcher. Con false, il plugin mostra il tuo drawable di splash quando disponibile e ricade su un'oscuramento.
• privacyModeOnActivityHidden Controlla cosa viene mostrato quando la tua attività è nascosta da qualcos'altro, ad esempio il prompt di autenticazione biometrica del sistema: 'none' (predefinito) 'dim' o 'splash'.
• context preventScreenshots l'opzione è deprecata e ignorata. FLAG_SECURE Mentre la protezione è attiva, questo viene sempre applicato. Per consentire uno screenshot su uno schermo, chiama disable() prima di esso enable() after.

IOS

• Quando l'app si riattiva, il plugin aggiunge un overlay per impedire che il contenuto venga mostrato nel snapshot dell'app switcher.
• blurEffect: 'light' o 'dark' utilizza sfocamento nativo. 'none' Mostra lo schermo di lancio predefinito quando disponibile, altrimenti un background del sistema.
• While enabled, app content is also placed in a secure rendering layer. Treat iOS screenshot blocking as best effort: Apple does not offer an official API to block screenshots, and behavior can change between iOS versions.

Web

La implementazione web traccia solo il flag abilitato, quindi i tuoi code funzionano ovunque. I browser non possono nascondere anteprime di schede o bloccare screenshot.

Uniscilo con i dati biometrici

A common pattern for banking apps: blur in the switcher, then require Face ID or fingerprint when the app comes back after some time. The plugin’s privacyModeOnActivityHidden mantiene il contenuto coperto mentre la richiesta di riconoscimento biometrico Android è attiva.

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' });
  }
});

Vedi plugin biometric nativo per la configurazione e il gestione degli errori.

Il plugin ufficiale e il plugin Capgo

Il team di Capacitor pubblica anche @capacitor/privacy-screen con un API molto simile (enable, disable, isEnabled e le stesse opzioni di piattaforma). Il plugin Capgo mantiene quella API e aggiunge:

• enabled: true nel Capacitor config, quindi la protezione è attiva prima che qualsiasi JavaScript esegua. Il plugin ufficiale è abilitato solo da JavaScript.
• la rendering sicuro di iOS del contenuto mentre è abilitato, documentato come parte del comportamento del plugin, oltre all'overlay del commutatore di app.
• getPluginVersion() per i diagnostici.
• Una implementazione web che mantiene il flag abilitato, quindi lo stesso code esegue in una anteprima del browser.

Se già utilizzi il plugin ufficiale, la modifica è principalmente un cambio di importazione.

dettagli UX che contano

• Non bloccare le schermate ovunque senza motivo. Gli utenti scattano screenshot di ricevute, numeri di conferma e impostazioni. Proteggere le schermate con dati sensibili, non l'intera app, a meno che la politica di sicurezza non lo richieda.
• Spiega ai utenti il motivo. Se qualcuno tenta di scattare una schermata su Android e ottiene un'immagine nera, un breve messaggio nel tuo centro di aiuto salva biglietti di supporto.
• Testa la condivisione di schermate. Le chiamate video e la riproduzione sono bloccate su Android mentre FLAG_SECURE È impostato. Se il tuo app ha un flusso di "condivisione schermo con il supporto", disabilita la protezione per esso.
• Controlla l'accessibilità. Gli lettori di schermate funzionano ancora con FLAG_SECUREma testa comunque con TalkBack e VoiceOver.

Elenco di controllo di testing

1. Apre una schermata sensibile, vai allo switcher dell'app. Il contenuto deve essere nascosto su entrambe le piattaforme.
2. On Android, prova a fare uno screenshot e una registrazione della schermata. Entrambi devono essere neri o bloccati.
3. Attiva un prompt biometrico e controlla lo sfondo.
4. Torna indietro da una schermata sensibile a una normale. La protezione dovrebbe disattivarsi se utilizzi il modo per schermata.
5. Uccidi e riavvia l'app. Con enabled: true in configurazione, il primo snapshot deve essere protetto.
6. Testa su un iPad con Split View e Slide Over. L'app potrebbe rimanere visibile anche non attiva.

Risolvere i problemi

La snapshot mostra ancora contenuto su iOS. Hai abilitato la protezione dopo che l'app già era andata in background, o solo su alcune rotte. Utilizza l'opzione di configurazione per la protezione dell'app intera.

Schermo nero nelle App recenti su Android al posto dello splash. Imposta dimBackground: false e assicurati che il tuo drawable dello splash esista, altrimenti il plugin ricade su un'oscurazione.

Le screenshot funziona ancora su Android. Controlla isEnabled()Un'altra parte della tua app potrebbe chiamare disable() in navigazione

I valori di configurazione sono nativi. Se cambi Valori di configurazione sono nativi. Se cambi plugins.PrivacyScreen e capacitor.config.ts, invia un nuovo build dello store. Esecuzione enable() e disable() le tue chiamate in JavaScript possono essere modificate con Capgo live updates.

Lavori di sicurezza correlati

A privacy screen is one item on a mobile security checklist. Also look at secure storage, certificate pinning and root detection. Capgo has plugins for La pinning SSL e detectione di root e jailbreake il nostro post su Apple’s privacy rules for Capacitor apps opzioni complete del plugin sono disponibili nel Martin Donadieu.