martes 23 julio 2024

Cómo Hacer un Encriptador de Texto con JavaScript Usando CryptoJS

¿Qué es CryptoJS?
Instalación de CryptoJS
Encriptación y Desencriptación con CryptoJS
Consideraciones de Seguridad
Conclusión

¿Qué es CryptoJS?

CryptoJS es una biblioteca de JavaScript que proporciona varios algoritmos de criptografía, como AES, DES, Rabbit, MD5, SHA-1, y SHA-256. Es fácil de usar y ampliamente adoptada para encriptar datos en aplicaciones web.

Instalación de CryptoJS

Primero, necesitamos instalar CryptoJS. Puedes incluirlo en tu proyecto usando npm (Node Package Manager) o directamente a través de un CDN (Content Delivery Network).

Instalación con npm

Si estás utilizando npm, puedes instalar CryptoJS ejecutando el siguiente comando en tu terminal:

npm install crypto-js

Inclusión mediante CDN

Si prefieres no usar npm, puedes incluir CryptoJS directamente en tu proyecto HTML usando un CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

Encriptación y Desencriptación con CryptoJS

Ahora, veamos cómo encriptar y desencriptar texto utilizando CryptoJS.

Ejemplo de Encriptación con AES

AES (Advanced Encryption Standard) es uno de los algoritmos de encriptación más utilizados. Vamos a ver cómo encriptar y desencriptar texto usando AES en CryptoJS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Encriptador de Texto con CryptoJS</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
</head>
<body>
    <h1>Encriptador de Texto</h1>
    <input type="text" id="plainText" placeholder="Ingresa el texto a encriptar">
    <button onclick="encryptText()">Encriptar</button>
    <button onclick="decryptText()">Desencriptar</button>
    <p>Texto Encriptado: <span id="encryptedText"></span></p>
    <p>Texto Desencriptado: <span id="decryptedText"></span></p>

    <script>
        const secretKey = "mySecretKey12345";

        function encryptText() {
            const plainText = document.getElementById('plainText').value;
            const encrypted = CryptoJS.AES.encrypt(plainText, secretKey).toString();
            document.getElementById('encryptedText').innerText = encrypted;
        }

        function decryptText() {
            const encryptedText = document.getElementById('encryptedText').innerText;
            const decrypted = CryptoJS.AES.decrypt(encryptedText, secretKey);
            const decryptedText = decrypted.toString(CryptoJS.enc.Utf8);
            document.getElementById('decryptedText').innerText = decryptedText;
        }
    </script>
</body>
</html>

Explicación del Código

1. HTML Estructura:

Un campo de entrada para que el usuario ingrese el texto a encriptar.
Dos botones para ejecutar las funciones de encriptación y desencriptación.
Dos elementos <p> para mostrar el texto encriptado y desencriptado.

2. JavaScript:

Definimos una clave secreta secretKey para la encriptación. En un entorno de producción, esta clave debe ser almacenada de manera segura.
encryptText():
Obtiene el texto plano del campo de entrada.
Utiliza CryptoJS.AES.encrypt para encriptar el texto plano con la clave secreta.
Muestra el texto encriptado en el elemento <span>.
decryptText():
Obtiene el texto encriptado del elemento <span>.
Utiliza CryptoJS.AES.decrypt para desencriptar el texto encriptado con la clave secreta.
Convierte el texto desencriptado a UTF-8 y lo muestra en el elemento <span>.

Ejemplo en codepen.io:

Consideraciones de Seguridad

Clave Secreta: La clave secreta debe ser almacenada y manejada con cuidado. No debe estar hardcodeada en el código fuente en un entorno de producción.
HTTPS: Asegúrate de que tu sitio web use HTTPS para proteger la transmisión de datos entre el cliente y el servidor.
Almacenamiento Seguro: Si necesitas almacenar datos encriptados, asegúrate de usar métodos de almacenamiento seguros y considera el uso de técnicas adicionales de protección de datos.

Conclusión

Crear un encriptador de texto con JavaScript usando CryptoJS es sencillo y eficiente. En este artículo, hemos cubierto los conceptos básicos de encriptación y desencriptación utilizando el algoritmo AES de CryptoJS. Siguiendo estos pasos, puedes implementar una capa adicional de seguridad en tus aplicaciones web para proteger la información sensible de los usuarios.

Etiquetas:

javascript desarrollo web criptografía

Creado por:

Jorge García

Fullstack developer