ゼロ知識ヘルシーアプリ向けクライアントサイド暗号化の完全ガイド

# ReactまたはReact Nativeプロジェクトで
touch src/cryptoUtils.js

// src/cryptoUtils.js

const textEncoder = new TextEncoder();
const textDecoder = new TextDecoder();

/**
 * パスワードとソルトから暗号化鍵を導出します。
 * @param {string} password - ユーザーのパスワード。
 * @param {Uint8Array} salt - ランダムなソルト。
 * @param {number} iterations - PBKDF2の反復回数。
 * @returns {Promise<CryptoKey>} - 導出された暗号化鍵。
 */
export const deriveKeyFromPassword = async (password, salt, iterations = 100000) => {
  const passwordBuffer = textEncoder.encode(password);

  // パスワードをPBKDF2用の生鍵としてインポートします。
  const baseKey = await window.crypto.subtle.importKey(
    "raw",
    passwordBuffer,
    { name: "PBKDF2" },
    false,
    ["deriveKey"]
  );

  // AES-GCMパラメータを使用してPBKDF2で鍵を導出します。
  const derivedKey = await window.crypto.subtle.deriveKey(
    {
      name: "PBKDF2",
      salt: salt,
      iterations: iterations,
      hash: "SHA-256",
    },
    baseKey,
    { name: "AES-GCM", length: 256 },
    true, // 必要に応じて鍵をエクスポートできます（例：バックアップ用）
    ["encrypt", "decrypt"]
  );

  return derivedKey;
};

/**
 * 新しいランダムなソルトを生成します。
 * @returns {Uint8Array} - 16バイトのランダムなソルト。
 */
export const generateSalt = () => {
  return window.crypto.getRandomValues(new Uint8Array(16));
};

// src/cryptoUtils.js

/**
 * AES-GCMを使用してデータを暗号化します。
 * @param {string} plaintext - 暗号化するデータ。
 * @param {CryptoKey} key - 暗号化鍵。
 * @returns {Promise<{ciphertext: ArrayBuffer, iv: Uint8Array}>}
 */
export const encryptData = async (plaintext, key) => {
  const dataBuffer = textEncoder.encode(plaintext);
  // IVは各暗号化操作で一意である必要があります。
  const iv = window.crypto.getRandomValues(new Uint8Array(12));

  const ciphertext = await window.crypto.subtle.encrypt(
    {
      name: "AES-GCM",
      iv: iv,
    },
    key,
    dataBuffer
  );

  return { ciphertext, iv };
};

CREATE TABLE journal_entries (
    id UUID PRIMARY KEY,
    user_id UUID NOT NULL,
    encrypted_entry TEXT NOT NULL, -- Base64エンコードされた暗号文
    iv TEXT NOT NULL,              -- Base64エンコードされたIV
    created_at TIMESTAMPZ NOT NULL,
    -- 平文データは保存しません！
);

-- ユーザーテーブルはソルトを保存する必要があります
CREATE TABLE users (
    id UUID PRIMARY KEY,
    username TEXT NOT NULL UNIQUE,
    password_hash TEXT NOT NULL, -- 認証用、暗号化用ではありません
    encryption_salt TEXT NOT NULL -- Base64エンコードされたソルト
);

// src/components/JournalEntryForm.jsx
import React, { useState } from 'react';
import { deriveKeyFromPassword, encryptData } from '../cryptoUtils';

// ArrayBufferをBase64に変換するヘルパー
const bufferToBase64 = (buffer) => {
  return btoa(String.fromCharCode.apply(null, new Uint8Array(buffer)));
};

const JournalEntryForm = ({ userPassword, userSalt }) => {
  const [entry, setEntry] = useState('');
  const [isSaving, setIsSaving] = useState(false);

  const handleSave = async () => {
    if (!entry || !userPassword || !userSalt) {
      alert("暗号化に必要なデータがありません。");
      return;
    }
    setIsSaving(true);
    try {
      // 1. ユーザーのパスワードと一意のソルトから鍵を導出
      const key = await deriveKeyFromPassword(userPassword, userSalt);

      // 2. 日記エントリを暗号化
      const { ciphertext, iv } = await encryptData(entry, key);

      // 3. バイナリデータをJSON 전송用のBase64に変換
      const encryptedEntryBase64 = bufferToBase64(ciphertext);
      const ivBase64 = bufferToBase64(iv);

      // 4. 暗号化されたデータをゼロ知識サーバーに送信
      await fetch('/api/journal', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          encrypted_entry: encryptedEntryBase64,
          iv: ivBase64,
        }),
      });

      setEntry('');
      alert('エントリが安全に保存されました！ ✨');
    } catch (error) {
      console.error("暗号化に失敗しました:", error);
      alert("エントリを安全に保存できませんでした。");
    } finally {
      setIsSaving(false);
    }
  };

  return (
    <div>
      <textarea
        value={entry}
        onChange={(e) => setEntry(e.target.value)}
        placeholder="ここに個人的な健康日記を書いてください..."
      />
      <button onClick={handleSave} disabled={isSaving}>
        {isSaving ? '保存中...' : '安全に保存'}
      </button>
    </div>
  );
};

export default JournalEntryForm;

// src/cryptoUtils.js

/**
 * AES-GCMを使用してデータを復号化します。
 * @param {ArrayBuffer} ciphertext - 暗号化されたデータ。
 * @param {CryptoKey} key - 暗号化鍵。
 * @param {Uint8Array} iv - 暗号化に使用された初期化ベクトル。
 * @returns {Promise<string>} - 復号化された平文。
 */
export const decryptData = async (ciphertext, key, iv) => {
  const decryptedBuffer = await window.crypto.subtle.decrypt(
    {
      name: "AES-GCM",
      iv: iv,
    },
    key,
    ciphertext
  );

  return textDecoder.decode(decryptedBuffer);
};

// src/components/JournalViewer.jsx
import React, { useState, useEffect } from 'react';
import { deriveKeyFromPassword, decryptData } from '../cryptoUtils';

// Base64をUint8Arrayに変換するヘルパー
const base64ToUint8Array = (base64) => {
    const binary_string = window.atob(base64);
    const len = binary_string.length;
    const bytes = new Uint8Array(len);
    for (let i = 0; i < len; i++) {
        bytes[i] = binary_string.charCodeAt(i);
    }
    return bytes;
};

const JournalViewer = ({ userPassword, userSalt }) => {
  const [decryptedEntries, setDecryptedEntries] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchAndDecryptEntries = async () => {
      try {
        // 1. サーバーから暗号化されたエントリをフェッチ
        const response = await fetch('/api/journal');
        const entries = await response.json();

        // 2. 鍵を導出（一度だけ実行すればOK）
        const salt = base64ToUint8Array(userSalt);
        const key = await deriveKeyFromPassword(userPassword, salt);

        // 3. 各エントリを復号化
        const decryptedPromises = entries.map(async (entry) => {
          const ciphertext = base64ToUint8Array(entry.encrypted_entry);
          const iv = base64ToUint8Array(entry.iv);
          const plaintext = await decryptData(ciphertext, key, iv);
          return { id: entry.id, text: plaintext, createdAt: entry.created_at };
        });

        const results = await Promise.all(decryptedPromises);
        setDecryptedEntries(results);
      } catch (error) {
        console.error("復号化に失敗しました:", error);
        alert("エントリを復号化できませんでした。パスワードを確認してください。");
      } finally {
        setIsLoading(false);
      }
    };

    if(userPassword && userSalt) {
        fetchAndDecryptEntries();
    }
  }, [userPassword, userSalt]);

  if (isLoading) return <p>データを復号化中...</p>;

  return (
    <div>
      {decryptedEntries.map(entry => (
        <div key={entry.id}>
          <p>{entry.text}</p>
          <small>保存日: {new Date(entry.createdAt).toLocaleString()}</small>
        </div>
      ))}
    </div>
  );
};

export default JournalViewer;