Proteger y hacer más ágil tu código JavaScript: Minimización y ofuscación
Men? de navegaci?nMen?
Categorías

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

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.

José Manuel Alarcón Director 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. Puedes seguirlo en Twitter en @jm_alarcon o leer sus blog técnico o personal. Ver todos los posts de José Manuel Alarcón

No te pierdas ningún post

Únete gratis a nuestro canal en Telegram y te avisaremos en el momento en el que publiquemos uno nuevo.

Archivado en: Desarrollo Web | Herramientas

Comentarios (5) -

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

Pingbacks and trackbacks (1)+

Agregar comentario