Maison > interface Web > js tutoriel > Cryptage et décryptage sécurisé du texte avec Vanilla JavaScript

Cryptage et décryptage sécurisé du texte avec Vanilla JavaScript

Linda Hamilton
Libérer: 2024-12-08 03:37:10
original
1038 Les gens l'ont consulté

Secure Text Encryption and Decryption with Vanilla JavaScript

À l’ère numérique d’aujourd’hui, la sécurisation des informations sensibles telles que les clés API, les mots de passe et les données utilisateur est plus critique que jamais. Une stratégie robuste de cryptage et de déchiffrement peut empêcher tout accès non autorisé et garantir la confidentialité des données. Dans cet article de blog, nous explorerons comment chiffrer et déchiffrer du texte à l'aide de JavaScript Vanilla, en tirant parti de l'API Web Crypto pour une approche moderne et sécurisée.

Pourquoi utiliser le cryptage ?

Le cryptage transforme les données lisibles (texte en clair) en un format brouillé (texte chiffré) qui ne peut être lu que s'il est déchiffré avec la bonne clé. Cela garantit que même si quelqu’un intercepte les données cryptées, celles-ci n’auront aucun sens sans la clé. Un mécanisme de cryptage solide protège :

  • Clés API stockées dans votre code frontend.
  • Informations utilisateur sensibles.
  • Toutes les données transférées via des canaux non sécurisés.

Voyons comment vous pouvez implémenter cela en toute sécurité dans JavaScript.


Cryptage et déchiffrement à l'aide d'AES-GCM

Nous utiliserons AES-GCM (Advanced Encryption Standard - Galois/Counter Mode), une norme moderne qui fournit à la fois le cryptage et la vérification de l'intégrité. Les étapes impliquent :

  1. Dérivation de mot de passe : utilisez PBKDF2 (Password-Based Key Derivation Function 2) pour dériver une clé sécurisée à partir d'un mot de passe.
  2. Salt et IV : Générez un sel aléatoire (pour rendre la dérivation du mot de passe unique) et un iv (vecteur d'initialisation) pour chaque cryptage.
  3. Cryptage : Chiffrez le texte brut à l'aide d'AES-GCM.
  4. Déchiffrement : Décryptez le texte chiffré en utilisant le même mot de passe et salt/iv.

Implémentation du code

Voici l'implémentation complète de JavaScript.

Utilitaires de conversion

Nous effectuerons la conversion entre ArrayBuffer et hexadécimal pour faciliter le stockage et la récupération des données :

function arrayBufferToHex(buffer) {
    return [...new Uint8Array(buffer)]
        .map(byte => byte.toString(16).padStart(2, '0'))
        .join('');
}

function hexToArrayBuffer(hex) {
    const bytes = new Uint8Array(hex.length / 2);
    for (let i = 0; i < hex.length; i += 2) {
        bytes[i / 2] = parseInt(hex.substr(i, 2), 16);
    }
    return bytes.buffer;
}
Copier après la connexion
Copier après la connexion

Dérivation de clé à partir du mot de passe

Utilisez PBKDF2 pour dériver une clé de cryptage forte :

async function getCryptoKey(password) {
    const encoder = new TextEncoder();
    const keyMaterial = encoder.encode(password);
    return crypto.subtle.importKey(
        'raw',
        keyMaterial,
        { name: 'PBKDF2' },
        false,
        ['deriveKey']
    );
}

async function deriveKey(password, salt) {
    const keyMaterial = await getCryptoKey(password);
    return crypto.subtle.deriveKey(
        {
            name: 'PBKDF2',
            salt: salt,
            iterations: 100000,
            hash: 'SHA-256'
        },
        keyMaterial,
        { name: 'AES-GCM', length: 256 },
        false,
        ['encrypt', 'decrypt']
    );
}
Copier après la connexion

Fonction de cryptage

Crypter le texte avec un mot de passe :

async function encryptText(text, password) {
    const encoder = new TextEncoder();
    const salt = crypto.getRandomValues(new Uint8Array(16));
    const iv = crypto.getRandomValues(new Uint8Array(12));
    const key = await deriveKey(password, salt);

    const encrypted = await crypto.subtle.encrypt(
        { name: 'AES-GCM', iv: iv },
        key,
        encoder.encode(text)
    );

    return {
        cipherText: arrayBufferToHex(encrypted),
        iv: arrayBufferToHex(iv),
        salt: arrayBufferToHex(salt)
    };
}
Copier après la connexion

Fonction de décryptage

Déchiffrez le texte avec le même mot de passe :

async function decryptText(encryptedData, password) {
    const { cipherText, iv, salt } = encryptedData;
    const key = await deriveKey(password, hexToArrayBuffer(salt));

    const decrypted = await crypto.subtle.decrypt(
        { name: 'AES-GCM', iv: hexToArrayBuffer(iv) },
        key,
        hexToArrayBuffer(cipherText)
    );

    const decoder = new TextDecoder();
    return decoder.decode(decrypted);
}
Copier après la connexion

Exemple d'utilisation

Voyons comment utiliser ces fonctions :

function arrayBufferToHex(buffer) {
    return [...new Uint8Array(buffer)]
        .map(byte => byte.toString(16).padStart(2, '0'))
        .join('');
}

function hexToArrayBuffer(hex) {
    const bytes = new Uint8Array(hex.length / 2);
    for (let i = 0; i < hex.length; i += 2) {
        bytes[i / 2] = parseInt(hex.substr(i, 2), 16);
    }
    return bytes.buffer;
}
Copier après la connexion
Copier après la connexion

Meilleures pratiques de sécurité

  1. Utilisez un mot de passe fort : Le cryptage est aussi sécurisé que le mot de passe que vous utilisez.
  2. Conservez le sel et l'IV en toute sécurité : enregistrez toujours le sel et l'IV avec vos données cryptées.
  3. Évitez les secrets de codage en dur : ne codez jamais en dur des données ou des mots de passe sensibles dans votre base de code.
  4. Utiliser HTTPS : assurez-vous que votre application utilise HTTPS pour protéger les données en transit.

Le chiffrement des informations sensibles comme les clés API est une étape fondamentale dans la sécurisation de vos applications. Je l'utilise principalement pour les clés API.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal