Cómo usar Jscrambler 4 para proteger la integridad de tu aplicación

En los últimos años, como lenguaje independiente de la plataforma, JavaScript se ha abierto camino hacia una amplia gama de usos, que van desde aplicaciones móviles hasta juegos basados en HTML5 y servidores Node.js. Atrás quedaron los días en que solo usabas JavaScript para efectos especiales y validación de formularios.

Este desarrollo es bueno tanto para los desarrolladores como para los consumidores, que obtienen actualizaciones más rápidas de sus aplicaciones independientemente de la plataforma en la que se encuentren.

Pero también plantea preguntas sobre la seguridad.

¿Cómo podemos asegurarnos de que nuestras aplicaciones funcionen según lo previsto? ¿Cómo hacemos cumplir nuestras licencias? ¿Y qué pasa con la piratería?

En este tutorial, veremos las amenazas más comunes a tus aplicaciones JavaScript y cómo puedes protegerte contra ellas. También veremos los pasos para hacer de Jscrambler 4.0 una parte de tu flujo de trabajo de desarrollo para mantener fácilmente seguras tus aplicaciones JavaScript.

Asegura la comunicación entre tu cliente y el servidor

Como JavaScript se usa principalmente en línea, el lugar natural para comenzar es la conectividad entre la aplicación que se ejecuta en los dispositivos de tus usuarios y tu servidor.

Primero, déjame aclarar esto: no importa qué tan buena protección agregues en el lado del cliente, siempre debes comenzar asumiendo que el cliente puede verse comprometido. Algunos llegan a decir que hay que tratar al cliente como si fuera malintencionado.

Básicamente, la razón de esto es que no importa qué tan bien protejas a tu cliente, la comunicación HTTP entre el cliente JavaScript y tu servidor siempre puede ser alterada, con la ayuda de herramientas de rastreo de solicitudes o incluso clientes personalizados que usan tus protocolos del servidor.

Por lo tanto, si tu aplicación se comunica con un servidor, antes de agregar cualquier otra forma de seguridad del lado del cliente, comienza por proteger tu servidor tanto como sea posible, tal como lo harías cuando usas una interfaz HTML normal.

1. Valida tus datos

Puedes pensar en proteger tu servidor a través de dos conceptos: integridad de los datos y confidencialidad de los datos.

La integridad de los datos significa que los datos de tu aplicación deben seguir siendo precisos y coherentes durante su ciclo de vida. La confidencialidad de los datos significa que los datos de tus usuarios deben permanecer seguros y que terceros nunca deben tener acceso a ellos.

Si bien ya debes realizar la validación de parámetros en el cliente JavaScript, eso no evitará que los piratas informáticos envíen datos mal formados o incluso maliciosos a tu servidor. Después de todo, ¡alguien que busque romper tu servidor probablemente ni siquiera usará tu interfaz de usuario!

Por lo tanto, cuando se trabaja con una aplicación JavaScript, todas las validaciones regulares del lado del servidor, desde escapar de los caracteres HTML hasta verificar que los atributos sean del tipo correcto, aún se aplican.

A veces, los datos enviados tienen el formato correcto, pero no tienen sentido en el estado de la aplicación, por ejemplo, cuando un jugador envía una puntuación increíblemente alta. Puedes proteger tu servidor contra situaciones como estas utilizando comprobaciones de seguridad y colocando la mayor cantidad posible de la lógica de la aplicación en el servidor.

2. Mantén tus datos seguros

Otra parte de la seguridad de la comunicación cliente-servidor es asegurarse de que todos los datos específicos del usuario permanezcan confidenciales y accesibles solo para el usuario autorizado.

El primer paso es usar SSL en toda la comunicación entre tu cliente JavaScript y tu servidor para evitar que otros en Internet espíen los datos pasados entre los dos.

Luego, deberás validar que las solicitudes provengan del usuario correcto. Los detalles sobre la mejor manera de hacerlo dependen de tu aplicación. En las aplicaciones basadas en web, los nonces son una técnica útil, mientras que en el contexto de un juego, la autenticación OAuth podría ser un enfoque más natural.

Solo ten en cuenta que nunca debes almacenar información confidencial como contraseñas o claves de API en tu cliente. Es una buena idea pensar en tu servidor como una API que puede ser utilizada por el cliente JavaScript, pero también por otros clientes en Internet.

No puedes comprobar todo en el servidor

Si bien las comprobaciones mencionadas anteriormente se aplican a todo tipo de aplicación, cuando se agrega más complejidad al cliente, algunas verificaciones se vuelven difíciles de hacer.

En los juegos multijugador, por ejemplo, ejecutar toda la lógica a través de tu servidor funcionará bien siempre que el juego sea simple y solo tengas un número limitado de jugadores. Pero a medida que la base de usuarios activos crece, la carga en el servidor te hará considerar la posibilidad de mover parte del procesamiento al cliente. Lo mismo sucede si la lógica de tu juego es tan compleja que simularla en el servidor consumiría muchos recursos.

Ahí es donde los límites se vuelven confusos.

Si bien la idea de no confiar nunca en el cliente suena bien, en la práctica tendrás que establecer un umbral, decir "esto es lo mucho que confío en mi cliente" y solo realizar comprobaciones de seguridad en el servidor. Si algunas de las acciones del jugador también afectan a otros jugadores, ahí es donde debes involucrar más al servidor, dejando los lugares donde el usuario puede dañar solo su propia experiencia para que el cliente los maneje.

¿Y qué pasa con los muchos casos de uso de JavaScript en los que no tienes un servidor, o donde colocar la lógica de la aplicación en el servidor no tiene sentido, como aplicaciones móviles, reproductores de transmisión HTML5 y aplicaciones de mapas?

Finalmente, es bueno tener en cuenta que no importa qué tan bien protejas tu servidor, tu cliente JavaScript siempre está expuesto. Entonces, a menos que le agregues algún tipo de protección, es muy fácil para un atacante (Man-in-the-Browser o ataques de exfiltración de datos, por ejemplo) obtener acceso a datos confidenciales o modificar la experiencia del usuario.

Protege tu JavaScript

Como lenguaje dinámico, JavaScript se puede modificar en el navegador utilizando herramientas básicas como el depurador integrado del navegador. Si sabes lo que estás haciendo, puedes reemplazar partes del código y cambiar el comportamiento de la aplicación sobre la marcha.

Como vimos anteriormente, debes asegurarte de que los datos no válidos nunca lleguen a la base de datos en tu servidor. Pero algunos cambios son más restringidos que esto. Un plugin de malware puede agregarle nuevos botones a tu aplicación para atraer al usuario a un sitio externo. O el usuario podría hackear el cliente para ver más del juego sin jugarlo.

Cambios como este no romperán toda tu aplicación, pero cambiarán la forma en que el usuario la experimenta. En el caso del malware, esto también puede representar una seria amenaza para la privacidad del usuario.

Debido a que JavaScript es un lenguaje interpretado, esto es imposible de prevenir por completo. Un hacker dedicado siempre encontrará una manera de superar los obstáculos, al igual que un ladrón puede romper cualquier cerradura. Pero podemos hacer que la intrusión sea tan difícil que la mayoría de los usuarios utilizarán los métodos adecuados (como mejorar tu juego) en lugar de piratear la aplicación.

Aquí es donde Jscrambler puede ayudarte.

1. Haz que tu JavaScript sea difícil de hackear

Jscrambler es una plataforma de seguridad JavaScript que tiene como objetivo asegurarse de que las aplicaciones JavaScript se ejecuten de la manera en que fueron desarrolladas.

Para probar Jscrambler, visita su página de inicio y regístrate para una prueba gratuita. Si encuentras que cumple con tus expectativas, más tarde puedes elegir uno de sus planes pagos.

Cuando hayas iniciado sesión, si hay algún texto que diga "Una nueva versión de Jscrambler ya está disponible" en la parte superior de la página, significa que todavía estás viendo la versión anterior. Haz clic en Pruébalo ahora.

Jscrambler 4 organiza tu trabajo en aplicaciones, cada una de las cuales puede constar de uno o más archivos JavaScript. A continuación, verás la pantalla para seleccionar la aplicación en la que quieres trabajar.

Si quieres probar la funcionalidad utilizando una aplicación JavaScript propia, haz clic en Crear aplicación.

Por ahora, sin embargo, elijamos Playground. En este modo, podrás probar todas las transformaciones en un script de ejemplo, mientras que las transformaciones que puedes aplicar a tu aplicación real están limitadas por tu nivel de suscripción.

A la izquierda, verás el Árbol de archivos, una lista de archivos en tu aplicación y un botón Agregar para importar o crear nuevos archivos. En el playground, el botón Agregar está deshabilitado.

A la derecha, hay un menú para elegir las Especificaciones de idioma y el Modo de aplicación para tu aplicación. Jscrambler los usa para garantizar que el código transformado funcione en tu entorno seleccionado, teniendo en cuenta sus limitaciones y posibilidades.

Ahora iremos con ES5 y una Aplicación de navegador web básica.

Haz clic en el nombre del archivo (clock.js) para comenzar a trabajar en él.

El contenido del archivo se mostrará en el medio de la pantalla: el código fuente a la izquierda y la versión transformada por Jscrambler a la derecha.

Luego, selecciona la pestaña Transformaciones de código a la derecha para mostrar una lista de las transformaciones disponibles. Jscrambler te permite elegir las transformaciones que encuentres relevantes para tu código. Incluso puedes usar anotaciones en tu código para cambiar la forma en que se transforma parte del código. Eso puede ser útil en bloques de código críticos para el rendimiento, por ejemplo, funciones de renderizado en juegos.

Para probar las transformaciones, selecciónalas una a la vez.  Luego haz clic en Proteger aplicación en la parte inferior de la ventana para crear una nueva versión de tu código transformado.

Junto al botón, verás un medidor que presenta los efectos de estos cambios en tu código JavaScript.

En el medidor, verás tres iconos, que representan el costo, la resistencia y la potencia (yendo de izquierda a derecha en la captura de pantalla anterior) de las transformaciones que seleccionaste para tu aplicación.

Para comenzar, marca la casilla de verificación frente a Flujo de control y, luego, haz clic en Proteger aplicación.

Control Flow Flattening es una de las nuevas y poderosas transformaciones agregadas en Jscrambler 4. Aplana el flujo de control del script para que resulte difícil para una persona que lee el código seguir la lógica de tu aplicación.

Después, continúa seleccionando algunas opciones de ofuscación más. A medida que agregues más, notarás cómo tu código se vuelve cada vez más difícil de leer y, por lo tanto, editar sin romper su funcionalidad.

Además, cuando vuelvas a hacer clic en Proteger aplicación, incluso sin cambiar la configuración, notarás que el contenido del script protegido cambia cada vez.

Las transformaciones de Jscrambler son polimórficas, lo que garantiza que las transformaciones produzcan un resultado diferente cada vez. De esta manera, incluso si alguien pudiera piratear la versión actual, la próxima vez que ejecute tu código a través de Jscrambler, esos cambios ya no funcionarán.

2. Haz que tu aplicación se proteja por sí misma

Hasta ahora, hablamos sobre formas de asegurarnos de que tu aplicación funcione como se espera evitando que tanto el usuario como los extraños modifiquen tu código fuente. Pero esa no es la única amenaza para tu aplicación de la que debes preocuparte.

A medida que JavaScript se ha vuelto popular en aplicaciones independientes y móviles, la piratería se ha convertido en un problema real también en este ámbito.

Estoy seguro de que todos hemos hecho clic en "Ver código fuente" para aprender cómo hacer un nuevo efecto o truco, y adaptar lo que aprendimos a nuestros sitios web. No es de eso de lo que estoy hablando aquí.

En su lugar, supongamos que creaste un juego móvil popular en HTML5 y JavaScript. Gracias a la portabilidad de JavaScript, puedes usar el mismo código en Android, iOS y otras plataformas, y llegar a un público más amplio sin el trabajo adicional de escribir versiones nativas para cada entorno. Pero hay un problema: ¡cualquiera puede copiar tu código JavaScript, hacer algunas modificaciones y venderlo como propio!

Las transformaciones en el paso anterior ayudan a evitar esto al hacer que el código sea difícil de leer y realizar ingeniería inversa. Además de ellos, Jscrambler agrega trampas de código, funcionalidad que hace que el código se proteja a sí mismo.

Revisemos algunos de ellos.

En Jscrambler, en la lista de transformaciones, encontrarás una sección titulada Bloqueos de código.

Las transformaciones en esta sección le agregan otra capa de seguridad a tu aplicación JavaScript.

Al usarlos, puedes limitar la ejecución de tu código a un conjunto determinado de navegadores, un período de tiempo (útil para demostraciones que no deberían poder ejecutarse después de que finalice el período de vista previa), en un dominio determinado (generalmente el tuyo) y un sistema operativo particular.

Una característica más poderosa para proteger tu código es RASP del lado del cliente (Autoprotección de aplicaciones en tiempo de ejecución). Modifica tu código JavaScript, haciéndolo defenderse de la manipulación en tiempo de ejecución. Por ejemplo, la aplicación dejará de funcionar si alguien intenta abrir el depurador.

Finalmente, en la sección Optimización, selecciona Minificación para minimizar el código y hacer que el archivo sea más pequeño.

Luego, haz clic en Proteger aplicación, seguido de Descargar aplicación para descargar el código fuente y usarlo en tu aplicación.

Jscrambler realiza un seguimiento de tu historial de transformación, por lo que siempre puedes volver a una versión anterior.

3. Usa plantillas para facilitar tu trabajo

Como vimos, configurar tu nivel de protección seleccionando casillas de verificación una por una es sencillo. Pero aún puedes acelerar tu flujo de trabajo agrupando tus combinaciones comunes de transformaciones en plantillas.

Una vez que hayas encontrado un conjunto de transformaciones que te gustaría almacenar para uso futuro, haz clic en Crear plantilla en la parte inferior de la sección Configuración de la aplicación.

Jscrambler te pedirá que le des a tu plantilla un nombre y una descripción.

Escribe algo descriptivo para el futuro y haz clic en Guardar plantilla.

También puedes utilizar una de las plantillas ya disponibles en la pestaña Tus plantillas:

Mueve el puntero del mouse por encima de los nombres de las plantillas para leer más sobre ellos y comprender cuándo tienen sentido. Luego haz clic en ellos para ver qué transformaciones aplican a tu código.

4. Haz de Jscrambler parte de tu flujo de trabajo de desarrollo

Hasta ahora, hablamos sobre algunas formas en que Jscrambler puede ayudarte a proteger tu aplicación utilizando la interfaz de usuario web. Si bien la interfaz es intuitiva, a medida que tu aplicación crece, querrás algo más sencillo.

Además, como mencioné anteriormente, Jscrambler es polimórfico, generando una salida diferente cada vez. Por lo tanto, es útil ejecutar la herramienta de vez en cuando, incluso si no hay cambios en los archivos específicos.

Para hacer esto, veamos la herramienta de línea de comandos de Jscrambler.

Primero, descarga e instala la herramienta de línea de comandos usando npm. En la línea de comandos, escribe:

1

sudo npm install -g jscrambler

Una vez completada la instalación, vuelve a tus aplicaciones en el administrador de Jscrambler.

Ten en cuenta que para usar la herramienta de línea de comandos, deberás usar una aplicación real en lugar del script del playground. Por lo tanto, si aún no tienes una aplicación, crea una ahora.

Después de seleccionar las transformaciones que quieres aplicar, haz clic en el botón de descarga en la esquina superior derecha de la página. Esto descargará tu configuración a tu computadora como un archivo JSON.

Copia el archivo JSON en tu proyecto. No lo comprometas con el control de versiones, ya que el archivo contiene tu clave API y el secreto para usar la API Jscrambler.

Luego, ejecuta el comando jscrambler para ejecutar las transformaciones en tus archivos JavaScript.

Por ejemplo, si solo tienes un archivo, test.js, puedes ejecutar el siguiente comando:

1

$ jscrambler -c jscrambler.json -o test.protected.js test.js 

En el comando, pasaste el archivo JSON que contiene la configuración de tu aplicación mediante el parámetro -c, seguido del archivo de salida (-o test.protected.js) y, finalmente, el archivo JavaScript que quieres proteger.

Para ejecutar la protección de todos los archivos JavaScript en el directorio del proyecto, puedes usar algo como esto:

1

$ jscrambler -c jscrambler.json -o protected/ **/*.js

En este ejemplo, en lugar de un archivo de salida, defines un directorio (protected) donde Jscrambler colocará los resultados de la protección.

Ahora, no tienes que volver a la interfaz de usuario web de Jscrambler cada vez que realices cambios en tus archivos JavaScript. Esto hará que sea más probable que recuerdes el paso y, por lo tanto, mantén tu aplicación segura.

Como mejora adicional, también puedes configurar la tarea Jscrambler para que se ejecute siempre que haya cambios en tus scripts, por ejemplo, usando Grunt. O incluso podría ser una tarea en tu servidor de integración continua, que se ejecuta cada vez que se compromete una nueva versión del código.

Conclusión

Jscrambler proporciona herramientas de vanguardia para dificultar que los crackers, tramposos y malware le inyecten funcionalidades no deseadas a tu aplicación o cambien las variables de tu aplicación. También dificulta que otros copien tu código y lo redistribuyan como propio.

La seguridad es un campo complejo con múltiples amenazas diferentes a considerar. Por lo tanto, cuando tu código JavaScript se comunica con un servidor, la mejor solución es utilizar una combinación de las mejores prácticas de desarrollo del servidor, validación sólida de parámetros y una plataforma de seguridad JavaScript como Jscrambler para hacer que el cliente sea a prueba de manipulaciones. De esta manera, puedes evitar la mayoría de los ataques contra la integridad de tu aplicación que ya están en el cliente y asegurarte de que tus clientes obtengan la experiencia que diseñaste para ellos.

Jscrambler también puede ayudarte a vencer los ataques y fraudes de Man-in-the-Browser (MitB), bots, amenazas de día 0 y APT (amenazas persistentes avanzadas) al detectar los cambios realizados en el DOM y brindarte toda la información que necesitas para detener estos ataques. Para obtener más información, ponte en contacto con support@jscrambler.com.

Para obtener más información sobre Jscrambler, sus nuevas características y las últimas actualizaciones, también puedes visitar el sitio web de Jscrambler.