Introducción
En
el desarrollo web moderno, la protección del código JavaScript se ha vuelto
crucial para preservar la propiedad intelectual, dificultar la ingeniería
inversa y reforzar la seguridad frente a usuarios maliciosos. Una técnica
efectiva es la encriptación del código mediante Base64 combinada con XOR y una
clave secreta. Este método, utilizado en herramientas como Codificador
JavaScript Base64 XOR Online CRIPTNETS, permite proteger funciones
sensibles y luego desencriptarlas dinámicamente en el navegador.
Este
artículo muestra paso a paso cómo utilizar esta herramienta para proteger una
función JavaScript en un formulario de login básico y cómo integrarla
nuevamente en HTML para que se auto-ejecute desencriptándose con una clave al
momento de la carga del documento.
Código
Original del Login
A continuación, se presenta un formulario HTML de inicio de sesión con validación básica en JavaScript:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Login Básico</title>
</head>
<body>
<h2>Iniciar Sesión</h2>
<form id="loginForm">
<label>Usuario:</label><br>
<input type="text" id="usuario" required><br><br>
<label>Contraseña:</label><br>
<input type="password" id="password" required><br><br>
<button type="submit">Ingresar</button>
</form>
<p id="mensaje"></p>
<script type="text/javascript">
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
const usuario = document.getElementById('usuario').value;
const password = document.getElementById('password').value;
// Usuario y contraseña definidos (para pruebas)
const usuarioValido = "admin";
const passwordValida = "1234";
if (usuario === usuarioValido && password === passwordValida) {
document.getElementById('mensaje').innerText = "¡Bienvenido!";
document.getElementById('mensaje').style.color = "green";
} else {
document.getElementById('mensaje').innerText = "Credenciales incorrectas.";
document.getElementById('mensaje').style.color = "red";
}
});
</script>
</body>
</html>
Paso
1: Encriptar el Código JavaScript
1.
Copia el código dentro de
la etiqueta <script>.
2.
Accede a Codificador JavaScript Base64 XOR.
3.
Pega el código en el
textarea.
4.
Ingresa una clave
secreta, por ejemplo: 123.
5.
Obtén el resultado
encriptado y concatena el signo $ seguido de la clave.
Ejemplo
final del string ofuscado:
<cadena_codificada_base64_xor>$123
6/Pm2vXs9dyz7O3dCvTs8u3z2wbgDuyxrPTy7PHzDfPX8quwtent6w3b6vLdE/HW2+3z6taxrNfc6fXw26u1p+rc9efd7vPzr+2wp9/Pp6jstdjX6trs9dwN6uro2vTdr7Ge0c6pp+fy9dfdp93W2unX7vOpoqjt9Ofc8u3z27Lq6twM8+306vLdCeEQ67Cq2tfc5tbw9Kuwtdro893soM6pp+fy9dfdp9jo2Nfa9Nbtp6Wp6/Pm2vXs9dyz7O3dCvTs8u3z2wbgDuyxrNjo2Nfa9NbtrLGz3en12u2e0c6pp7Oyp/3W2unX7vOp3qjm9PLd2enW6lnop+zs7fHz7uzy2Kix1+nX5qjZ2d3s6enWrs6pp+fy9dfdp93W2unX7vP75vTw6/Opoqin5uz07vKnoM6pp+fy9dfdp9jo2Nfa9Nbt/en17uzop6WpqZmXmJynoM7Pp6jw7aix2tfc5tbw9KikoqWp2tfc5tbw9Pro8/Ht9KirrajZ5tfW3PPX66ikoqWp1+nW2Nvy2ez75vTw6+mwp9/Pp6ipp+zy6N306vLdtevs2w316vXs9dwH3hHtr6v06vLW5u7srLGz7vLz6tb96uDdp6WpqSkH7u3z3e3z7uzypqae0aipp6jt9Ofc8u3z27Lq6twM8+306vLdCeEQ67Cq8u3z2Onv6quwtdfd3vTstefy8/PXp6WpqevX6u3zqZ/Pp6jkp+312O2p4M6pp6ip6/Pm2vXs9dyz7O3dCvTs8u3z2wbgDuyxrPXs9dfo8e2qrrLw9fLs2fzs39ypoqinCNbs6+3z6PHo8+3Wp/Hz6PPX2e3m2+nWtaae0aipp6jt9Ofc8u3z27Lq6twM8+306vLdCeEQ67Cq8u3z2Onv6quwtdfd3vTstefy8/PXp6Wpqdbs66ae0aip4s7krp8=$123
Paso 2: Insertar el Código Encriptado en el HTML
<textarea id="codigo_encriptado" style="display:none;">
<cadena_codificada_base64_xor>$123
</textarea>
Paso
3: Crear el Desencriptador Automático
Agrega este script al final del HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Login Básico</title>
</head>
<body>
<h2>Iniciar Sesión</h2>
<form id="loginForm">
<label>Usuario:</label><br>
<input type="text" id="usuario" required><br><br>
<label>Contraseña:</label><br>
<input type="password" id="password" required><br><br>
<button type="submit">Ingresar</button>
</form>
<p id="mensaje"></p>
<textarea id="codigo_encriptado" style="display:none;">
6/Pm2vXs9dyz7O3dCvTs8u3z2wbgDuyxrPTy7PHzDfPX8quwtent6w3b6vLdE/HW2+3z6taxrNfc6fXw26u1p+rc9efd7vPzr+2wp9/Pp6jstdjX6trs9dwN6uro2vTdr7Ge0c6pp+fy9dfdp93W2unX7vOpoqjt9Ofc8u3z27Lq6twM8+306vLdCeEQ67Cq2tfc5tbw9Kuwtdro893soM6pp+fy9dfdp9jo2Nfa9Nbtp6Wp6/Pm2vXs9dyz7O3dCvTs8u3z2wbgDuyxrNjo2Nfa9NbtrLGz3en12u2e0c6pp7Oyp/3W2unX7vOp3qjm9PLd2enW6lnop+zs7fHz7uzy2Kix1+nX5qjZ2d3s6enWrs6pp+fy9dfdp93W2unX7vP75vTw6/Opoqin5uz07vKnoM6pp+fy9dfdp9jo2Nfa9Nbt/en17uzop6WpqZmXmJynoM7Pp6jw7aix2tfc5tbw9KikoqWp2tfc5tbw9Pro8/Ht9KirrajZ5tfW3PPX66ikoqWp1+nW2Nvy2ez75vTw6+mwp9/Pp6ipp+zy6N306vLdtevs2w316vXs9dwH3hHtr6v06vLW5u7srLGz7vLz6tb96uDdp6WpqSkH7u3z3e3z7uzypqae0aipp6jt9Ofc8u3z27Lq6twM8+306vLdCeEQ67Cq8u3z2Onv6quwtdfd3vTstefy8/PXp6WpqevX6u3zqZ/Pp6jkp+312O2p4M6pp6ip6/Pm2vXs9dyz7O3dCvTs8u3z2wbgDuyxrPXs9dfo8e2qrrLw9fLs2fzs39ypoqinCNbs6+3z6PHo8+3Wp/Hz6PPX2e3m2+nWtaae0aipp6jt9Ofc8u3z27Lq6twM8+306vLdCeEQ67Cq8u3z2Onv6quwtdfd3vTstefy8/PXp6Wpqdbs66ae0aip4s7krp8=$123
</textarea>
<script>
function decodificarJS1(textoCodificado, clave) {
if (!textoCodificado || !clave) {
console.log("Por favor, completa el texto codificado y la clave.");
return;
}
try {
const texto = atob(textoCodificado);
let desplazamiento = 0;
for (let i = 0; i < clave.length; i++) {
desplazamiento += clave.charCodeAt(i);
}
desplazamiento = desplazamiento % 256;
let resultado = '';
for (let i = 0; i < texto.length; i++) {
const charCode = texto.charCodeAt(i);
const desplazado = (charCode - desplazamiento + 256) % 256;
const claveChar = clave.charCodeAt(i % clave.length);
const xored = desplazado ^ claveChar;
resultado += String.fromCharCode(xored);
}
return resultado;
} catch (e) {
console.log("Error al decodificar. Verifica que la clave sea correcta o el formato válido: " + e.message);
}
}
function ejecutarScriptCercaDeTextarea() {
const textarea = document.getElementById('codigo_encriptado');
const contenido = textarea.value.trim();
const partes = contenido.split('$');
const base64 = partes[0];
const clave = partes[1] || '';
if (!base64 || !clave) {
alert('Código o clave inválidos.');
return;
}
const codigoDecodificado = decodificarJS1(base64, clave);
if (!codigoDecodificado) {
return;
}
try {
const script = document.createElement('script');
script.textContent = codigoDecodificado;
textarea.insertAdjacentElement('afterend', script);
//30 segundos = 30000 milisegundos
setTimeout(() => {
script.remove();
textarea.innerText = 'Solicita el codigo fuente JavaScript al desarrollador';
}, 9000);
} catch (e) {
console.error('Error al ejecutar el script:', e);
}
}
window.onload = () => {
ejecutarScriptCercaDeTextarea();
};
</script>
</body>
</html>
Beneficios
del Enfoque
Seguridad:
Dificulta la lectura del código fuente desde el navegador.
Privacidad
del desarrollador: Protege funciones sensibles y lógica
de negocio.
Flexibilidad: Se
puede integrar con cualquier sistema web en HTML puro.
Conclusión
La
encriptación de JavaScript con Base64 y XOR es una medida simple pero eficaz
para proteger funciones sensibles en HTML. Usando herramientas como el
Codificador de Criptnets, es posible ofuscar código y desencriptarlo en tiempo
real con una clave, reforzando así la seguridad del lado cliente.
 |
| Figure 1. Desencriptar un JavaScript Encriptado con Base64 XOR - sybcodex.com |
Aviso sobre el contenido
Este
Blog no se hace responsable del mal uso de la información compartida, todo es
presentado solo con fines educativos y de entretenimiento.
Es
importante señalar que el contenido de este artículo tiene un enfoque
informativo y de entretenimiento, por lo que podría contener información que no
es verídica. Por esta razón, si tienes la intención de utilizar esta
publicación para hacer trabajos académicos o investigaciones, te recomiendo
encarecidamente que realices una exhaustiva investigación adicional. Es
fundamental que filtres los contenidos y verifiques la información mediante
fuentes académicas confiables, como revistas científicas y repositorios de alta
credibilidad.
El
contenido educativo aquí proporcionado no pretende sustituir el asesoramiento,
guía o enseñanza proporcionada por profesionales o instituciones
especializadas. Cualquier decisión o acción tomada por los lectores o usuarios
con base en la información presentada en este contenido es responsabilidad
exclusiva de cada individuo.
En
caso de que se requiera asesoramiento específico o experto en un área
particular, se alienta a los usuarios a buscar la orientación de profesionales
o expertos cualificados en el campo correspondiente.
Si
les sale error al ejecutar el código del programa o Query o script compartido
puede deberse a factores técnicos de software, tipeo, estructura de código,
versión o de librerías desfasadas.
Las
licencias de software libre y de código abierto permiten a los desarrolladores
utilizar y modificar el código fuente de un proyecto, lo que puede fomentar la
innovación y el avance tecnológico.
El
código, script, software y Query compartido en este post o publicación está
bajo licencia de software libre, y si lo llegan a compartir opcionalmente
pueden poner el nombre y la web del desarrollador <Sybcodex/>.
Referencias
DALL·E (openai, 2025). Ilustración de
este artículo. [Figure 1]. Generado en https://chatgpt.com/
Criptnets (2025). Codificador JavaScript Base64 XOR Online. Sybcodex. https://www.sybcodex.com/2025/05/codificador-javascript-base64-xor-online.html
Mozilla Developer Network (2024). WindowOrWorkerGlobalScope.atob(). https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/atob
W3Schools (2024). JavaScript String charCodeAt() Method. https://www.w3schools.com/jsref/jsref_charcodeat.asp
Redactor: Sybcodex (Joel
Sotelo Bustamante)
Categoría: Tecnología - ADMSoftCorp
Título del artículo: Cómo Desencriptar un JavaScript
Encriptado con Base64 XOR en HTML
Número de edición: 1.0
Escrito en el año: 2025
-----------------------------------------------
Tienda online de libros: 👉 Book Sh💓p
©Todos los derechos reservados al autor.
0 Comentarios