Sichere Textverschlüsselung und -entschlüsselung mit Vanilla JavaScript

Im heutigen digitalen Zeitalter ist der Schutz sensibler Informationen wie API-Schlüssel, Passwörter und Benutzerdaten wichtiger denn je. Eine robuste Verschlüsselungs- und Entschlüsselungsstrategie kann unbefugten Zugriff verhindern und die Vertraulichkeit der Daten gewährleisten. In diesem Blogbeitrag untersuchen wir, wie man Text mit Vanilla-JavaScript ver- und entschlüsselt und dabei die Web Crypto API für einen modernen, sicheren Ansatz nutzt.

Warum Verschlüsselung verwenden?

Die Verschlüsselung wandelt lesbare Daten (Klartext) in ein verschlüsseltes Format (Chiffretext) um, das nur gelesen werden kann, wenn es mit dem richtigen Schlüssel entschlüsselt wird. Dies stellt sicher, dass selbst wenn jemand die verschlüsselten Daten abfängt, diese ohne den Schlüssel bedeutungslos bleiben. Ein solider Verschlüsselungsmechanismus schützt:

• API-Schlüssel, die in Ihrem Frontend-Code gespeichert sind.
• Sensible Benutzerinformationen.
• Alle über unsichere Kanäle übertragenen Daten.

Sehen wir uns an, wie Sie dies sicher in JavaScript implementieren können.

---

Verschlüsselung und Entschlüsselung mit AES-GCM

Wir verwenden AES-GCM (Advanced Encryption Standard – Galois/Counter Mode), einen modernen Standard, der sowohl Verschlüsselung als auch Integritätsüberprüfung bietet. Die Schritte umfassen:

1. Passwortableitung: Verwenden Sie PBKDF2 (Password-Based Key Derivation Function 2), um einen sicheren Schlüssel aus einem Passwort abzuleiten.
2. Salt und IV: Generieren Sie einen zufälligen Salt (um die Passwortableitung eindeutig zu machen) und iv (Initialisierungsvektor) für jede Verschlüsselung.
3. Verschlüsselung: Verschlüsseln Sie den Klartext mit AES-GCM.
4. Entschlüsselung: Entschlüsseln Sie den Chiffretext mit demselben Passwort und Salt/iv.

---

Code-Implementierung

Hier ist die vollständige JavaScript-Implementierung.

Dienstprogramme zur Konvertierung

Wir konvertieren zwischen ArrayBuffer und Hexadezimal für eine einfache Datenspeicherung und -abfrage:

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;
}

Schlüsselableitung vom Passwort

Verwenden Sie PBKDF2, um einen starken Verschlüsselungsschlüssel abzuleiten:

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']
    );
}

Verschlüsselungsfunktion

Text mit einem Passwort verschlüsseln:

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)
    };
}

Entschlüsselungsfunktion

Text mit demselben Passwort entschlüsseln:

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);
}

Beispielverwendung

Sehen wir uns an, wie man diese Funktionen verwendet:

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;
}

---

Best Practices für die Sicherheit

1. Verwenden Sie ein sicheres Passwort: Die Verschlüsselung ist nur so sicher wie das von Ihnen verwendete Passwort.
2. Salz und Infusion sicher aufbewahren: Bewahren Sie Salz und Infusion immer zusammen mit Ihren verschlüsselten Daten auf.
3. Vermeiden Sie Hardcodierungsgeheimnisse: Codieren Sie niemals sensible Daten oder Passwörter in Ihrer Codebasis fest.
4. HTTPS verwenden: Stellen Sie sicher, dass Ihre Anwendung HTTPS verwendet, um Daten während der Übertragung zu schützen.

---

Die Verschlüsselung vertraulicher Informationen wie API-Schlüssel ist ein grundlegender Schritt zur Sicherung Ihrer Anwendungen. Ich verwende dies hauptsächlich für API-Schlüssel.

Das obige ist der detaillierte Inhalt vonSichere Textverschlüsselung und -entschlüsselung mit Vanilla JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!