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

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

暗号化を使用する理由

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

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

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

---

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

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

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



<h3>
  
  
  パスワードからのキーの導出
</h3>

<p>PBKDF2 を使用して強力な暗号化キーを取得します:<br>
</p>

<pre class="brush:php;toolbar:false">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 




<hr>

<h2>
  
  
  セキュリティのベストプラクティス
</h2>

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


<hr>

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


          

            
        

以上がVanilla JavaScript による安全なテキストの暗号化と復号化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。