🛡️ Memahami CORS dan CSRF dalam Pengembangan Web

Dalam dunia pengembangan web modern, keamanan adalah hal yang sangat penting. Dua konsep yang sering muncul ketika membahas keamanan komunikasi antara browser dan server adalah CORS (Cross-Origin Resource Sharing) dan CSRF (Cross-Site Request Forgery). Walaupun keduanya terdengar mirip, mereka memiliki fungsi dan konteks yang berbeda. Mari kita bahas satu per satu.

🌐 Apa itu CORS?

CORS (Cross-Origin Resource Sharing) adalah mekanisme keamanan yang diterapkan oleh browser untuk mengatur permintaan antar domain. Secara default, browser akan membatasi permintaan HTTP dari satu origin (domain) ke origin lain untuk mencegah akses ilegal.

📌 Contoh Kasus:

• Aplikasi frontend kamu berjalan di http://localhost:3000
• API backend kamu berjalan di http://localhost:5000
• Ketika frontend mencoba memanggil API backend, browser akan memblokir permintaan tersebut kecuali backend memberikan izin melalui header CORS.

✅ Cara Mengizinkan CORS:

Server backend perlu mengembalikan header seperti:

Access-Control-Allow-Origin: http://localhost:3000

Atau, untuk lebih fleksibel (hati-hati dengan ini!):

Access-Control-Allow-Origin: *

⚙️ Contoh Konfigurasi (misalnya di .NET):

builder.Services.AddCors();

app.UseCors(policy =>
    policy.WithOrigins("http://localhost:3000")
          .AllowAnyHeader()
          .AllowAnyMethod());

---

🔓 Apa itu CSRF?

CSRF (Cross-Site Request Forgery) adalah jenis serangan di mana penyerang menipu browser korban agar mengirim permintaan tidak sah ke server tempat korban sedang login.

📌 Contoh Kasus:

1. Kamu login di https://bankku.com
2. Tanpa logout, kamu mengunjungi situs palsu https://jebakan.com
3. Situs itu menjalankan script tersembunyi seperti:

<img src="https://bankku.com/transfer?to=akunPenyerang&amount=1000000" />

Karena kamu masih login, browser akan otomatis menyertakan cookie session milikmu.

Permintaan pun berhasil, dan uangmu bisa berpindah tangan tanpa kamu sadari.

✅ Cara Mencegah CSRF:

• Token CSRF: Server mengirim token unik yang harus dikirim balik oleh klien saat mengirim request.
• SameSite Cookies: Mengatur cookie agar tidak dikirim dalam permintaan lintas situs.
• Validasi Origin/Referer: Server mengecek dari mana asal request.

🔐 Contoh Token CSRF:

<form method="POST">
  <input type="hidden" name="csrf_token" value="abc123">
</form>

---

🧠 Perbedaan Utama: CORS vs CSRF

Aspek	CORS	CSRF
Tujuan	Melindungi resource server dari akses lintas domain tanpa izin	Melindungi aksi pengguna dari permintaan palsu
Konteks	Browser membatasi request ke domain lain	Penyerang mengeksploitasi session yang aktif
Penanganan	Konfigurasi header di server	Token CSRF, SameSite cookie, validasi Origin
Contoh Masalah	API tidak bisa diakses dari frontend lain	Transfer uang tanpa sepengetahuan pengguna

---

📌 Kesimpulan

• CORS adalah perlindungan sisi browser agar aplikasi hanya bisa mengakses data dari sumber yang diizinkan.
• CSRF adalah serangan terhadap user yang sedang login ke situs tertentu.
• Keduanya penting untuk dipahami dan diterapkan dalam setiap aplikasi web, terutama saat menghubungkan frontend dan backend yang berbeda origin.