Ofuscar JavaScript, ¿qué usos tiene?

Si llevas algo de tiempo desarrollando para la web o como SEO seguramente te has topado con el término «ofuscación de JavaScript«. Puede que lo hayas escuchado como una medida de seguridad, una técnica para proteger código, como una manera de mejorar el rendimiento o como más nos afecta a los SEOs para optimizar el link juice de nuestra web.

Pero, ¿qué significa exactamente ofuscar JavaScript y para qué sirve realmente? Vamos a desgranar esto con calma.

¿Qué es la ofuscación?

La ofuscación es el proceso de transformar el código fuente en una versión que, aunque sigue funcionando igual, es mucho más difícil de entender para los humanos. El objetivo principal es hacerlo menos legible, especialmente para quien intenta copiar o manipular tu código sin permiso.

Imagina que escribes un código claro y bien estructurado, lleno de comentarios útiles y nombres de variables como precioTotal o calcularDescuento. Todo muy bonito y comprensible. Ahora, después de ofuscarlo, ese mismo código puede terminar con nombres como a, b, c y sin ningún tipo de comentario. Para una persona que lo vea por primera vez, ese código será prácticamente indescifrable.

Ofuscación en Base64

<script>
  var url = atob("aHR0cHM6Ly93d3cudmlzaWJpbGlkYWRvbjAuY29t");
  var text = atob("VmlzaWJpbGlkYWRvbg==");
  document.write('<a href="' + url + '">' + text + '</a>');
</script>

Ofusación hexadecimal

<script>
  var link = '\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x77\x77\x77\x2E\x76\x69\x73\x69\x62\x69\x6C\x69\x64\x61\x64\x6F\x6E\x2E\x63\x6F\x6D\x22\x3E\x56\x69\x73\x69\x62\x69\x6C\x69\x64\x61\x64\x6F\x6E\x3C\x2F\x61\x3E';
  document.write(link);
</script>

¿Por qué alguien querría hacer esto?

La motivación principal es la protección del código. Aunque JavaScript se ejecuta en el navegador del usuario, y eso significa que es técnicamente accesible, hay quienes quieren dificultar al máximo que otros entiendan o reutilicen ese código. Y aquí entran varios casos de uso interesantes:

📌 Optimizar el Link Juice de nuestra web

Aunque podemos hacer uso de la etiqueta nofollow, una medida más «drástica» es simplemente hacer que los crawlers NO vean esos enlaces, y esto lo conseguimos gracias a la ofuscación.

Ejemplo:

Ofuscación en Base64:

<a href="https://www.visibilidadon.com">Visibilidadon</a>

<script>
  var url = atob("aHR0cHM6Ly93d3cudmlzaWJpbGlkYWRvbjAuY29t");
  var text = atob("VmlzaWJpbGlkYWRvbg==");
  document.write('<a href="' + url + '">' + text + '</a>');
</script>

📌 Proteger la propiedad intelectual

Imagina que has creado una aplicación web que hace algo novedoso, o que has invertido horas en un algoritmo complejo. Lo último que querrías es que alguien copie ese código tal cual y lo use en su propio proyecto. La ofuscación, si bien no es invulnerable, pone una barrera importante. No evita que el código se vea, pero sí que sea fácil de interpretar o reutilizar.

📌 Evitar ataques maliciosos

Los scripts maliciosos no siempre vienen del lado del atacante. A veces, los atacantes exploran el código JavaScript de una web para encontrar puntos débiles, como rutas de API, funciones sensibles o mecanismos de validación. Si el código está ofuscado, encontrar esas piezas se vuelve mucho más complicado. Es decir, estás dificultando el trabajo del atacante.

Eso sí, hay que tener claro que ofuscar no reemplaza otras medidas de seguridad. Es un complemento, no una solución mágica.

📌 Reducir el tamaño del archivo (a veces)

En algunos casos, al ofuscar se pueden reducir ligeramente los archivos JavaScript. Esto ocurre porque los nombres de las variables y funciones se acortan y se eliminan espacios, saltos de línea y comentarios. Aunque para eso también existen herramientas específicas como minificadores (por ejemplo, Terser o UglifyJS), muchos procesos de ofuscación incluyen esa funcionalidad.

📌 Controlar el uso no autorizado de funciones

En ciertas aplicaciones, especialmente las que se distribuyen como widgets embebidos o librerías, es útil dificultar el acceso directo a ciertas funciones o métodos internos. Ofuscando esos nombres y estructuras, se limita el riesgo de que otros programadores hagan uso indebido de partes del código que no deberían tocar.

¿Vale la pena ofuscar siempre?

Depende. Si estás desarrollando algo de uso interno, o un proyecto sin secretos, puede que no tenga sentido ofuscar. Pero si estás construyendo una solución que se expone públicamente en la web, y que contiene lógica valiosa o sensible, es probable que te convenga aplicar alguna capa de ofuscación.

Ten en cuenta que ofuscar puede complicar el mantenimiento del proyecto. Si ofuscas directamente el código fuente (en lugar de hacerlo en el proceso de build), luego será difícil depurarlo o hacer cambios. Lo ideal es tener una versión legible para trabajar y generar automáticamente la versión ofuscada para producción.

¿Y se puede desofuscar?

En muchos casos, sí. Hay herramientas y técnicas que permiten desofuscar código JavaScript, especialmente si la ofuscación no es muy avanzada. De hecho, existen incluso extensiones de navegador y sitios web que intentan revertir la ofuscación. Pero lo importante es que el proceso requiere tiempo y habilidad, lo que sirve como disuasivo para muchos.

Por eso se habla de «seguridad por oscuridad»: no es una barrera infranqueable, pero sí una forma de hacer más difícil el camino.

Herramientas para ofuscar JavaScript

Hoy en día hay muchas opciones para hacerlo, tanto en línea como integradas en entornos de desarrollo. Algunas de las más utilizadas son:

Javascript Obfuscator (https://obfuscator.io/)

• UglifyJS
• Terser
• Babel Minify (anteriormente babel-minify)

Muchas de estas herramientas permiten personalizar el nivel de ofuscación: desde simplemente cambiar los nombres de las variables hasta alterar completamente la estructura del código.