Capacitor Privacy Screen: Sembunyikan Konten Aplikasi

Capacitor privacy screen menyembunyikan konten aplikasi saat pengguna membuka app switcher dan, di Android, memblokir screenshot serta screen recording. Tanpa ini, iOS dan Android mengambil snapshot layar terakhir, sehingga saldo bank, rekam medis, atau code sekali pakai tetap terlihat di daftar recent apps. @capgo/capacitor-privacy-screen menambahkan ini dengan satu panggilan atau satu flag konfigurasi, dan memungkinkan Anda melindungi hanya layar yang membutuhkannya.

Apa yang terlihat di app switcher

Saat pengguna keluar dari aplikasi Anda, kedua sistem akan mengambil gambar layar saat ini:

• iOS mengambil snapshot saat aplikasi tidak lagi aktif dan menampilkannya di app switcher, serta sesaat saat aplikasi dijalankan ulang.
• Android menampilkan preview live atau cached di Recents.

Siapa pun yang melirik ponsel akan melihat snapshot itu. Begitu juga orang yang melakukan screen sharing saat panggilan, atau pengguna yang merekam layar untuk tiket support. Screenshot juga tersinkron ke cloud photo library, dan di situlah data sensitif benar-benar bocor.

Aplikasi apa yang membutuhkannya

Ulasan keamanan dan uji penetrasi untuk kategori ini secara rutin menandai perlindungan app switcher yang hilang. OWASP MASVS mencakup pemeriksaan data sensitif yang terekspos melalui UI, dan auditor menguji persis hal ini.

Instal

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

Plugin ini mendukung Capacitor 8 dengan versi 8.x.

Opsi 1: lindungi seluruh aplikasi saat startup

Atur di capacitor.config.ts. Plugin native ini membacanya saat dimuat, sebelum JavaScript Anda berjalan, sehingga snapshot pertama pun tetap terlindungi:

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 hanya dibaca dari konfigurasi Capacitor, ini bukan opsi runtime.

Opsi 2: lindungi layar tertentu

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 ini ke router Anda agar setiap path masuk dan keluar terlindungi. Contohnya dengan Vue Router:

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

Dengan Angular, gunakan guard atau NavigationEnd subscription. Dengan React Router, hook di komponen layout Anda bisa dipakai. Yang penting, navigasi back, deep link, dan perpindahan tab melewati logika yang sama, kalau tidak layar sensitif bisa jadi tidak terlindungi.

Apa fungsi tiap opsi

Android

• Proteksi menggunakan WindowManager.LayoutParams.FLAG_SECURE. Saat aktif, screenshot dan screen recording akan diblokir dan preview Recents akan disembunyikan.
• dimBackground: true menampilkan overlay redup di app switcher. Dengan false, plugin menampilkan splash drawable Anda jika tersedia dan fallback ke peredupan.
• privacyModeOnActivityHidden mengontrol apa yang muncul saat activity Anda disembunyikan oleh hal lain, misalnya prompt biometrik sistem: 'none' (default), 'dim' atau 'splash'.
• Opsi lama preventScreenshots sudah deprecated dan diabaikan. FLAG_SECURE selalu diterapkan selama proteksi aktif. Untuk mengizinkan screenshot di satu layar, panggil disable() sebelumnya dan enable() setelahnya.

iOS

• Saat aplikasi tidak lagi aktif, plugin menambahkan overlay agar snapshot app switcher tidak menampilkan konten Anda.
• blurEffect: 'light' atau 'dark' menggunakan native blur. 'none' (default) menampilkan launch screen jika tersedia, jika tidak, background sistem.
• Saat diaktifkan, konten aplikasi juga ditempatkan dalam secure rendering layer. Anggap pemblokiran screenshot di iOS sebagai best effort: Apple tidak menyediakan API resmi untuk memblokir screenshot, dan perilakunya bisa berubah antar versi iOS.

Web

Implementasi web hanya melacak flag enabled agar code Anda berjalan di mana saja. Browser tidak bisa menyembunyikan tab preview atau memblokir screenshot.

Gabungkan dengan biometrik

Pola umum untuk aplikasi perbankan: blur di app switcher, lalu minta Face ID atau sidik jari saat aplikasi dibuka lagi setelah beberapa waktu. Fitur plugin ini privacyModeOnActivityHidden menjaga konten tetap tertutup selama prompt biometrik Android muncul.

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

Lihat plugin biometrik native untuk setup dan error handling.

Plugin resmi dan plugin Capgo

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

• enabled: true di konfigurasi Capacitor, sehingga proteksi sudah aktif sebelum JavaScript berjalan. Plugin resmi hanya bisa diaktifkan via JavaScript.
• rendering konten iOS yang aman saat diaktifkan, yang didokumentasikan sebagai bagian dari perilaku plugin, selain overlay app switcher.
• getPluginVersion() untuk diagnostik.
• Implementasi web yang mempertahankan flag enabled, sehingga code yang sama dapat berjalan di browser preview.

Jika Anda sudah menggunakan plugin resmi, transisinya sebagian besar hanya berupa perubahan import.

Detail UX yang penting

• Jangan blokir screenshot di semua bagian tanpa alasan. User sering mengambil screenshot struk, nomor konfirmasi, dan pengaturan. Lindungi layar berisi data sensitif saja, bukan seluruh aplikasi, kecuali kebijakan keamanan Anda mewajibkannya.
• Beri tahu user alasannya. Jika seseorang mencoba mengambil screenshot di Android dan hasilnya gambar hitam, catatan singkat di help center Anda bisa mengurangi tiket support.
• Tes screen sharing. Video call dan casting diblokir di Android saat FLAG_SECURE diatur. Jika aplikasi Anda punya alur “share screen dengan support”, nonaktifkan proteksi untuk alur itu.
• Cek aksesibilitas. Screen reader tetap berfungsi dengan FLAG_SECURE, tapi tetap uji dengan TalkBack dan VoiceOver.

Checklist pengujian

1. Buka layar sensitif, lalu masuk ke app switcher. Konten harus tersembunyi di kedua platform.
2. Di Android, coba ambil screenshot dan screen recording. Keduanya harus hitam atau diblokir.
3. Picu prompt biometrik dan cek background-nya.
4. Kembali dari layar sensitif ke layar biasa. Proteksi akan otomatis mati jika Anda menggunakan mode per-layar.
5. Kill dan relaunch aplikasi. Dengan enabled: true di config, snapshot pertama harus terlindungi.
6. Uji di iPad dengan Split View dan Slide Over. Aplikasi bisa tetap terlihat saat tidak aktif.

Pemecahan Masalah

Snapshot masih menampilkan konten di iOS. Anda mengaktifkan proteksi setelah aplikasi masuk ke background, atau hanya pada rute tertentu. Gunakan opsi konfigurasi untuk proteksi di seluruh aplikasi.

Layar hitam di Recents pada Android, bukan splash screen. Atur dimBackground: false dan pastikan splash drawable tersedia, jika tidak plugin akan beralih ke mode dimming.

Screenshot tetap berfungsi di Android. Periksa isEnabled(). Bagian lain dari aplikasi Anda mungkin memanggil disable() saat navigasi.

Proteksi hilang setelah update OTA. Nilai konfigurasi bersifat native. Jika Anda mengubah plugins.PrivacyScreen di capacitor.config.ts, rilis build store baru. Runtime enable() dan disable() Pemanggilan di JavaScript Anda dapat diubah dengan Live updates Capgo.

Pekerjaan keamanan terkait

Layar privasi adalah salah satu item dalam checklist keamanan mobile. Perhatikan juga secure storage, certificate pinning, dan root detection. Capgo memiliki plugin untuk SSL pinning dan deteksi root dan jailbreak, dan artikel kami tentang aturan privasi Apple untuk aplikasi Capacitor menangani sisi review. Opsi plugin lengkap ada di dokumentasi Privacy Screen.