WebCrypto APIでブラウザ内クレデンシャル暗号化を実装する — AES-256-GCM + PBKDF2の実践

interface StoredCredentials {
  username: string;
  password: string;
}

interface EncryptedCredentials {
  encrypted: string; // Base64
  salt: string;      // Base64
  iv: string;        // Base64
}

class CredentialStorageError extends Error {
  constructor(message: string, public code: string) {
    super(message);
    this.name = "CredentialStorageError";
  }
}

const STORAGE_KEY = "my-app-credentials";
const PBKDF2_ITERATIONS = 100000;
const SALT_LENGTH = 16;
const IV_LENGTH = 12;

async function deriveKey(password: string, salt: Uint8Array): Promise<CryptoKey> {
  // パスワードを「鍵素材」としてインポート
  const passwordKey = await window.crypto.subtle.importKey(
    "raw",
    new TextEncoder().encode(password),
    { name: "PBKDF2" },
    false,       // エクスポート不可
    ["deriveKey"] // この鍵素材は「鍵導出」にのみ使用
  );

  // PBKDF2で暗号鍵を導出
  return await window.crypto.subtle.deriveKey(
    {
      name: "PBKDF2",
      salt: salt.buffer as ArrayBuffer,
      iterations: PBKDF2_ITERATIONS,
      hash: "SHA-256"
    },
    passwordKey,
    { name: "AES-GCM", length: 256 }, // 出力: AES-256用の鍵
    false,              // エクスポート不可
    ["encrypt", "decrypt"] // この鍵で暗号化と復号を許可
  );
}

export async function encryptCredentials(
  credentials: StoredCredentials,
  masterPassword: string
): Promise<EncryptedCredentials> {
  // ランダムなsaltとIVを生成
  const salt = generateRandomBytes(SALT_LENGTH);
  const iv = generateRandomBytes(IV_LENGTH);

  // マスターパスワードから暗号鍵を導出
  const key = await deriveKey(masterPassword, salt);

  // クレデンシャルをJSON → バイト列に変換
  const credentialsJson = JSON.stringify(credentials);
  const credentialsBytes = new TextEncoder().encode(credentialsJson);

  // AES-256-GCMで暗号化
  const encryptedBuffer = await window.crypto.subtle.encrypt(
    { name: "AES-GCM", iv: iv.buffer as ArrayBuffer },
    key,
    credentialsBytes
  );

  // Base64でエンコードして返す
  return {
    encrypted: arrayBufferToBase64(encryptedBuffer),
    salt: arrayBufferToBase64(salt.buffer as ArrayBuffer),
    iv: arrayBufferToBase64(iv.buffer as ArrayBuffer)
  };
}

export async function decryptCredentials(
  encryptedData: EncryptedCredentials,
  masterPassword: string
): Promise<StoredCredentials> {
  try {
    const salt = new Uint8Array(base64ToArrayBuffer(encryptedData.salt));
    const iv = new Uint8Array(base64ToArrayBuffer(encryptedData.iv));
    const encryptedBuffer = base64ToArrayBuffer(encryptedData.encrypted);

    // 同じパスワードとsaltから同じ鍵を導出
    const key = await deriveKey(masterPassword, salt);

    // 復号
    const decryptedBuffer = await window.crypto.subtle.decrypt(
      { name: "AES-GCM", iv: iv.buffer },
      key,
      encryptedBuffer
    );

    const credentialsJson = new TextDecoder().decode(decryptedBuffer);
    return JSON.parse(credentialsJson) as StoredCredentials;
  } catch (error) {
    if (error instanceof CredentialStorageError) throw error;
    throw new CredentialStorageError(
      "Failed to decrypt credentials - invalid password or corrupted data",
      "DECRYPTION_FAILED"
    );
  }
}

export async function saveCredentials(
  credentials: StoredCredentials,
  masterPassword: string
): Promise<void> {
  const encryptedData = await encryptCredentials(credentials, masterPassword);
  window.localStorage.setItem(STORAGE_KEY, JSON.stringify(encryptedData));
}

export async function loadCredentials(
  masterPassword: string
): Promise<StoredCredentials | null> {
  const storedData = window.localStorage.getItem(STORAGE_KEY);
  if (!storedData) return null;

  const encryptedData: EncryptedCredentials = JSON.parse(storedData);
  return await decryptCredentials(encryptedData, masterPassword);
}

import { browser } from "$app/environment";

function generateRandomBytes(length: number): Uint8Array {
  if (!browser || !window.crypto || !window.crypto.getRandomValues) {
    throw new CredentialStorageError("Crypto API not available", "CRYPTO_UNAVAILABLE");
  }
  return window.crypto.getRandomValues(new Uint8Array(length));
}