Frontend Academy · Pelajaran

CSRF: Cookie dan Token SameSite

Pahami cara Cross-Site Request Forgery mengeksploitasi cookie, gunakan SameSite=Strict/Lax untuk mencegahnya, dan tambahkan token sinkronisasi untuk perlindungan ekstra.

CSRF: Cookie dan Token SameSite adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa Itu CSRF?

Pemalsuan Permintaan Lintas Situs: penyerang menipu peramban pengguna yang telah terautentikasi agar mengirim permintaan ke situs Anda. Peramban menyertakan kuki pengguna—server menganggapnya sebagai permintaan sah dari pengguna.

Serangan CSRF Klasik

Pengguna telah masuk ke bank.com. Mereka mengunjungi evil.com. evil.com mengirimkan formulir tersembunyi ke bank.com/transfer dengan nomor rekening penyerang. Peramban mengirimkan kuki sesi bank.com secara otomatis. Server mentransfer uang.

Masalah Kepercayaan

CSRF berhasil karena peramban secara otomatis menyertakan kuki pada permintaan lintas asal. Tanpa perlindungan tambahan, server tidak dapat mengetahui bahwa permintaan tersebut berasal dari situs berbahaya.

Kuki SameSite — Perbaikan Modern

Atribut kuki SameSite mengatur kapan kuki dikirim pada permintaan lintas asal. Strict: tidak pernah dikirim lintas asal. Lax (bawaan di Chrome): hanya dikirim saat navigasi GET tingkat atas. None: selalu dikirim (atribut Secure juga wajib).

Set-Cookie: session=abc; HttpOnly; Secure; SameSite=Lax

Bawaan SameSite=Lax

Chrome menetapkan semua kuki ke Lax secara bawaan jika SameSite tidak ditentukan. Ini memblokir sebagian besar CSRF—tetapi Anda tetap harus menentukannya secara eksplisit.

SameSite=Strict untuk Keamanan Maksimal

Gunakan Strict untuk kuki yang paling sensitif (sesi administrator, transaksi bank). Kekurangannya: pengguna tampak belum masuk saat datang melalui tautan dari situs lain.

Token CSRF (Pola Sinkronisasi)

Untuk mendukung peramban lama atau menambah keamanan, gunakan token CSRF. Server menghasilkan token acak, menyematkannya di halaman, dan mewajibkannya pada setiap permintaan yang mengubah keadaan.

// Server embeds token in HTML or sets it as a non-HttpOnly cookie:
<meta name="csrf-token" content="a1b2c3...">

// Client reads token and sends in header:
const token = document.querySelector('meta[name=csrf-token]').content;
fetch('/transfer', {
  method: 'POST',
  headers: { 'X-CSRF-Token': token },
  body: JSON.stringify({ amount: 100 })
});

// Server verifies the X-CSRF-Token header matches the user's session

Kuki Pengiriman Ganda

Server menetapkan kuki CSRF (tanpa HttpOnly agar dapat dibaca oleh JS). Klien membacanya dan mengirim nilainya dalam header. Server memeriksa apakah kuki tersebut sesuai dengan header. Penyerang tidak dapat membaca kuki lintas asal, sehingga tidak dapat meniru header tersebut.

Mengapa Ini Berhasil

evil.com milik penyerang tidak dapat membaca kuki dari bank.com (Kebijakan Asal yang Sama). Jadi, penyerang tidak dapat menetapkan header X-CSRF-Token. Permintaan tersebut gagal dalam pemeriksaan token di server.

CSRF pada SPA dengan Token Bearer

Jika Anda melakukan autentikasi dengan Authorization: Bearer <jwt> yang disimpan di memori (bukan dalam kuki), CSRF tidak berlaku—peramban tidak mengirim header secara otomatis. Komprominya: lebih rentan terhadap XSS (karena token yang dapat diakses JS bisa dicuri).

Trik Header Khusus

Untuk API yang hanya menerima JSON dengan header khusus (misalnya X-Requested-With), peramban mengirim permintaan OPTIONS pra-penerbangan—dan tidak menyertakan kuki pada pra-penerbangan tersebut. Ini secara efektif memblokir CSRF berbasis formulir sederhana.

Titik Akhir Idempoten vs Pengubah Keadaan

CSRF terutama memengaruhi permintaan yang mengubah keadaan (POST, PUT, DELETE). Titik akhir GET harus idempoten—tidak menimbulkan efek samping—sehingga GET yang dipalsukan tidak dapat menimbulkan kerugian.

Pemeriksaan Singkat

Nilai kuki SameSite mana yang secara bawaan mencegah kuki dikirim pada sebagian besar permintaan lintas situs di peramban modern?

Rangkuman: Pencegahan CSRF

Tetapkan SameSite=Lax (atau Strict) pada kuki sesi—ini memblokir sebagian besar CSRF. Tambahkan HttpOnly + Secure. Gunakan token CSRF (pola sinkronisasi atau kuki pengiriman ganda) untuk perlindungan tambahan. Token Bearer dalam header menghindari CSRF, tetapi meningkatkan risiko XSS. Trik header khusus memaksa pra-penerbangan. Jadikan permintaan GET idempoten.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “CSRF: Cookie dan Token SameSite” gratis?

Ya — teks lengkap “CSRF: Cookie dan Token SameSite” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “CSRF: Cookie dan Token SameSite”?

Pahami cara Cross-Site Request Forgery mengeksploitasi cookie, gunakan SameSite=Strict/Lax untuk mencegahnya, dan tambahkan token sinkronisasi untuk perlindungan ekstra. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “CSRF: Cookie dan Token SameSite” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Frontend Academy