Perlindungan CSRF dalam React dan Penyiapan API

Pemalsuan Permintaan Lintas Situs (CSRF) adalah serangan ketika situs berbahaya menipu peramban pengguna agar mengirimkan permintaan terautentikasi ke API Anda. Karena peramban secara otomatis melampirkan kukis ke permintaan, server tidak dapat membedakan permintaan sah dari aplikasi Anda dan permintaan palsu dari situs penyerang.

Kukis adalah akar penyebab kerentanan CSRF. Saat pengguna masuk ke aplikasi Anda, kukis sesi mereka disimpan di peramban. Saat mereka mengunjungi halaman penyerang, penyerang dapat memicu pengiriman formulir atau permintaan fetch ke API Anda, dan peramban secara otomatis menyertakan kukis sesi — sehingga mengautentikasi permintaan berbahaya tersebut.

Atribut kukis SameSite memberi tahu peramban kapan kukis harus disertakan dalam permintaan lintas situs. Atribut ini memiliki tiga nilai: Lax (bawaan pada peramban modern — memblokir POST lintas situs tetapi mengizinkan GET), Strict (memblokir semua permintaan lintas situs, termasuk navigasi GET), dan None (mengizinkan lintas situs, tetapi memerlukan tanda Secure HTTPS).

SameSite=Lax memblokir permintaan POST, PUT, DELETE, dan PATCH lintas situs — metode yang digunakan untuk mutasi. Jika API Anda hanya menggunakan GET untuk membaca dan POST untuk semua mutasi, SameSite=Lax secara efektif mencegah CSRF untuk SPA pada peramban modern. Ini adalah mitigasi dasar yang diandalkan sebagian besar aplikasi saat ini.

Pola Pengiriman Ganda Kukis adalah mitigasi CSRF ketika server menetapkan token CSRF acak dalam kukis non-HttpOnly. Klien membaca nilai kukis ini dan menyertakannya sebagai header permintaan khusus (misalnya, X-CSRF-Token). Server memverifikasi bahwa nilai header cocok dengan nilai kukis. Penyerang tidak dapat membaca kukis dari asal yang berbeda, sehingga mereka tidak dapat menetapkan header yang benar.

Pola Token Sinkronisasi menghasilkan token CSRF unik untuk setiap sesi pengguna di server. Untuk formulir HTML, token tersebut disematkan dalam bidang tersembunyi. Untuk panggilan API SPA, token disediakan melalui titik akhir atau tag meta dan dikirim dalam header khusus. Server memvalidasi token pada setiap permintaan yang mengubah status.

SPA React yang menyimpan JWT di memori atau localStorage dan mengirimkannya dalam header Authorization: Bearer tidak rentan terhadap CSRF klasik. Serangan CSRF mengeksploitasi autentikasi berbasis kukis — halaman penyerang tidak dapat menetapkan header khusus pada permintaan lintas asal karena pembatasan CORS, sehingga tidak dapat memalsukan header Authorization.

Permintaan lintas asal sederhana (POST formulir, pemuatan gambar) tidak mengizinkan header khusus. Hanya permintaan yang menjalani pemeriksaan awal CORS yang dapat menyertakan header khusus — dan permintaan tersebut memerlukan izin eksplisit dari server. API yang mengharuskan header khusus (seperti X-Requested-With: XMLHttpRequest) untuk semua mutasi secara inheren terlindungi dari serangan CSRF sederhana.

CORS mengatur asal mana yang dapat membaca respons dari permintaan lintas asal. CSRF berkaitan dengan asal mana yang dapat membuat permintaan yang mengubah status. Mengonfigurasi CORS untuk membatasi asal tidak mencegah CSRF—peramban tetap mengirimkan permintaan dan kuki, sedangkan CORS hanya mengatur apakah respons dapat dilihat oleh JavaScript. Serangan CSRF tidak perlu membaca respons.

Konfigurasikan kuki sesi dengan: HttpOnly: true (mencegah JavaScript membaca kuki sehingga pencurian token berbasis XSS terhalang), Secure: true (hanya dikirim melalui HTTPS), SameSite: Lax atau Strict (mencegah CSRF), serta Max-Age atau waktu kedaluwarsa yang sesuai. Keempat atribut ini jika digunakan bersama-sama akan memperkuat pengelolaan sesi secara signifikan.

Perute Aplikasi Next.js menggunakan Tindakan Server, yang berupa permintaan POST. Next.js menerapkan perlindungan CSRF dengan memeriksa header Origin terhadap host—permintaan dari asal yang tidak diharapkan akan ditolak. Pemeriksaan bawaan ini, jika digabungkan dengan kuki sesi SameSite=Lax, memberikan perlindungan CSRF yang kuat untuk perubahan berbasis Tindakan Server.

CSRF mengeksploitasi autentikasi berbasis kuki dengan menipu peramban agar mengirimkan permintaan lintas situs yang telah terautentikasi. SameSite=Lax adalah pertahanan dasar untuk peramban modern. Pola Kuki Pengiriman Ganda dan Token Sinkronisasi memberikan perlindungan tambahan. SPA React yang menggunakan JWT dalam header Authorization secara inheren tahan terhadap CSRF. Header wajib khusus dan prapemeriksaan CORS juga mengurangi risiko CSRF. Selalu gabungkan HttpOnly + Secure + SameSite pada kuki sesi.