Ofuscación de Código

Hay en ocasiones que queremos que nuestro código no sea fácil de leer y es por ello que puede que queramos que este sea lo más difícil posible de leer, a esta acción le llamamos ofuscación de Código.

Esto claro, esta que no es para que otros programadores no puedan ver tu código, de hecho lo puedes hacer, aunque es una cagada hacer esto.

Claro que la ofuscación de código no se usa la mayor parte del tiempo para que otros programadores no puedan leer bien nuestro código, esta se usa para que usuarios mal intencionados no puedan hackear nuestra página.

En la parte que se usa generalmente es en la parte donde queda código expuesto al usuario, por ejemplo el JavaScript que se encuentra del lado del cliente.

Tenga en cuenta que debemos dejar que otros programadores, puedan trabajar con el código también.

// Paste your JavaScript code here
function hi() {
  console.log("Hello World!");
}
hi();

(function(_0xdd382f,_0x168bb2){var _0x5cde2b=_0x5017,_0x51f63d=_0xdd382f();while(!![]){try{var _0x5f0580=parseInt(_0x5cde2b(0x12e))/0x1+parseInt(_0x5cde2b(0x135))/0x2+-parseInt(_0x5cde2b(0x133))/0x3+parseInt(_0x5cde2b(0x134))/0x4+-parseInt(_0x5cde2b(0x130))/0x5*(-parseInt(_0x5cde2b(0x131))/0x6)+parseInt(_0x5cde2b(0x132))/0x7*(parseInt(_0x5cde2b(0x12d))/0x8)+-parseInt(_0x5cde2b(0x12f))/0x9;if(_0x5f0580===_0x168bb2)break;else _0x51f63d['push'](_0x51f63d['shift']());}catch(_0x5dde84){_0x51f63d['push'](_0x51f63d['shift']());}}}(_0x1928,0xd2943));function hi(){var _0xfd4634=_0x5017;console['log'](_0xfd4634(0x12c));}hi();function _0x5017(_0x4cca11,_0x171ab3){var _0x192805=_0x1928();return _0x5017=function(_0x501713,_0x164ab){_0x501713=_0x501713-0x12c;var _0x2fc1ec=_0x192805[_0x501713];return _0x2fc1ec;},_0x5017(_0x4cca11,_0x171ab3);}function _0x1928(){var _0x3cddf0=['Hello\x20World!','3032iPYxaO','1072581Xahubi','31543101NBcVbt','2443185cliLyy','6AShYcB','26033upqCQs','2064495PugwVO','3215600LeoOsy','2561732tlhbgB'];_0x1928=function(){return _0x3cddf0;};return _0x1928();}

¿Entonces como hacemos?

Para que otro programador pueda leer nuestro código, necesitaremos la versión sin ofuscar y para el usuario la versión ofuscada. En muchos frameworks vemos como manejan el código, los programadores y el código disponible para el usuario.

Por poner un ejemplo, en Laravel tenemos la carpeta assets y public. Siendo la carpeta public accesible por todo los usuarios y assets en lo que sería el localhost.

¿Ok, entiendo y como el usuario interactúa con los archivos de la parte privada?

Si solo public es la parte que el usuario puede entrar, como encuentra que archivos utilizar? al menos esta es la pregunta que puede estar preguntándose.

Pues en Laravel tenemos un index.php el cual manejara nuestra request en public/index.php.

Entonces necesitamos manejar la request que manda el usuario y listo.

Una app en Laravel estaría conformado por las siguientes carpetas y archivos:

La carpeta donde los programadores hacen los archivos JavaScript correspondientes seria resources/assets/js/ tenga en cuenta que en la carpeta assets también estarían los archivos de css

Hay varias maneras en que podemos ofuscar nuestro Javascript, algunas de estas son utilizar Gulp, Grunt, Laravel Mix, Webpack, Rollup con algún paquete.

En npm puede conseguir varios paquetes, uno que se está usando a menudo es https://www.npmjs.com/package/javascript-obfuscator