HttpOnly cookie adalah cookie yang tidak bisa diakses oleh JavaScript (document.cookie), dan hanya dikirim otomatis oleh browser lewat HTTP request.

Saat ini, pendekatan ini dianggap lebih aman dibanding menyimpan token di localStorage.

---

1️⃣ Syarat Agar HttpOnly Cookie Bisa Digunakan

Aplikasi HARUS memenuhi kondisi berikut:

✅ Dari sisi Backend

• Set cookie dengan flag:

  • HttpOnly
  • Secure (wajib HTTPS)
  • SameSite (Lax / Strict / None)

• Gunakan cookie-based auth, bukan manual token handling

• Sediakan endpoint:

  • login
  • refresh token
  • logout

✅ Dari sisi Frontend

• Request API harus:

  fetch(url, { credentials: "include" })

• Tidak menyimpan token di JS

• Siap dengan CSRF protection

✅ Dari sisi Browser

• Browser mendukung cookie policy modern
• HTTPS aktif
• SameSite dipatuhi

---

2️⃣ Peran BE, FE, dan Browser

🔧 Backend (BE)

• Generate token (biasanya JWT)
• Simpan token di HttpOnly Cookie
• Validasi cookie di setiap request
• Rotasi token (refresh token flow)

👉 BE yang pegang kendali penuh auth

---

🎨 Frontend (FE)

• Tidak tahu isi token
• Hanya kirim request
• Fokus ke UI & state user

👉 FE jadi lebih sederhana & aman

---

🌐 Browser

• Menyimpan cookie secara aman
• Mengirim cookie otomatis ke domain terkait
• Menolak akses JS ke HttpOnly cookie

👉 Browser jadi security layer

---

3️⃣ Trade-off Dibanding Token Biasa (LocalStorage)

❌ Token di LocalStorage

Kelebihan

• Mudah implementasi
• Cocok untuk SPA sederhana

Kekurangan

• Rentan XSS
• Token bisa dicuri JS
• FE pegang auth logic

---

✅ HttpOnly Cookie

Kelebihan

• Aman dari XSS
• Browser handle token
• Cocok untuk production

Kekurangan

• Perlu CSRF protection
• Setup lebih kompleks
• CORS & cookie config harus benar

---

4️⃣ Kenapa Jadi Standar Setelah JWT?

JWT bukan masalahnya, cara menyimpannya yang bermasalah.

Awalnya:

JWT + localStorage

Masalah:

• XSS makin sering
• Token bocor = account takeover

Solusi modern:

JWT + HttpOnly Cookie

Alasannya:

• JWT tetap efisien & stateless
• Cookie memberi proteksi native browser
• Security responsibility pindah ke browser + BE

👉 Best of both worlds

---

📌 Kesimpulan

---

🎯 Rule of Thumb

Jika aplikasi punya login & data sensitif → gunakan HttpOnly Cookie.