Capacitor Privacy Screen: Hide App Content

Sebuah layar privasi Capacitor menyembunyikan konten aplikasi Anda ketika pengguna membuka pengganti aplikasi dan, pada Android, menghalangi tangkapan layar dan rekaman layar. Tanpa satu, iOS dan Android mengambil tangkapan layar layar terakhir Anda, sehingga saldo bank, catatan medis atau code satu kali tetap terlihat di daftar aplikasi yang baru-baru ini dibuka. @capgo/capacitor-privacy-screen menambahkan ini dengan satu panggilan atau satu flag konfigurasi, dan memungkinkan Anda melindungi hanya layar yang memerlukannya.

Apa yang terungkap oleh pengganti aplikasi

Ketika pengguna meninggalkan aplikasi Anda, baik sistem iOS maupun Android mengambil gambar layar saat ini:

• iOS mengambil tangkapan layar ketika aplikasi melepaskan aktifitas aktif dan menampilkan gambar di pengaturan aplikasi, serta sementara aplikasi diluncurkan kembali.
• Android menampilkan pratinjau hidup atau cache di Recents.

Siapa pun yang melihat ponsel melihat tangkapan layar tersebut. Begitu juga siapa pun yang melakukan panggilan video, atau pengguna yang merekam layar untuk tiket dukungan. Tangkapan layar juga disinkronkan ke perpustakaan foto di cloud, di mana data sensitif benar-benar bocor.

Aplikasi mana yang membutuhkannya

Pengujian keamanan dan tes penetrasi untuk kategori-kategori ini secara rutin mengidentifikasi kekurangan perlindungan switcher aplikasi. OWASP MASVS termasuk periksa data sensitif yang terungkap melalui antarmuka pengguna, dan auditor melakukan tes yang tepat.

Instal

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

Pengaturan plugin mendukung Capacitor 8 dengan versi 8.x.

Option 1: melindungi aplikasi secara keseluruhan dari peluncuran

Set di dalam capacitor.config.ts. Plugin asli membaca ini ketika ia dimuat, sebelum kode JavaScript berjalan, sehingga bahkan snapshot pertama pun dilindungi:

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;

Jalankan bunx cap sync setelah mengubah konfigurasi. enabled Opsi ini dibaca dari konfigurasi Capacitor saja, bukanlah opsi waktu runtime.

Option 2: melindungi layar spesifik

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

Hubungkan ke dalam router Anda sehingga setiap jalur masuk dan keluar tertutup. Dengan Vue Router, misalnya:

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

Dengan Angular, gunakan guard atau 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.

Apa yang dilakukan oleh setiap pilihan

iOS

• Pengamanan menggunakan WindowManager.LayoutParams.FLAG_SECURE. Ketika diaktifkan, tangkapan layar dan rekaman layar diblokir dan pratinjau Recents disembunyikan.
• dimBackground: true menampilkan overlay abu-abu di pengganti aplikasi. Dengan false, plugin menampilkan gambar splash Anda ketika tersedia dan kembali ke abu-abu.
• privacyModeOnActivityHidden Pengamanan mengontrol apa yang ditampilkan ketika aktivitas Anda disembunyikan oleh sesuatu lain, misalnya prompt biometrik sistem: 'none' (default), 'dim' atau 'splash'.
• context preventScreenshots Apakah Anda ingin menggunakan alternatif lain? FLAG_SECURE Ditambahkan sementara proteksi aktif. Untuk memungkinkan pengambilan screenshot di satu layar, panggil disable() sebelumnya enable() sebelumnya dan

iOS

• Saat aplikasi resign aktif, plugin menambahkan lapisan overlay sehingga snapshot switcher aplikasi tidak menampilkan konten Anda.
• blurEffect: 'light' atau 'dark' menggunakan blur asli. 'none' (tetapkan default) menampilkan layar peluncuran Anda ketika tersedia, jika tidak maka latar belakang sistem.
• 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

Implementasi web hanya mengikuti flag yang diaktifkan sehingga aplikasi code Anda dapat berjalan di mana saja. Browser tidak dapat menyembunyikan pratinjau tab atau menghalangi tangkapan layar.

Gabungkannya dengan biometrik

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 menutup konten sementara Android biometrik sedang menampilkan prompt.

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

Lihatlah plugin biometrik native untuk pengaturan dan pengelolaan kesalahan.

The official plugin dan plugin Capgo

Tim Capacitor juga menerbitkan @capacitor/privacy-screen dengan API yang sangat mirip (enable, disable, isEnabled dan opsi platform yang sama). Plugin Capgo menjaga API dan menambahkan:

• enabled: true di konfigurasi Capacitor , sehingga perlindungan aktif sebelum kode JavaScript berjalan. Plugin resmi hanya diaktifkan dari kode JavaScript.
• Penggambaran konten yang aman di iOS saat diaktifkan, yang terdokumentasi sebagai bagian dari perilaku plugin, selain overlay pengganti aplikasi.
• getPluginVersion() untuk diagnostik.
• Implementasi web yang menjaga flag diaktifkan, sehingga code yang sama berjalan di preview browser.

Jika Anda sudah menggunakan plugin resmi, perubahan ke plugin ini hampir hanya perubahan import.

Detail UX yang berpengaruh

• Jangan blokir tangkapan layar di seluruh tempat tanpa alasan. Tambahan screenshot untuk bukti pembayaran, nomor konfirmasi, dan pengaturan. Lindungi layar dengan data sensitif, bukan aplikasi seluruhnya, kecuali kebijakan keamanan Anda memerlukan.
• Pertahankan pengguna. Jika seseorang mencoba mengambil tangkapan layar di Android dan mendapatkan gambar hitam, catatan singkat di pusat bantuan Anda dapat mengurangi tiket dukungan.
• Uji coba berbagi layar. Video panggilan dan casting diblokir di Android ketika FLAG_SECURE Pengaturan telah diatur. Jika aplikasi Anda memiliki alur "berbagi layar dengan dukungan", matikan perlindungan untuknya.
• Periksa aksesibilitas. Pembaca layar masih berfungsi dengan FLAG_SECURETapi uji coba dengan TalkBack dan VoiceOver juga.

Daftar periksa pengujian.

1. Buka layar sensitif, pergi ke pengaturan aplikasi. Konten harus disembunyikan di kedua platform.
2. On Android, cobalah untuk mengambil screenshot dan merekam layar. Keduanya harus berwarna hitam atau diblokir.
3. Trigger biometrik dan periksa latar belakang.
4. Kembali ke layar sensitif ke layar normal. Proteksi harus berhenti jika Anda menggunakan mode per-layar.
5. Bunuh dan relaunch aplikasi. Dengan enabled: true konfigurasi di dalamnya, snapshot pertama harus dilindungi.
6. Uji coba di iPad dengan Fitur Split View dan Slide Over. Aplikasi mungkin tetap terlihat meskipun tidak aktif.

Troubleshooting

Isi layar masih menampilkan konten di iOS. Anda telah mengaktifkan proteksi setelah aplikasi sudah berada di latar belakang, atau hanya pada beberapa rute. Gunakan opsi konfigurasi untuk proteksi aplikasi secara keseluruhan.

Layar hitam di Recent di Android daripada splash. Set dimBackground: false Set dan pastikan gambar splash Anda ada, jika tidak plugin akan kembali ke keadaan dimming.

Layar tangkapan masih berfungsi di Android. Periksa isEnabled()Bagian lain dari aplikasi Anda mungkin memanggil disable() Pengamanan hilang setelah pembaruan OTA.

Nilai konfigurasi adalah asli. Jika Anda mengubah Nilai konfigurasi adalah asli. Jika Anda mengubah plugins.PrivacyScreen in capacitor.config.tsKirim sebuah build toko baru. enable() dengan disable() perubahan pada panggilan JavaScript Anda dapat dilakukan dengan update Capgo secara langsung.

Kerja Keamanan Terkait

Akan ada layar privasi di dalam daftar checklist keamanan ponsel. Perlu juga memeriksa penyimpanan yang aman, penguncian sertifikat, dan pengenalan akar root. Capgo memiliki plugin untuk penguncian SSL dan pengenalan akar root dan pengenalan jailbreak, dan artikel kami tentang aturan privasi Apple untuk aplikasi Capacitor mengulas sisi tinjauan. Pilihan plugin lengkap ada di dokumen layar privasi.