Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

?id=3ac62799-5f55-4315-980e-5ff381238b39

Proteger y hacer más ágil tu código JavaScript: Minimización y ofuscación

Ofuscacion-Codigo

Minimización

La minimización (o "minificación") del código es un proceso muy común que se utiliza antes del despliegue de una aplicación web, y que sirve para eliminar todo lo superfluo de tu código con el fin de hacerlo lo más compacto posible y que pese muy poco.

Este proceso le quita todos los espacios innecesarios, cambios de línea, tabuladores, comentarios, etc... y queda un código bastante difícil de leer, pero que ocupa mucho menos y se descarga más rápido desde el servidor.

Para conseguir esto hay que usar algún programa específico. Existen muchos, pero el más conocido y potente es Uglify.

Lo más habitual es usar alguna herramienta de automatización de código como Grunt o Gulp que ya disponen de plugins específicos para hacer uso de Uglify (y otros minificadores) de manera automática cuando queramos desplegar.

Muchas herramientas de escritura de código e IDEs (entornos de desarrollo integrados) disponen de plugins para realizar esta operación directamente desde el editor. Por ejemplo Visual Studio ofrece la función de minimizar scripts directamente en el botón derecho si instalamos la herramienta gratuita Web Essentials (que es indispensable y ofrece una tonelada de funcionalidad para desarrolladores web). En Sublime Text también hay un plugin para esto... Casi todas las herramientas lo tienen...

Por cierto, es muy fácil hacer que el código minificado se vuelva a ver como estaba. Para ello solo tenemos que usar las herramientas del desarrollador de cualquier navegador.

Si vamos a las herramientas del desarrollador de cualquier navegador (pulsando F12) y vamos al código fuente de la página minimizada en cuestión, todos ellos tienen un botón "Prettify" para formatearlo de modo legible. Suele ser un icono con unas llaves que está en la pestaña de código fuente.

Por ejemplo, si vamos a Google y vemos sus scripts están minimizados (y muchos también ofuscados). Este es el aspecto de uno de ellos en Chrome:

image

Como vemos, es muy complicado de leer. Sin embargo si pulsamos sobre el botón de las llaves de la parte de abajo, lo podemos ver de manera legible inmediatamente:

image

Lo mismo ocurre en los demás navegadores:

Firefox:

image

Internet Explorer:

image

Muchos editores de código tienen esta funcionalidad integrada también.

Así que no utilices la minifcación como modo de ocultar lo que hace tu código, porque no vale para nada. La minimización sirve exclusivamente para hacer el código más ágil a la hora de la descarga desde el servidor.

Si lo que quieres es proteger tu código entonces lo que necesitas es la...

Ofuscación

Por otro lado está la ofuscación.

El proceso anterior reduce el tamaño del código y dificulta su lectura, pero no impide ver el código original y no impide tampoco que cualquier pueda depurarlo fácilmente, e incluso reutilizarlo.

El proceso de ofuscación va un paso más allá y además de lo anterior, hace cambios en el código para hacer realmente difícil depurarlo y reutilizarlo. El objetivo es que no nos lo copien o por lo menos ponérselo muy difícil.

Para ello se llevan a cabo múltiples operaciones, como cambio de nombre a variables y funciones, recodificación de cadenas, sustitución de parte del código por otro equivalente pero más complejo... Incluso hay algunos ofuscadores que permiten crear ciertas figuras con el código jugando con los espacios en blanco:

image

Uglify también hace eso con el código JavaScript si usas la opción correspondiente. Otras herramientas conocidas son:

  • YUI Compressor: es una aplicación Java creada y mantenida por Yahoo!. Conociendo el estado de la empresa bájalo pronto porque cualquier día desaparece.
  • JavaScript Obfuscator: es una app on-line muy profesional y avanzada con una capa gratuita muy generosa.
  • JSScrambler: una opción comercial muy potente.

Aquí dejo también una presentación muy interesante sobre las técnicas utilizadas en ofuscación de código JavaScript, y también cómo se pueden tratar de vencer.

La ofuscación también tiene sus problemas, como que es más difícil depurar tus aplicaciones en vivo, una vez están en producción, se pueden confundir con código malicioso por parte de antivirus o rastreadores de buscadores (el código malicioso normalmente va ofuscado), puede dar problemas con algunas construcciones (como eval o with) etc... Así que hay que usarlo con sabiduría.

En el mundo actual, totalmente orientado al Open Source, cada vez tiene menos interés la ofuscación, pero conviene conocerla por si la necesitamos de verdad alguna vez.

Fecha de publicación:
José Manuel Alarcón Fundador de campusMVP, es ingeniero industrial y especialista en consultoría de empresa. Ha escrito diversos libros, habiendo publicado hasta la fecha cientos de artículos sobre informática e ingeniería en publicaciones especializadas. Microsoft lo ha reconocido como MVP (Most Valuable Professional) en desarrollo web desde el año 2004 hasta la actualidad. Puedes seguirlo en Twitter en @jm_alarcon o leer sus blog técnico o personal. Ver todos los posts de José Manuel Alarcón
Archivado en: Desarrollo Web | Herramientas

¿Te ha gustado este post?
Pues espera a ver nuestra newsletter...

Suscríbete a la newsletter

La mejor formación online para desarrolladores como tú

Comentarios (9) -

Roy Sillerico
Roy Sillerico

La pregunta del millon, un js que este ofuscado por cualquiera de los métodos, como puedo desofuscarlo? que pasa si pierdo mi js original y solo tengo el ofuscado como trabajo sobre el? Agradeceria mucho que me aclares esta duda. Saludos cordiales.

Responder

José Manuel Alarcón
José Manuel Alarcón

Hola Roy:

Hombre, no deberías perder jamás tu código original, porque la ofuscación se hace con un proceso posterior a la creación del programa, que genera archivos aparte. Además, incluso aunque trabajes solo, es casi indispensable que utilices un sistema de control de código, por lo que jamás perderías el código.

Aún así: si pierdes el código original poco puedes hacer para recuperarlo porque aunque lo aclares un poco (las propias herramientas del desarrollador de los navegadores te lo permiten hacer sin nada especial) perderás todos los nombres de variables y funciones, los comentarios... Seguiría siendo muy complicado seguir el código...

Saludos.

Responder

Romel Rivera
Romel Rivera

Hola José, interesante post gracias por darte el tiempo a publicar. Una duda, ¿Que metodos de ofuscación son compatibles con una aplicacion ASP? Gracias de antemano.

Responder

José Manuel Alarcón
José Manuel Alarcón

Hola Romel:

Todas son compatibles con ASP.NET, pues esta ofuscación es en el lado cliente (JavaScript) y ASP.NET es lado servidor, por lo que se limita, como mucho, a referenciar alguno de estos scripts para enviarlo al cliente.

Eso o no he entendido bien tu pregunta.

Saludos.

Responder

existe Closure Compiler como libreria para c#?? estaria bien hacer una aplicacion que le pase un directorio y ofusque los js.

Responder

Cordial saludo. Muchos ofuscadores utilizan el cambio del nombre de las variables, por ej. "salario_neto" por "s", pero algunos ofuscadores adicionalmente generan un nombre que comienza por "_0x" (creo que seria hexadecimal). Mi pregunta es: cómo se transforma una cadena texto a una notación hexadecimal, octal, etc. que pueda ser interpretada como variable por javascript? Este código original:
function verKeysValues ()  {
  for  (var key in localStorage)  {
    var valores=localStorage.getItem(key);
    console.log(valores)
  }
}
es convertido en:
function verKeysValues ()  {
  for (var _0x58b328 in localStorage)  {
    var _0x3cc029=localStorage[_0x3dc2('0x0')](_0x58b328);
    console[_0x3dc2('0x1')](_0x3cc029);
  }
}
a través del enlace: https://obfuscator.io/
Nota: solo contemplé la parte del codigo ofuscado que importa y lo organicé un poco para resumir mi pregunta).
Donde pude analizar que la variable "key" corresponde a "_0x58b328" y la variable "valores" a "_0x3cc029"
Que tipo de conversión se hizo? como se hace de tal forma que javascript la interprete correctamente?
Agradecería mucho su colaboración y asesoría.

Responder

José Manuel Alarcón
José Manuel Alarcón

Hola César:

No conocía esa pagina. Me la apunto, así como el proyecto Open Source en el que se basa.

Esas variables a las que haces mención son nombre aleatorios que se generan de esa manera (para parecer hexadecimales) y se sustituyen por los nombre s originales para ofuscar más el código y hacer más difícil el seguimiento. Pero se trata de nombres aleatorios. Es decir, no es que se generen a partir del nombre original. De hecho puedes verlo fácilmente en el código fuente del proyecto. En concreto en este archivo "HexadecimalIdentifierNamesGenerator.ts" escrito en TypeScript:

github.com/.../...cimalIdentifierNamesGenerator.ts

El método generate() que hay en ese fragmento es el que se encarga y devuelve la variable precedida por un guión bajo, ya que en JavaScript los nombres de las variables no pueden empezar por números y así se aseguran de que no es el caso.

Saludos!

Responder

Cordial saludo. Primero que todo, gracias por tu asesoria.

Es cierto, como esas cadenas comienzan por una raya baja (_) simplemente son nombres de variables aleatorias que luego se sustituyen, lo cual lo confirmaste con "HexadecimalIdentifierNamesGenerator.ts".

Por otro lado, yo descargué todo el proyecto (https://obfuscator.io) e intenté ajustar y/o configurar las librerías para hacerlo funcionar de manera local en modo offline pero no he podido, solamente genera el código ofuscado si se hace directamente en la página de ellos, es decir, modo online. Si con tus conocimientos y experiencia profesional puedes configurar ese proyecto para que funcione de manera offline, te agradecería mucho me compartieras un ejemplo sencillo de la configuración y uso de esas librerías.

Muchas gracias por tu atención y colaboración. Saludos desde Colombia.

Responder

José Manuel Alarcón
José Manuel Alarcón

Hola de nuevo:

Si te fijas, esa página es tan solo la versión web de este proyecto (lo dice en la primera línea): github.com/.../javascript-obfuscator y este proyecto tiene versiones para el navegadsor, Webpack y un montón de bundlers y task managers máas, y tiene una versión para Node.js. Además dispone de una versión para uso desde línea de comandos. Te lo explica aquí:

github.com/.../javascript-obfuscator#cli-usage

Por lo tanto lo único que tienes que hacer es instalarlo globalmente con npm:

npm i -g javascript-obfuscator

(obviamente, tienes que tener Node.js instalado)

y luego ya lo puedes usar tal  y como explica ahí:

javascript-obfuscator archivo.js --output aechivo-ofuscado.js

con opciones adicionales si las necesitas.

Está todo explicado en el documento del proyecto de Github.

Por otro lado ten en cuenta que, como indican ahí (github.com/.../javascript-obfuscator), el mero hecho de usar este programa hará que tu código ocupe mucho y más y que pueda perder entre un 50% y un 100% de rendimiento (el doble de lento). Si quieres usar al más "estándar" y sin problemas graves de rendimiento usa Uglify-JS, que es lo que usa todo el mundo: https://www.npmjs.com/package/uglify-js

Saludos.

Responder

Pingbacks and trackbacks (1)+

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.