¿Cuándo y por qué debes ofuscar tu código JavaScript?

Servir un archivo JavaScript sin ofuscación, simplemente significa que el código en el archivo será legible por cualquiera. Entonces, si esa persona entiende JavaScript, tu código fuente es público ahora. Entonces, si el código JavaScript funciona sin interacción con el servidor, alguien podría simplemente descargar el HTML de tu página, los recursos (JS y CSS) y obtendrá el mismo resultado localmente. Entonces, si el código también es legible, esta persona podría robar tu trabajo y modificarlo a su antojo.

Considera el siguiente ejemplo de JavaScript ( example.js). El código es fácilmente legible por alguien que entienda JavaScript, tenemos un objeto de usuario dentro de una función y hay un objeto público con métodos disponibles globalmente en window. En este caso, uno de los métodos permite modificar el nivel de usuario directamente proporcionando su nuevo nivel como primer argumento:

(function(){
    let user = {
        level: 2,
        username: "OrangeJuice"
    };

    window.helpers = {
        updateUserLevel: function(newLevel){
            user.level = newLevel;
        },
        getUser: function(){
            return user;
        }
    };
})();

Ahora, considera el mismo código ofuscado con este ofuscador en línea de JavaScript con un nivel de ofuscación predeterminado:

const _0x1fae = ['1657105ujfQrT', '783669zubyer', '2nExDeM', '4643ShsyfD', '658462ySUEuO', 'OrangeJuice', 'helpers', '343VmTHdZ', 'level', '1pimDeL', '43499Rqvyyb', '5039785gBYsCy', '515042fRMLUY'];
const _0x536b = function(_0x2e032f, _0x335d22) {
    _0x2e032f = _0x2e032f - 0xc3;
    let _0x1fae27 = _0x1fae[_0x2e032f];
    return _0x1fae27;
};
(function(_0x38eafd, _0x14ce8f) {
    const _0x1bb8d6 = _0x536b;
    while (!![]) {
        try {
            const _0x2d21cf = parseInt(_0x1bb8d6(0xc9)) * -parseInt(_0x1bb8d6(0xcd)) + parseInt(_0x1bb8d6(0xc7)) + parseInt(_0x1bb8d6(0xc5)) * -parseInt(_0x1bb8d6(0xc8)) + -parseInt(_0x1bb8d6(0xca)) + parseInt(_0x1bb8d6(0xcf)) * -parseInt(_0x1bb8d6(0xc6)) + parseInt(_0x1bb8d6(0xc3)) + parseInt(_0x1bb8d6(0xc4));
            if (_0x2d21cf === _0x14ce8f) break;
            else _0x38eafd['push'](_0x38eafd['shift']());
        } catch (_0x4bd5f4) {
            _0x38eafd['push'](_0x38eafd['shift']());
        }
    }
}(_0x1fae, 0xe2bf1), function() {
    const _0x1b84be = _0x536b;
    let _0x2b2698 = {
        'level': 0x2,
        'username': _0x1b84be(0xcb)
    };
    window[_0x1b84be(0xcc)] = {
        'updateUserLevel': function(_0x3c3c76) {
            const _0x1b5786 = _0x1b84be;
            _0x2b2698[_0x1b5786(0xce)] = _0x3c3c76;
        },
        'getUser': function() {
            return _0x2b2698;
        }
    };
}());

Sin saber cómo se ve el código original, será difícil para el que lea identificar que hay un objeto en el objeto window nombrada helpers. Como se mencionó, la característica especial de los ofuscadores es que el código funciona de todos modos como se esperaba, si inyectas el código en la consola, deberías poder interactuar con el código como el original.

Ventajas de ofuscar JS

  • Evita que las personas copien o modifiquen tu código sin autorización.
  • El JavaScript ofuscado será mucho más grande y difícil de entender. La mayoría de los ofuscadores utilizan el aplanamiento de flujo de control, una técnica de ofuscación que divide los bloques básicos del código fuente como bucles y ramas condicionales y los coloca dentro de un solo bucle infinito con una declaración de cambio, lo que hace que el código sea más difícil de seguir.
  • Funcionalidad exacta, no porque el código sea diferente, se comportará de manera diferente.
  • Protección de depuración, útil si no deseas que las personas simplemente abran la consola para ver qué está pasando con el JavaScript.

Desventajas de ofuscar JS

  • Aunque la salida de JavaScript es más difícil de leer, esto no significa que sea imposible. Si alguien se toma el tiempo, la dedicación y los conocimientos necesarios para leerlo, al final lo hará.
  • La velocidad de tu código puede verse afectada especialmente cuando se usa un alto nivel de ofuscación.
  • El tamaño de tu código también puede aumentar drásticamente, lo que puede afectar los tiempos de carga de tu página web. Aunque generalmente, si usas GZIP para entregar sus archivos, como gran parte del código es repetitivo, puede terminar bien comprimido.

¿Cuándo debes ofuscar tu código JavaScript?

La condición principal para usar un ofuscador es que el código JavaScript que se puede obtener públicamente no debe ser leído por nadie. Lo sé, es difícil teniendo en cuenta que servir JavaScript desde tu servidor lo hace público inmediatamente, por lo que lo mínimo que podemos hacer es ofuscarlo. Hay algunos ejemplos de la vida real en los que tu JavaScript debe ofuscarse obligatoriamente:

Proteje tu tema en Themeforest

Dentro de un mercado importante de Plantillas de sitios web, es importante proteger tu trabajo. En Themeforest, es necesario tener un sitio web que muestre una vista previa de la plantilla que estás intentando vender. Esto significa que servirás HTML, CSS y JS de tu trabajo. Entonces, si no ofuscas tu JavaScript, CUALQUIERA podría simplemente descargar los recursos de la vista previa de tu sitio web y trabajar con eso sin comprar su plantilla. Especialmente, si eres lo suficientemente ingenuo como para servir los mismos recursos que incluyes en tu plantilla.

No publiques una vista previa de tu tema en ThemeForest sin ofuscar su código fuente. Algunos ofuscadores también ofrecen la posibilidad de bloquear su JavaScript en un dominio. Esto significa que si tu código no se ejecuta desde tusitiodeprueba.com, el código generará una excepción, lo que evitará que se ejecute (perfecto para esta situación).

Proteje los juegos de JavaScript en el navegador

Si desarrolla videojuegos en el navegador con cualquier motor de juego de JavaScript , seguramente querrá proteger el código para que no lo lean los script kiddies o alguien que esté tratando de romper las reglas de su juego. Seguramente será difícil de entender, especialmente porque el código de un juego es bastante complejo y más grande que cualquier código JavaScript normal que se ejecuta en un sitio web.

¿Cómo ofuscar su código JavaScript?

Existen múltiples soluciones para ofuscar tu código, dependiendo de sus necesidades, puede:

  • Ofuscar JavaScript en línea : el sitio web JavaScriptObfuscator.dev te permite ofuscar su JavaScript en línea, simplemente pega o selecciona varios archivos directamente desde tu dispositivo y obtendrás la versión ofuscada. La ventaja de este sitio web es que tiene una versión incorporada de la biblioteca javascript-ofuscator en la web. Esto significa que tus archivos no se cargan en ningún lugar, están ofuscados con la potencia de tu propio dispositivo.
  • Integre la ofuscación con la tarea de construcción : hoy en día la mayoría de la gente usa gulp, Webpack o cualquier paquete para mantener su código unificado. Puede integrar como último paso, la ofuscación de los archivos de salida generados por su empaquetador (después del minificador si usa uno, de lo contrario, parte de la protección puede eliminarse de la ofuscación como un código muerto). Puede hacerlo con el módulo javascript ofuscador, y hay plugins para la herramienta que utilice: webpack-Ofuscador ,  trago-javascript-Ofuscador ,  y  ronco-contrib-Ofuscador . Escribimos un tutorial sobre cómo ofuscar su código JavaScript con Node.js aquí .

Si conoces otra ventaja o desventaja de usar un ofuscador para proteger tu código JavaScript, hazlo saber en el cuadro de comentarios.

Esto podria interesarte

Conviertete en un programador más sociable