BYTEHIDE SHIELD PARA REACT
React Obfuscator
Protege tu aplicación React frente a ingeniería inversa, copia y manipulación. ByteHide Shield ofusca tu bundle React compilado, integrado en tu pipeline.
Empezar
Webpack (CRA)
npm install --save-dev @bytehide/webpack-shieldPara proyectos con Create React App y Webpack. Protege el bundle compilado.
Guía completa en la documentaciónVite
npm install --save-dev @bytehide/vite-shieldPara proyectos React construidos con Vite. Protege cada build de producción.
Guía completa en la documentaciónCLI
npm install -g @bytehide/shield-cli
shield protect "build/static/js/**/*.js"Protege la salida del build de React directamente.
Guía completa en la documentaciónGratis 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 gratisCómo funciona
Cómo ofuscar una aplicación React
React compila a un bundle JavaScript antes de entregarse. Shield protege ese bundle. Tres pasos.
Paso 01
Instala Shield para tu bundler
Añade el paquete ByteHide para Webpack o Vite, según cómo esté construida tu app React.
Paso 02
Añade tu project token
Crea una cuenta gratis en ByteHide, obtén tu token y añádelo a la configuración del plugin.
Paso 03
Compila como siempre
Ejecuta tu build normal. React bundlea y Shield protege la salida automáticamente.
Por qué ofuscar
Por qué ofuscar código React
Una aplicación React envía todo su frontend al navegador como un bundle JavaScript. Todo lo que hacen tus componentes está ahí, legible.
- La lógica de tus componentes está en el bundleLa lógica dentro de tus componentes, cómo gestionan el estado, las llamadas y el renderizado condicional, viaja legible en el bundle. La ofuscación lo hace ilegible.
- Tus llamadas a API y claves son visiblesLos endpoints que llama tu app React y cualquier valor en el cliente están en texto plano en el bundle. La ofuscación con string encryption los oculta.
- React legible es fácil de clonarUn bundle legible permite a un competidor estudiar y replicar tu frontend. La ofuscación eleva el coste de copiar tu trabajo.
Ejemplo
Ve la ofuscación de React en acción
La ofuscación se entiende mejor cuando la ves. Aquí tienes un componente React pequeño antes y después de que Shield proteja el bundle compilado.
import React, { useState, useEffect } from 'react';
export function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
fetch('https://api.example.com/count')
.then(r => r.json())
.then(data => setCount(data.value));
}, []);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}var _0xb3=['9d2a','c7f1','a4e0'];(function(_0xc1,_0x2d){var _0xf=function(_0xa){while(--_0xa){_0xc1['push'](_0xc1['shift']());}};_0xf(++_0x2d);}(_0xb3,0x1f));
var _0x1c=function(_0xe,_0xd){_0xe=_0xe-0x0;var _0xr=_0xb3[_0xe];return _0xr;};
function _0x4a(_0x2b){var _s=0x0;while(0x1)switch(_s){case 0x0:var _0x5c=_0x8f(0x0)[_0x1c('0x1')];
_s=0x1;break;case 0x1:_0x9d(_0x1c('0x2'))[_0x1c('0x3')](_0xd=>_0xd[_0x1c('0x4')]())[_0x1c('0x3')](_0x7e=>_0x5c(_0x7e[_0x1c('0x5')]));
return;}}Mismo comportamiento, resultado ilegible. El bundle compilado no revela nada sobre la lógica de tus componentes.
Qué cubre
Qué protege ByteHide Shield en tu build de React
Shield aplica su protección al bundle JavaScript que produce React. Esto es lo que cubre.
- La lógica de tus componentesLas funciones, hooks y lógica de renderizado de tus componentes React se vuelven ilegibles en el bundle entregado. El comportamiento es idéntico, la lógica deja de serlo.
- Tus cadenas y endpointsEndpoints de API, claves, mensajes y valores de configuración se cifran, así que no pueden leerse simplemente revisando el bundle compilado.
- Tu flujo de controlLa estructura de tu lógica se reorganiza para que el flujo del programa no pueda seguirse, incluso tras formatear el código.
- Cada build, automáticamenteLa protección corre como parte de tu pipeline de build, así que cada release sale ofuscada automáticamente. No hay un paso manual que olvidar.
El código de tus componentes es tu producto. Shield protege lo que envías.
Build
Ofuscando React: protege el build, no el fuente
La ofuscación se aplica al bundle JavaScript que produce React, no al fuente .jsx o .tsx. Saber qué se protege es parte de hacerlo bien.
- El fuente React es JSX, el navegador ejecuta el bundleTus archivos .jsx y .tsx se transforman y empaquetan antes del despliegue. La ofuscación se aplica a ese bundle compilado, no al fuente JSX.
- Protege la salida del bundlePara Create React App, la salida del build está en build/static/js. Para Vite, en dist/assets. Shield protege esos archivos.
- Los nombres reservados mantienen React funcionandoReact depende de ciertos nombres en runtime. La configuración de Shield los reserva para que la ofuscación no rompa tu app.
Protege lo que se ejecuta, no lo que escribes.
Herramienta gratis vs Shield
Ofuscador gratis vs ByteHide Shield
Para probar rápido un único archivo JavaScript, el ofuscador online gratuito es suficiente. Para una app React real, ByteHide Shield protege todo el build.
ByteHide Shield
Protección de nivel producción
La herramienta online gratuita ofusca archivos JavaScript sueltos. ByteHide Shield protege una aplicación React completa, integrado en tu pipeline.
Abre el ofuscador de JavaScript gratuitoPreguntas frecuentes
¿Qué es un ofuscador de React?
¿Puedo ofuscar el fuente React directamente?
¿Cómo añado Shield a una app React?
¿La ofuscación rompe React?
¿Es gratis?
¿Se puede revertir el React ofuscado?
¿Cuál es el mejor ofuscador de React?
Protege tu aplicación React con
ByteHide Shield
La ofuscación es una capa. ByteHide Shield añade virtualización de código, autoprotección en runtime y configuración avanzada, integrado en tu pipeline React.
