Cross-Origin Resource Sharing (CORS) adalah fitur browser penting yang berdampak pada bagaimana API berinteraksi dengan aplikasi web yang dibangun menggunakan JavaScript. Pada intinya, CORS adalah mekanisme keamanan yang diterapkan oleh peramban web untuk melindungi pengguna dari potensi kerentanan yang timbul dari permintaan lintas asal. Memahami cara kerja CORS sangat penting bagi pengembang yang membuat aplikasi web dan API, karena kesalahan konfigurasi dapat menyebabkan fungsionalitas rusak atau risiko keamanan.
Penjelasan Kebijakan Asal Usul yang Sama
Untuk memahami apa itu CORS dan mengapa ini sangat penting, pertama-tama kita harus memahami Kebijakan Asal-Sama (SOP). Kebijakan Asal-Sama (Same-Origin Policy/SOP) adalah mekanisme keamanan dasar dalam peramban web yang mencegah skrip yang dimuat dari satu asal agar tidak berinteraksi dengan sumber daya dari asal yang lain. Asal adalah kombinasi skema (protokol), host (domain), dan port. Sebagai contoh, https://example.com:443 adalah asal yang berbeda dari http://example.com karena perbedaan protokol.
Meskipun SOP membantu mencegah skrip berbahaya mengakses data sensitif pada peramban pengguna, SOP juga menimbulkan tantangan saat aplikasi yang sah perlu berinteraksi dengan API eksternal yang dihosting di sumber yang berbeda. Di sinilah CORS berperan.
 |
| sumber: postman.com |
Apa yang dimaksud dengan CORS?
CORS adalah mekanisme yang menentukan siapa yang dapat mengakses sumber daya pada server dan metode HTTP mana yang diizinkan. Permintaan ini juga dilengkapi dengan header HTTP khusus yang dikirim oleh browser ke server untuk memberitahukan dari mana permintaan tersebut berasal. Sebagai tanggapan, server mengirimkan kembali headernya sendiri untuk mengindikasikan apakah permintaan tersebut diizinkan.
Alur Kerja CORS
- Permintaan sebelum Benerbangan: Dalam kasus permintaan lintas asal tertentu, browser mengirimkan permintaan tambahan ke server sebelum benar-benar membuat permintaan dengan metode HTTP. Ini adalah saat server menelepon jika menerima permintaan yang sebenarnya dengan memeriksa Access-Control-Allow-Origin dan header CORS lainnya.
- Respons Server: Jika server mendukung permintaan, server akan mengirimkan respons dengan tajuk CORS yang relevan seperti Access-Control-Allow-Origin dan Access-Control-Allow-Methods.
- Permintaan yang Sebenarnya: Setelah permintaan prapenerbangan berhasil, browser melanjutkan dengan permintaan yang sebenarnya.
Jika server tidak merespons dengan header CORS yang diperlukan atau secara eksplisit menolak permintaan, browser akan memblokir permintaan, dan aplikasi sisi klien tidak dapat mengakses sumber daya.
Tajuk CORS Utama
- Akses-Kontrol-Izinkan-Asal: Menentukan asal dari mana peramban dapat meminta sumber daya. Cara menentukan asal mana yang diizinkan untuk mengakses sumber daya Anda - bisa berupa alamat yang tepat, misalnya https://example.com, atau karakter pengganti * untuk mengakses dari mana saja.
- Akses-Kontrol-Izinkan-Metode: Menentukan metode HTTP (GET, POST, PUT, DELETE, dll.) yang diizinkan pada sumber daya yang diberikan.
- Akses-Kontrol-Izinkan-Header: Ini menentukan tajuk khusus mana yang dapat dikirim dalam permintaan.
- Kontrol-Akses-Izinkan-Kredensial: Apakah akan menyertakan cookie atau otentikasi HTTP ke server.
Tantangan dan Praktik Terbaik
Tantangan Umum
- Permintaan yang Diblokir: Masalah umum muncul ketika server gagal menambahkan header Akses-Kontrol-Bolehkan-Asal yang diperlukan atau membatasi akses ke asal tertentu.
- Permintaan Pra-penerbangan yang Kompleks: Aplikasi yang mengeluarkan permintaan lintas asal yang kompleks juga dapat menimbulkan masalah kinerja karena memerlukan permintaan preflight yang harus dikirim setiap saat.
- Server yang Salah Konfigurasi: Konfigurasi CORS yang tidak tepat dapat secara tidak sengaja mengekspos data sensitif atau merusak fungsionalitas.
Praktik Terbaik
- Batasi Asal: Hindari penggunaan * untuk Akses-Kontrol-Izinkan-Asal dalam produksi. Sebaliknya, cantumkan secara eksplisit sumber yang tepercaya.
- Batasi Metode dan Header: Tentukan hanya metode dan header HTTP yang diperlukan untuk aplikasi Anda.
- Gunakan HTTPS: Pastikan API dan aplikasi web Anda menggunakan HTTPS untuk mengamankan data saat transit.
- Uji Secara Menyeluruh: Uji konfigurasi CORS Anda secara teratur menggunakan alat bantu seperti konsol pengembang peramban dan utilitas pengujian CORS.
CORS dan Kerangka Kerja Javascript Modern
Kerangka kerja JavaScript modern seperti React, Angular, dan Vue sering kali digerakkan oleh API yang membuat CORS menjadi sangat penting. Framework-framework ini biasanya digunakan oleh para pengembang untuk membangun aplikasi web modern, tetapi salah satu tantangan yang mereka hadapi adalah masalah CORS, terutama ketika aplikasi mereka mencoba mengambil data dari server eksternal. Meskipun ini adalah masalah umum, framework biasanya menawarkan cara untuk mengonfigurasi proxy pada mode pengembangan atau mengonfigurasi gateway API di lingkungan produksi.
Kesimpulan
CORS adalah mekanisme yang kuat yang menyeimbangkan kebutuhan akan keamanan dengan fleksibilitas yang diperlukan untuk pengembangan web modern. Dengan memahami cara kerja CORS dan mengikuti praktik terbaik, pengembang dapat membangun aplikasi web yang aman dan fungsional yang berinteraksi secara mulus dengan API. Baik Anda merancang API atau aplikasi klien berbasis JavaScript, meluangkan waktu untuk mengonfigurasi CORS dengan benar akan meningkatkan keamanan dan pengalaman pengguna aplikasi Anda.
Kembali ke>>>> Memahami CORS: Pembagian Sumber Daya Lintas Asal