BYTEHIDE SHIELD PARA NEXT.JS
Next.js Obfuscator
Protege tu aplicación Next.js frente a ingeniería inversa, copia y manipulación. ByteHide Shield se integra directamente en tu build de Next.js.
Empezar
Next.js
npm install --save-dev @bytehide/next-shield
// next.config.js
const { createShield } = require('@bytehide/next-shield');
module.exports = createShield({ projectToken: 'YOUR_TOKEN' })(yourConfig);Envuelve tu next.config con createShield y añade tu project token. Shield protege los chunks generados en cada build.
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 Next.js
Tres pasos para conectar Shield a tu build de Next.js.
Paso 01
Instala el plugin de Next.js
Añade @bytehide/next-shield como dev dependency.
Paso 02
Envuelve tu next.config
Envuelve tu config de Next.js con createShield y añade tu project token.
Paso 03
Compila como siempre
Ejecuta next build. Shield protege los chunks generados automáticamente.
Por qué ofuscar
Por qué ofuscar código Next.js
Next.js envía JavaScript al navegador para cada página que corre en el cliente. Ese código es legible para cualquiera que abra las herramientas de desarrollador.
- Tus client components se entregan legiblesLas partes interactivas de tu app Next.js, los client components, se entregan como chunks JavaScript. Su lógica es visible sin ofuscación.
- El código de servidor y cliente necesita tratamiento diferenteNext.js mezcla código de servidor y de cliente. Los chunks del cliente son los que llegan al navegador, y los que necesitan ofuscación.
- La salida de tu build es tu producto expuestoLos chunks de .next contienen tu lógica frontend. Legibles, pueden estudiarse y copiarse.
Ejemplo
Ve la ofuscación de Next.js en acción
La ofuscación se entiende mejor cuando la ves. Aquí tienes un client component de Next.js antes y después de que Shield proteja el bundle compilado.
'use client';
import { useState } from 'react';
export function PricingCard({ plan, price }: { plan: string; price: number }) {
const [selected, setSelected] = useState(false);
function handleSelect() {
setSelected(true);
fetch('/api/select-plan', {
method: 'POST',
body: JSON.stringify({ plan, price }),
});
}
return (
<div className={selected ? 'card selected' : 'card'}>
<h2>{plan}</h2>
<p>${price}/mo</p>
<button onClick={handleSelect}>Choose plan</button>
</div>
);
}var _0xd4=['7f3b','a1c9','e5d2'];(function(_0x3a,_0x1f){var _0xe=function(_0xb){while(--_0xb){_0x3a['push'](_0x3a['shift']());}};_0xe(++_0x1f);}(_0xd4,0x2c));
var _0x2b=function(_0xc,_0x8){_0xc=_0xc-0x0;return _0xd4[_0xc];};
function _0x5f(_0x9a,_0x4e){var _s=0x0;while(0x1)switch(_s){case 0x0:_0x6c(0x1)[_0x2b('0x0')](true);
_s=0x1;break;case 0x1:_0x7d(_0x2b('0x1'),{method:_0x2b('0x2'),body:_0x3e({[_0x9a]:_0x4e})});
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 Next.js
Shield aplica su protección a los chunks JavaScript que Next.js genera para el navegador. Esto es lo que cubre.
- La lógica de tus client componentsLas funciones, hooks y manejadores de eventos de tus client components se vuelven ilegibles en los chunks entregados. El comportamiento es idéntico, la lógica deja de serlo.
- Tus cadenas y configuracionesEndpoints de API, claves, mensajes y valores de configuración en el código cliente se cifran, así que no pueden leerse revisando los chunks.
- 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 chunk, en cada buildLa protección corre como parte de tu build de Next.js, así que cada release sale ofuscada automáticamente. No hay un paso manual que olvidar.
Tu experiencia en el cliente está expuesta. Shield ofusca lo que envías.
Build
Ofuscación en Next.js: qué proteger y qué excluir
Next.js genera distintos tipos de archivos. Saber cuáles ofuscar y cuáles dejar intactos es lo que mantiene la protección limpia.
- Shield protege los chunks de .nextNext.js genera chunks JavaScript en .next/static/chunks. Son los que llegan al navegador, y los que Shield protege.
- Excluye los archivos especialesNext.js tiene archivos especiales como _document y _app, y rutas de API. La opción exclude de Shield los mantiene fuera de la ofuscación para que la app siga funcionando.
- El código de servidor se queda en el servidorLos server components y las rutas de API se ejecutan en tu servidor, no en el navegador. La prioridad de la ofuscación son los chunks del cliente.
Protege lo que ve el navegador. Deja el servidor en paz.
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 Next.js 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 Next.js completa, integrado en tu pipeline.
Abre el ofuscador de JavaScript gratuitoPreguntas frecuentes
¿Qué es un ofuscador de Next.js?
¿Cómo añado Shield a Next.js?
¿Funciona con el App Router y el Pages Router?
¿Qué archivos debo excluir?
¿Es gratis?
¿La ofuscación afectará al rendimiento de Next.js?
¿Cuál es el mejor ofuscador de Next.js?
Protege tu aplicación Next.js 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 Next.js.
