Sebuah Kisah Autentikasi
Saya menyukai desain sistem. Saya suka memikirkan keputusan-keputusan kecil yang membuat perangkat lunak menjadi luar biasa bagi pengguna.
Sebagai seorang insinyur, saya peduli dengan keamanan. Perangkat lunak tidak ada gunanya jika tidak aman atau mengalami kerugian finansial akibat serangan. Saya ingin membangun produk yang berfungsi setiap saat.
Baru-baru ini, saya mengerjakan autentikasi untuk sebuah startup AI. Saya menggunakan Next.js untuk frontend. Next.js sangat bagus untuk tim kecil karena menggabungkan frontend dan backend dalam satu basis kode.
Selama proyek ini, saya fokus pada cara menyimpan dan melindungi token autentikasi di browser. Solusinya adalah cookie, khususnya cookie HttpOnly.
Mengapa menggunakan cookie alih-alih Local Storage?
Local Storage mudah digunakan, tetapi memiliki risiko. JavaScript dapat membacanya. Hal ini membuatnya rentan terhadap serangan Cross-Site Scripting (XSS). Jika skrip berbahaya berjalan di situs Anda, skrip tersebut dapat mencuri token pengguna Anda.
Cookie mengatasi masalah ini. Anda dapat menambahkan flag HttpOnly pada cookie. Ini memberi tahu browser: "Hanya kirim cookie ini melalui permintaan HTTP. Jangan biarkan JavaScript menyentuhnya."
Jika penyerang mencoba membaca cookie menggunakan JavaScript, mereka tidak akan melihat apa pun. Cookie tersebut tetap tidak terlihat bagi mereka, tetapi browser tetap mengirimkannya ke server Anda secara otomatis.
Untuk membuat cookie lebih aman lagi, saya menggunakan dua flag lainnya:
• Secure: Ini memastikan cookie hanya dikirim melalui HTTPS. • SameSite=Lax: Ini membantu mencegah serangan Cross-Site Request Forgery (CSRF).
Cara saya mengimplementasikannya dengan Next.js:
Saya ingin menyembunyikan backend (FastAPI) saya dari browser. Saya menggunakan Next.js sebagai proxy untuk membuat pengaturan server-ke-server.
- Pengguna masuk melalui Next.js Server Action.
- Server Action mengirimkan kredensial ke FastAPI.
- FastAPI mengembalikan token ke server Next.js.
- Server Next.js menulis token tersebut ke dalam cookie HttpOnly.
- Browser menyimpan cookie tersebut tetapi tidak dapat membacanya.
Saat pengguna membutuhkan data, server Next.js membaca cookie tersebut dan berkomunikasi dengan backend untuk mereka. Token sensitif tersebut tidak pernah menyentuh lingkungan JavaScript di browser.
Pengaturan ini menjaga backend saya tetap terisolasi dan pengguna saya lebih aman.
Bagaimana Anda menangani autentikasi dalam proyek Next.js Anda? Saya ingin sekali mendengar pendekatan Anda.