Vanilla JavaScript による安全なテキストの暗号化と復号化-jsチュートリアル-php.cn

Vanilla JavaScript による安全なテキストの暗号化と復号化

Linda Hamilton

リリース： 2024-12-08 03:37:10

オリジナル

1031 人が閲覧しました

Secure Text Encryption and Decryption with Vanilla JavaScript

今日のデジタル時代では、API キー、パスワード、ユーザーデータなどの機密情報の保護がこれまで以上に重要になっています。堅牢な暗号化および復号化戦略により、不正アクセスを防止し、データの機密性を確保できます。このブログ投稿では、最新の安全なアプローチとして Web Crypto API を活用し、バニラ JavaScript を使用してテキストを暗号化および復号化する方法を検討します。

暗号化を使用する理由

暗号化は、読み取り可能なデータ (平文) を、正しいキーで復号化した場合にのみ読み取ることができるスクランブル形式 (暗号文) に変換します。これにより、たとえ誰かが暗号化されたデータを傍受したとしても、キーがなければデータは無意味なままになります。堅牢な暗号化メカニズムにより以下が保護されます:

API キーはフロントエンドコードに保存されます。
ユーザーの機密情報。
安全でないチャネルを介して転送されるデータ。

JavaScript でこれを安全に実装する方法を詳しく見てみましょう。

AES-GCM を使用した暗号化と復号化

暗号化と整合性検証の両方を提供する最新の標準である AES-GCM (Advanced Encryption Standard - Galois/Counter Mode) を使用します。手順には以下が含まれます:

パスワード導出: PBKDF2 (パスワードベースのキー導出関数 2) を使用して、パスワードから安全なキーを導出します。
ソルトと IV: 暗号化ごとにランダムなソルト (パスワード導出を一意にするため) と iv (初期化ベクトル) を生成します。
暗号化: AES-GCM を使用して平文を暗号化します。
復号化: 同じパスワードと Salt/iv を使用して暗号文を復号化します。

コードの実装

これは完全な JavaScript 実装です。

変換用ユーティリティ

データの保存と取得を簡単にするために、ArrayBuffer と 16 進数の間で変換します。

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

ログイン後にコピー

パスワードからのキーの導出

PBKDF2 を使用して強力な暗号化キーを取得します:

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

ログイン後にコピー

暗号化機能

パスワードを使用してテキストを暗号化します:

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

ログイン後にコピー

復号化機能

同じパスワードでテキストを復号化します:

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

ログイン後にコピー

使用例

これらの関数の使用方法を見てみましょう:

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

ログイン後にコピー