Enkripsi Data Sensitif di Sisi Klien: Membangun Aplikasi Web yang Aman dengan Web Crypto API dan IndexedDB

1. Pendahuluan

Di era digital ini, privasi dan keamanan data adalah mata uang baru. Sebagai developer web, kita seringkali fokus mengamankan data di sisi server—mulai dari database, API, hingga infrastruktur cloud. Namun, bagaimana dengan data sensitif yang disimpan atau diproses di sisi klien, yaitu langsung di browser pengguna?

Banyak aplikasi web modern yang membutuhkan kemampuan untuk menyimpan data pengguna secara lokal, entah itu untuk fitur offline-first, meningkatkan performa, atau sekadar memberikan pengalaman yang lebih cepat dan responsif. Bayangkan aplikasi catatan pribadi, dompet kripto, atau manajer kata sandi berbasis web. Data di dalamnya jelas sangat sensitif.

Menyimpan data sensitif langsung di localStorage atau sessionStorage adalah sebuah ⚠️ bahaya besar. Data di sana tidak terenkripsi dan dapat dengan mudah diakses oleh skrip pihak ketiga (misalnya melalui serangan XSS) atau bahkan ekstensi browser yang jahat.

Di sinilah enkripsi data di sisi klien (Client-Side Encryption) menjadi krusial. Dengan memanfaatkan kombinasi Web Crypto API dan IndexedDB, kita bisa membangun lapisan keamanan tambahan yang kuat, memastikan bahwa data sensitif pengguna tetap terenkripsi bahkan saat berada di perangkat mereka. Artikel ini akan memandu Anda memahami mengapa ini penting dan bagaimana mengimplementasikannya untuk membangun aplikasi web yang lebih aman dan mengutamakan privasi.

2. Memahami Ancaman dan Kebutuhan Enkripsi Klien-Sisi

Sebelum kita menyelam ke implementasi teknis, mari kita pahami mengapa enkripsi di sisi klien itu fundamental, terutama untuk data yang disimpan secara lokal.

Kenapa localStorage itu Tidak Aman untuk Data Sensitif?

localStorage dan sessionStorage memang nyaman, tapi mereka tidak dirancang untuk menyimpan data sensitif. Mereka seperti laci tanpa kunci. Setiap skrip JavaScript yang berjalan di halaman Anda (termasuk skrip pihak ketiga atau yang disuntikkan melalui XSS) memiliki akses penuh ke sana. Ini berarti:

• Serangan Cross-Site Scripting (XSS): Jika aplikasi Anda rentan terhadap XSS, penyerang dapat menjalankan kode arbitrer dan mencuri semua data di localStorage atau sessionStorage.
• Ekstensi Browser Berbahaya: Beberapa ekstensi browser mungkin memiliki izin untuk membaca data dari localStorage di semua situs yang Anda kunjungi.
• Malware di Perangkat Pengguna: Jika perangkat pengguna terinfeksi malware, data yang tidak terenkripsi di browser bisa menjadi target mudah.

Kasus Penggunaan Kritis untuk Enkripsi Klien-Sisi

Enkripsi klien-sisi sangat relevan untuk aplikasi yang mengelola informasi sangat pribadi atau bernilai tinggi:

• Aplikasi Catatan Pribadi/Jurnal: Catatan yang mungkin berisi informasi rahasia.
• Manajer Kata Sandi (Password Manager): Kredensial login adalah target utama.
• Dompet Kripto Berbasis Web: Private key atau seed phrase yang disimpan lokal.
• Aplikasi Kesehatan/Medis: Data rekam medis yang sangat sensitif.
• Aplikasi Keuangan Pribadi: Informasi transaksi atau rekening bank.

Dalam kasus-kasus ini, kita menginginkan apa yang disebut End-to-End Encryption (E2EE), di mana data dienkripsi di perangkat pengguna dan hanya dapat didekripsi kembali di perangkat itu (atau perangkat lain yang memiliki kunci yang sama). Bahkan jika data ini disinkronkan ke server, server hanya akan melihat ciphertext (data terenkripsi) dan tidak akan pernah bisa membaca isinya. Kunci enkripsi tidak pernah meninggalkan perangkat pengguna, atau setidaknya tidak pernah disimpan dalam bentuk yang dapat langsung dibaca oleh server.

Mengapa IndexedDB Lebih Baik daripada LocalStorage untuk Data Terenkripsi?

Untuk menyimpan data terenkripsi di sisi klien, IndexedDB adalah pilihan yang jauh lebih baik daripada localStorage:

• Penyimpanan Terstruktur: IndexedDB adalah database NoSQL berbasis objek, memungkinkan Anda menyimpan data dalam struktur yang kompleks dan membuat indeks untuk pencarian yang efisien. Ini ideal untuk menyimpan banyak item data terenkripsi.
• Asynchronous dan Non-Blocking: Operasi IndexedDB bersifat asinkron, yang berarti tidak akan memblokir main thread browser, menjaga UI tetap responsif.
• Kapasitas Lebih Besar: IndexedDB menawarkan kapasitas penyimpanan yang jauh lebih besar (biasanya puluhan hingga ratusan MB atau bahkan lebih) dibandingkan localStorage (sekitar 5-10 MB).
• Isolasi Origin: Data di IndexedDB diisolasi per origin (protokol, host, port), sama seperti localStorage, yang merupakan standar keamanan web.

Dengan IndexedDB, kita dapat menyimpan ciphertext (data yang sudah dienkripsi) bersama dengan metadata lain yang diperlukan untuk dekripsi, seperti Initialization Vector (IV), dalam struktur yang terorganisir.

3. Web Crypto API: Kunci Enkripsi Anda di Browser

Web Crypto API adalah API standar browser yang menyediakan primitif kriptografi untuk melakukan operasi seperti hashing, pembuatan tanda tangan digital, verifikasi, dan tentu saja, enkripsi serta dekripsi. Ini adalah fondasi keamanan kita.

Konsep Dasar Web Crypto API untuk Enkripsi

Untuk enkripsi data, kita akan fokus pada enkripsi simetris (symmetric encryption). Artinya, kunci yang sama digunakan untuk enkripsi dan dekripsi. Algoritma yang direkomendasikan adalah AES-GCM (Advanced Encryption Standard - Galois/Counter Mode). AES-GCM adalah algoritma yang kuat dan menyediakan autentikasi data selain enkripsi, yang berarti data tidak hanya dienkripsi tetapi juga diverifikasi integritasnya (tidak dimodifikasi).

📌 Kunci Enkripsi (Encryption Key): Ini adalah rahasia utama Anda. Keamanan seluruh sistem bergantung pada kunci ini. 📌 Initialization Vector (IV): Sebuah nilai acak yang harus unik untuk setiap operasi enkripsi dengan kunci yang sama. IV tidak perlu dirahasiakan, tetapi harus selalu berbeda untuk setiap enkripsi. IV memastikan bahwa dua plaintext yang sama akan menghasilkan ciphertext yang berbeda, sehingga mencegah serangan analisis pola.

Contoh Kode: Generate Kunci dan Enkripsi Data

Mari kita lihat bagaimana menggunakan Web Crypto API.

// Fungsi untuk menghasilkan kunci enkripsi simetris (AES-GCM)
async function generateEncryptionKey() {
  const key = await crypto.subtle.generateKey(
    {
      name: "AES-GCM",
      length: 256, // Panjang kunci 256-bit
    },
    true, // Bisa diekspor (untuk disimpan dalam format tertentu jika perlu)
    ["encrypt", "decrypt"]
  );
  return key;
}

// Fungsi untuk mengenkripsi data
async function encryptData(key, data) {
  const encoder = new TextEncoder();
  const encodedData = encoder.encode(data); // Ubah string ke Uint8Array

  // Generate IV baru untuk setiap enkripsi
  const iv = crypto.getRandomValues(new Uint8Array(12)); // IV harus 12 byte untuk AES-GCM

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

  // Kembalikan ciphertext dan IV (IV harus disimpan bersama ciphertext)
  return {
    ciphertext: Array.from(new Uint8Array(ciphertext)), // Ubah ArrayBuffer ke array agar mudah disimpan
    iv: Array.from(iv),
  };
}

// Fungsi untuk mendekripsi data
async function decryptData(key, encryptedObject) {
  const decoder = new TextDecoder();
  const decrypted = await crypto.subtle.decrypt(
    {
      name: "AES-GCM",
      iv: new Uint8Array(encryptedObject.iv),
    },
    key,
    new Uint8Array(encryptedObject.ciphertext)
  );
  return decoder.decode(decrypted); // Ubah kembali Uint8Array ke string
}

// Contoh penggunaan:
/*
(async () => {
  const myKey = await generateEncryptionKey();
  const sensitiveData = "Ini adalah data yang sangat rahasia!";

  const encrypted = await encryptData(myKey, sensitiveData);
  console.log("Data terenkripsi:", encrypted);

  const decrypted = await decryptData(myKey, encrypted);
  console.log("Data terdekripsi:", decrypted); // Output: Ini adalah data yang sangat rahasia!
})();
*/

💡 Penting: Kunci (myKey) dalam contoh di atas adalah objek CryptoKey. Anda tidak bisa langsung menyimpannya di IndexedDB atau localStorage begitu saja. Kunci ini harus di-derive dari sesuatu yang diingat pengguna (misalnya password utama) menggunakan algoritma seperti PBKDF2 (Password-Based Key Derivation Function 2). Kita akan bahas ini lebih lanjut.

4. IndexedDB: Penyimpanan Data Terstruktur yang Aman

IndexedDB adalah “mini-database” di browser yang memungkinkan Anda menyimpan data dalam jumlah besar secara terstruktur dan asinkron. Ini sangat cocok untuk menyimpan ciphertext dari data sensitif Anda.

Membuka dan Menggunakan IndexedDB

const DB_NAME = 'MySecureAppDB';
const DB_VERSION = 1;
const STORE_NAME = 'secureNotes'; // Nama object store untuk catatan terenkripsi

function openDatabase() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open(DB_NAME, DB_VERSION);

    request.onerror = (event) => {
      console.error("IndexedDB error:", event.target.errorCode);
      reject("Error opening database");
    };

    request.onsuccess = (event) => {
      resolve(event.target.result);
    };

    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      // Buat object store jika belum ada
      if (!db.objectStoreNames.contains(STORE_NAME)) {
        db.createObjectStore(STORE_NAME, { keyPath: 'id', autoIncrement: true });
      }
    };
  });
}

// Fungsi untuk menyimpan data terenkripsi ke IndexedDB
async function storeEncryptedData(encryptedObject) {
  const db = await openDatabase();
  const transaction = db.transaction([STORE_NAME], 'readwrite');
  const store = transaction.objectStore(STORE_NAME);

  return new Promise((resolve, reject) => {
    // Tambahkan id unik atau biarkan autoIncrement
    const dataToStore = {
      id: encryptedObject.id || Date.now(), // Gunakan id yang ada atau generate baru
      ciphertext: encryptedObject.ciphertext,
      iv: encryptedObject.iv,
      // Tambahkan metadata lain yang mungkin perlu disimpan (misal: timestamp, judul terenkripsi)
    };
    const request = store.put(dataToStore); // put akan menambah atau mengupdate

    request.onsuccess = () => {
      resolve(request.result); // Mengembalikan ID dari data yang disimpan
    };

    request.onerror = (event) => {
      console.error("Error storing data:", event.target.errorCode);
      reject("Error storing data");
    };
  });
}

// Fungsi untuk mengambil data terenkripsi dari IndexedDB
async function getEncryptedData(id) {
  const db = await openDatabase();
  const transaction = db.transaction([STORE_NAME], 'readonly');
  const store = transaction.objectStore(STORE_NAME);

  return new Promise((resolve, reject) => {
    const request = store.get(id);

    request.onsuccess = () => {
      resolve(request.result); // Mengembalikan objek terenkripsi
    };

    request.onerror = (event) => {
      console.error("Error retrieving data:", event.target.errorCode);
      reject("Error retrieving data");
    };
  });
}

⚠️ Peringatan: Jangan pernah menyimpan kunci enkripsi Anda di IndexedDB bersama dengan data terenkripsi. Itu seperti menyimpan kunci brankas di dalam brankas itu sendiri!

5. Membangun Solusi Enkripsi E2EE End-to-End di Browser

Sekarang kita akan menggabungkan Web Crypto API dan IndexedDB untuk membangun alur kerja E2EE yang lengkap. Tantangan utamanya adalah bagaimana mengelola kunci enkripsi agar aman dan bisa direplikasi.

Derivasi Kunci dari Kata Sandi Pengguna (PBKDF2)

Solusi paling umum untuk manajemen kunci di sisi klien adalah dengan menderivasi kunci enkripsi dari kata sandi utama yang dimasukkan pengguna. Pengguna hanya perlu mengingat satu kata sandi, dan dari kata sandi itu, kita bisa mendapatkan kunci kriptografi yang kuat. Algoritma yang digunakan adalah PBKDF2.

PBKDF2 memerlukan:

• Kata Sandi (Password): Input dari pengguna.
• Salt: Nilai acak unik yang harus disimpan bersama data. Salt memastikan bahwa dua pengguna dengan kata sandi yang sama akan menghasilkan kunci yang berbeda, dan juga melindungi dari serangan rainbow table.
• Iterasi: Jumlah pengulangan proses hashing. Semakin tinggi, semakin aman, tapi juga semakin lambat.

// Derivasi kunci dari password menggunakan PBKDF2
async function deriveKeyFromPassword(password, salt, iterations = 100000) {
  const encoder = new TextEncoder();
  const keyMaterial = await crypto.subtle.importKey(
    "raw",
    encoder.encode(password),
    { name: "PBKDF2" },
    false,
    ["deriveKey"]
  );

  const derivedKey = await crypto.subtle.deriveKey(
    {
      name: "PBKDF2",
      salt: new Uint8Array(salt),
      iterations: iterations,
      hash: "SHA-256", // Algoritma hash yang digunakan
    },
    keyMaterial,
    { name: "AES-GCM", length: 256 }, // Kunci target untuk AES-GCM 256-bit
    true, // Bisa diekspor
    ["encrypt", "decrypt"]
  );

  return derivedKey;
}

// Fungsi untuk menghasilkan salt baru
function generateSalt() {
  return Array.from(crypto.getRandomValues(new Uint8Array(16))); // Salt 16 byte
}

Alur Kerja Enkripsi dan Dekripsi Lengkap

🎯 Alur Kerja Enkripsi Data:

1. Pengguna memasukkan kata sandi utama untuk aplikasi.
2. Jika ini adalah data pertama, generate salt baru dan simpan salt ini (misalnya di IndexedDB, tapi terpisah dari data terenkripsi yang dienkripsi dengan kunci derivasi ini). Jika bukan yang pertama, ambil salt yang sudah ada.
3. Derivasi kunci enkripsi dari kata sandi pengguna dan salt menggunakan PBKDF2.
4. Generate IV baru yang unik untuk setiap item data yang akan dienkripsi.
5. Enkripsi data menggunakan kunci yang diderivasi dan IV.
6. Simpan ciphertext dan IV ke IndexedDB.

🎯 Alur Kerja Dekripsi Data:

1. Pengguna memasukkan kata sandi utama untuk aplikasi.
2. Ambil salt yang terkait dengan kunci enkripsi global pengguna (atau yang digunakan saat enkripsi).
3. Derivasi kunci enkripsi dari kata sandi pengguna dan salt menggunakan PBKDF2.
4. Ambil ciphertext dan IV dari IndexedDB untuk item data yang ingin didekripsi.
5. Dekripsi data menggunakan kunci yang diderivasi dan IV.

Contoh Kode Komplet (Fungsi Pembantu)

// --- Fungsi Pembantu ---

// Fungsi untuk mengenkripsi data (re-use dari atas)
async function encryptData(key, data) {
  const encoder = new TextEncoder();
  const encodedData = encoder.encode(data);
  const iv = crypto.getRandomValues(new Uint8Array(12)); // IV unik per enkripsi

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

  return {
    ciphertext: Array.from(new Uint8Array(ciphertext)),
    iv: Array.from(iv),
  };
}

// Fungsi untuk mendekripsi data (re-use dari atas)
async function decryptData(key, encryptedObject) {
  const decoder = new TextDecoder();