React Native: Evitar que el usuario pueda tomar capturas de pantalla
La seguridad de nuestras aplicaciones es uno de los temas que a veces se dejan de lado y es un factor importante a tener en cuenta cuando desarrollamos si queremos crear un buen producto.
En este artículo voy a explicar cómo podemos aplicar una medida de seguridad sencilla pero eficaz (al menos en el 99% de los casos porque evitarlo completamente es casi imposible) de cara a que el usuario no pueda tomar una captura de pantalla de nuestra aplicación cuando la abre en segundo plano.
Comenzamos desde un proyecto de React Native orientado a Android e iOS, así que primero explicaré cómo lo he hecho en Android y luego en iOS.
Configuración para Android
Por comodidad aconsejo abrir los ficheros Java desde Android Studio u otro IDE con soporte a Java para manejar sin mayor problema el código.
Vamos a abrir el fichero MainActivity.java
de nuestro proyecto Android. En mi caso está dentro de la carpeta android>app>src>main>java>com>name_project
Una vez abierto, importamos el siguiente módulo:
import android.view.WindowManager;
Y seguidamente, haremos uso del mismo dentro del método onCreate
(que crearemos si no está previamente creado), agregando las siguientes sentencias:
getWindow().setFlags(
WindowManager.LayoutParams.FLAG_SECURE,
WindowManager.LayoutParams.FLAG_SECURE
);
El resultado de nuestro fichero debe ser algo parecido a esto:
package com.name_project;
import android.app.Activity;
import android.os.Bundle;
import com.facebook.react.ReactActivity;
import android.view.WindowManager;
public class MainActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
return "name_project";
}
private static Activity mCurrentActivity;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().setFlags(
WindowManager.LayoutParams.FLAG_SECURE,
WindowManager.LayoutParams.FLAG_SECURE
);
mCurrentActivity = this;
}
public static Activity getActivity() {
return mCurrentActivity;
}
}
Configuración para iOS
Por comodidad aconsejo abrir los ficheros swift desde XCode para manejar sin mayor problema el código.
Vamos a abrir el fichero AppDelegate.swift
de nuestro proyecto iOS. En mi caso está en el raíz de la carpeta ios
Dentro de este fichero y dentro de la clase AppDelegate
vamos a crear dos funciones que directamente, no evitarán que el usuario pueda hacer capturas de pantalla pero lo que haremos será que cuando la aplicación detecte que está en segundo plano, cambiará la pantalla por una vista no visible con fondo negro.
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate, RCTBridgeDelegate {
···
func applicationWillResignActive(_ application: UIApplication) {
self.window?.isHidden = true;
}
func applicationDidBecomeActive(_ application: UIApplication) {
self.window?.isHidden = false;
}
}
Conclusiones
En Android con este método nos aseguramos que directamente, usando las aplicaciones del sistema, el usuario no puede tomar una captura de pantalla ni grabar la misma por lo que tenemos una solución de seguridad rápida y eficaz. Sin embargo, en iOS no tenemos los mismos mecanismos y tenemos que ingeniárnoslas para poder hacer algo parecido. Detectamos el cambio de estado de la aplicación y ocultamos la pantalla.
Esto nos da pie a que, con un poco más de código, podamos tener pantallas customizadas para advertir al usuario de que lo que intenta realizar no está permitido. Es todo cuestión de imaginación y ponerlo en práctica.
Espero que te haya gustado. No vemos por las redes 🤪