BYTEHIDE SHIELD PARA VUE
Vue Obfuscator
Protege tu aplicacion Vue.js frente a ingenieria inversa, copia y manipulacion. ByteHide Shield ofusca tu bundle Vue compilado, integrado en tu pipeline.
Empezar
Vite
npm install --save-dev @bytehide/vite-shield
// vite.config.js
import { byteHideShield } from '@bytehide/vite-shield';
export default { plugins: [byteHideShield({ projectToken: 'YOUR_TOKEN' })] };Añade el plugin Shield a vite.config. La mayoria de proyectos Vue compilan con Vite. Shield protege cada build de produccion.
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 una aplicacion Vue.js
Vue compila a un bundle JavaScript para el navegador. Shield protege ese bundle. Tres pasos.
Paso 01
Instala el plugin de Vite
Añade @bytehide/vite-shield como dev dependency. La mayoria de proyectos Vue compilan con Vite.
Paso 02
Añade tu project token
Crea una cuenta gratis en ByteHide, obtén tu token y añadelo a la configuracion del plugin.
Paso 03
Compila como siempre
Ejecuta tu build de Vue. Shield protege la salida automaticamente.
Por que ofuscar
Por que ofuscar codigo Vue
Una aplicacion Vue se compila en un bundle JavaScript que viaja al navegador. La logica dentro de tus componentes esta ahi, legible.
- Tus single file components compilan a JS legibleLos Vue single file components, los archivos .vue, compilan a JavaScript. El bundle que se entrega expone la logica de tus componentes sin ofuscacion.
- Tu logica de aplicacion y tus llamadas son visiblesLos metodos, la logica computada y las llamadas a la API de tu app Vue viajan en texto plano. La ofuscacion los oculta.
- Un bundle Vue legible es facil de replicarSin ofuscacion, tu frontend Vue puede estudiarse y copiarse.
Ejemplo
Ve la ofuscacion de Vue en accion
La ofuscacion se entiende mejor cuando la ves. Aqui tienes un componente Vue antes y despues de que Shield proteja el bundle compilado.
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Add</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
function increment() {
count.value += 1;
}
</script>var _0xc4=['value','ref'];(function(_a,_b){var _c=function(_d){while(--_d){_a['push'](_a['shift']());}};_c(++_b);}(_0xc4,0x1e3));var _0x9f=function(_a){_a=_a-0x0;return _0xc4[_a];};import{_0x9f('0x1')}from'vue';const _0xa2=_0x9f('0x1')(0x0);function _0x3d(){var _s=0;while(1)switch(_s){case 0:_0xa2[_0x9f('0x0')]+=0x1;_s=1;break;case 1:return;}}Mismo comportamiento, resultado ilegible. La salida compilada no revela nada sobre la logica de tu componente ni su estado.
Que cubre
Que protege ByteHide Shield en tu app Vue
Shield aplica su proteccion al bundle JavaScript que produce Vue. Esto es lo que cubre.
- Logica de componentesLos metodos, las propiedades computadas y el estado reactivo dentro de tus componentes Vue se vuelven ilegibles en el bundle compilado. El comportamiento es identico, la logica deja de serlo.
- Cadenas y endpointsEndpoints de API, claves, mensajes y valores de configuracion dentro de tu app Vue se cifran para que no puedan leerse escaneando el bundle.
- Flujo de controlLa estructura de la logica de tus componentes se reorganiza para que el flujo del programa no pueda seguirse, incluso tras formatear el bundle.
- Bundle, en cada buildLa proteccion corre como parte de tu pipeline Vite, asi que cada build de produccion sale ofuscado automaticamente. No hay un paso manual que olvidar.
Tu frontend Vue es tu producto en pantalla. Shield protege el codigo que lo entrega.
Build
Ofuscacion de Vue: protege la salida compilada
La magia reactiva de Vue vive en runtime, pero el codigo que la entrega es solo JavaScript cuando llega al navegador.
- Los SFCs de Vue se compilan antes del despliegueTus Vue single file components, los archivos .vue, se compilan a JavaScript en el build. La ofuscacion se aplica a esa salida, no al fuente .vue.
- Vite es el build estandar de VueLos proyectos Vue modernos compilan con Vite. El plugin @bytehide/vite-shield protege la salida en dist/assets.
- Los nombres reservados mantienen Vue funcionandoVue depende de ciertos nombres en runtime. La configuracion de Shield los reserva para que la ofuscacion no rompa la app.
Protege lo que corre en el navegador. Deja intactos los hooks de runtime de Vue.
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 Vue 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 proyecto Vue completo, integrado en tu pipeline.
Abre el ofuscador de JavaScript gratuitoPreguntas frecuentes
¿Que es un ofuscador de Vue?
¿Puedo ofuscar archivos .vue directamente?
¿Como añado Shield a una app Vue?
¿La ofuscacion rompe Vue?
¿Es gratis?
¿La ofuscacion afectara al rendimiento de Vue?
¿Cual es el mejor ofuscador de Vue?
Protege tu aplicacion Vue.js con
ByteHide Shield
La ofuscacion es una capa. ByteHide Shield añade virtualizacion de codigo, autoproteccion en runtime y configuracion avanzada, integrado en tu pipeline Vue.
