BYTEHIDE SHIELD PARA WEBPACK
Webpack Obfuscator
Protege tu bundle de Webpack frente a ingenieria inversa, copia y manipulacion. ByteHide Shield añade la ofuscacion como un paso en tu build de Webpack.
Empezar
Webpack
npm install --save-dev @bytehide/webpack-shield
// webpack.config.js
const ByteHideShieldPlugin = require('@bytehide/webpack-shield');
module.exports = { plugins: [new ByteHideShieldPlugin({ projectToken: 'YOUR_TOKEN' })] };Añade ByteHideShieldPlugin a tus plugins de Webpack con tu project token. Webpack 4 usa @bytehide/webpack4-shield con la misma configuracion.
Guia completa en la documentacionGratis con una cuenta ByteHide
La primera vez que se ejecuta, Shield pide un project token que lo conecta con tu cuenta. El paquete es gratuito.
Consigue tu token gratisComo funciona
Como ofuscar un bundle de Webpack
Webpack empaqueta tu proyecto en los archivos JavaScript que se entregan. Shield protege ese bundle como plugin de Webpack. Tres pasos.
Paso 01
Instala el plugin de Webpack
Añade @bytehide/webpack-shield (o webpack4-shield para Webpack 4) como dev dependency.
Paso 02
Añade el plugin a tu config
Añade ByteHideShieldPlugin a tus plugins de webpack con tu project token.
Paso 03
Compila como siempre
Ejecuta tu build de Webpack. Shield protege la salida del bundle automaticamente.
Por que ofuscar
Por que ofuscar un bundle de Webpack
Webpack empaqueta tu aplicacion en los archivos JavaScript que se entregan al navegador. Lo que haga tu proyecto, el bundle lo contiene, legible.
- El bundle es todo tu frontend en un solo lugarWebpack combina tus modulos en bundles. Esa salida contiene la logica de tu aplicacion, y sin ofuscacion es legible.
- El bundling no protege tu codigoLa minificacion y el bundling hacen el codigo compacto, no seguro. Formatear un bundle minificado restaura la logica legible. La ofuscacion es lo que realmente lo protege.
- Protege el bundle, el artefacto finalEl bundle es lo que reciben los usuarios. Ofuscarlo protege exactamente lo que un atacante inspeccionaria.
Ejemplo
Ve la ofuscacion de Webpack en accion
La ofuscacion se entiende mejor cuando la ves. Aqui tienes un modulo pequeño antes y despues de que Shield proteja la salida del bundle de Webpack.
function validateLicense(key) {
const validKey = 'ByteH1de!2026';
return key === validKey;
}
function getUserPlan(userId) {
const endpoint = 'https://api.bytehide.com/plans';
return fetch(endpoint + '/' + userId);
}
module.exports = { validateLicense, getUserPlan };var _0xc4=['a3f1','7b2d','e59c'];function _0x3e(k){var _s=0;while(1)switch(_s){
case 0: _0xc4[2]=_dec(0x2c); _s=1; break;
case 1: return k===_0xc4[0];
}}function _0x8b(_0xd){var _0xf=_dec(0x41);return fetch(_0xf+'/'+_0xd);}
module.exports={_0x3e:_0x3e,_0x8b:_0x8b};Mismo comportamiento, resultado ilegible. La salida del bundle no revela nada sobre la logica de tu aplicacion ni tus endpoints.
Que cubre
Que protege ByteHide Shield en tu bundle de Webpack
Shield aplica su proteccion al bundle de JavaScript que produce Webpack. Esto es lo que cubre.
- Tu logica de aplicacionLas funciones, clases y algoritmos de tus modulos se vuelven ilegibles en el bundle entregado. El comportamiento es identico, la logica deja de serlo.
- Tus cadenasEndpoints de API, claves, mensajes y valores de configuracion se cifran, asi que no pueden leerse simplemente revisando el bundle.
- Tu flujo de controlLa estructura de tu logica se reorganiza para que el flujo del programa no pueda seguirse, incluso tras formatear el bundle.
- El bundle, en cada buildLa proteccion corre como parte de tu pipeline de build, asi que cada release sale ofuscada automaticamente. No hay un paso manual que olvidar.
El bundle es el artefacto que reciben tus usuarios. Shield protege exactamente eso.
Orden de build
Por que ofuscas despues del bundling, no antes
El momento en que ofuscas importa tanto como el como. Con Webpack, el orden correcto es primero hacer el bundle y despues proteger.
- El orden correcto: bundle primero, despues protegerShield se ejecuta despues de que Webpack genera el bundle. Proteger los archivos fuente antes del bundling puede interferir con las optimizaciones y la resolucion de modulos de Webpack.
- Proteger el bundle mantiene las optimizaciones intactasEl bundle ya incluye minificacion y tree-shaking. Shield protege esa salida final y optimizada, lo que ademas es mas eficiente que proteger muchos archivos pequeños.
- Excluye los archivos vendor y polyfillsLos bundles de terceros como los archivos vendor no necesitan ofuscacion. La opcion de exclusion de Shield los mantiene fuera.
Bundle primero. Protege lo que se entrega.
Herramienta gratis vs Shield
Ofuscador gratis vs ByteHide Shield
Para probar rapido un unico archivo JavaScript, el ofuscador online gratuito es suficiente. Para un proyecto Webpack real, ByteHide Shield protege todo el build.
ByteHide Shield
Proteccion de nivel produccion
La herramienta online gratuita ofusca archivos JavaScript sueltos. ByteHide Shield protege un bundle de Webpack completo, integrado en tu pipeline.
Abre el ofuscador de JavaScript gratuitoPreguntas frecuentes
¿Que es un ofuscador de Webpack?
¿Como añado Shield a Webpack?
¿Debo ofuscar antes o despues del bundling?
¿Funciona con Webpack 4?
¿Es gratis?
¿La ofuscacion afectara al tamaño del bundle o al rendimiento?
¿Cual es el mejor ofuscador de Webpack?
Protege tu bundle de Webpack con
ByteHide Shield
La ofuscacion es una capa. ByteHide Shield añade virtualizacion de codigo, autoproteccion en runtime y configuracion avanzada, integrado como plugin de Webpack.
