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.

1611913397418.gif

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 🤪