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

暗號化を使用する理由

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

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

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

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

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

1. パスワード導出: PBKDF2 (パスワードベースのキー導出関數(shù) 2) を使用して、パスワードから安全なキーを?qū)С訾筏蓼埂?/li>
2. ソルトと IV: 暗號化ごとにランダムなソルト (パスワード導出を一意にするため) と iv (初期化ベクトル) を生成します。
3. 暗號化: AES-GCM を使用して平文を暗號化します。
4. 復號化: 同じパスワードと Salt/iv を使用して暗號文を復號化します。

コードの実裝

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

変換用ユーティリティ

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

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

使用例

これらの関數(shù)の使用方法を見てみましょう:

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

セキュリティのベストプラクティス

1. 強力なパスワードを使用する: 暗號化の安全性は、使用するパスワードと同等です。
2. 塩と點滴を安全に保管します: 塩と點滴は常に暗號化されたデータと一緒に保存してください。
3. 秘密のハードコーディングを避ける: コードベースに機密データやパスワードをハードコーディングしないでください。
4. HTTPS を使用する: アプリケーションが転送中のデータを保護するために HTTPS を使用していることを確認します。

API キーなどの機密情報の暗號化は、アプリケーションを保護するための基本的な手順です。 私はこれを主に API キーに使用します。

以上がVanilla JavaScript による安全なテキストの暗號化と復號化の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。