Blogger Jateng
Home / Tutorial

Apa itu CORS dan Mengapa Penting dalam Pengembangan Web?

Cross-Origin Resource Sharing (CORS) adalah fitur keamanan yang diimplementasikan oleh browser web yang memungkinkan atau membatasi bagaimana sumber daya dari satu domain dapat diminta oleh halaman web dari domain lain. Fitur ini sangat penting untuk menjaga komunikasi yang aman dan efisien antara berbagai layanan web, terutama karena web modern semakin saling terhubung dan dinamis.

Penjelasan kebijakan Asal yang Sama

Sebelum CORS, penting untuk menetapkan konsep kebijakan asal yang sama (SOP), yang merupakan prinsip dasar dalam keamanan web. SOP mencegah halaman web membuat permintaan ke domain apa pun selain domainnya sendiri. Kebijakan ini diterapkan untuk melindungi pengguna dari pemalsuan permintaan lintas situs (CSRF) dan kerentanan keamanan lainnya dengan mencegah situs web jahat mengakses data sensitif di situs web lain.

Namun, ada banyak skenario yang sah di mana aplikasi web perlu meminta sumber daya dari domain yang berbeda-seperti mengakses API yang dihosting di server terpisah atau memuat sumber daya dari jaringan pengiriman konten (CDN). Di sinilah CORS berperan.

sumber: gitconnected.com

Apa yang dimaksud dengan CORS?

CORS adalah sebuah mekanisme yang memungkinkan server web untuk mengetahui siapa saja yang dapat mengakses sumber daya mereka dari berbagai sumber. Ketika browser web membuat permintaan, server merespons dengan tajuk spesifik yang menunjukkan apakah permintaan tersebut diizinkan atau tidak. Jika permintaan diizinkan, browser akan memberikan akses ke sumber daya yang diminta ke halaman web. Jika tidak, browser akan menolak permintaan tersebut.

CORS memanfaatkan header HTTP untuk mendefinisikan aturan kontrol akses untuk permintaan lintas asal. Header ini meliputi:
  • Akses-Kontrol-Izinkan-Asal: Siapa saja yang diizinkan untuk mengakses sumber daya? Domain tertentu (mis. https://example.com) atau karakter pengganti (*) untuk semua domain.
  • Kontrol-Akses-Izinkan-Metode: Menentukan metode HTTP (GET, POST, PUT, DELETE, dll.) yang diizinkan untuk permintaan lintas asal.
  • Akses-Kontrol-Izinkan-Header: Menentukan header HTTP mana yang dapat dikirim selama permintaan yang sebenarnya.
  • Kontrol-Akses-Izinkan-Kredensial: Menunjukkan apakah kredensial (seperti cookie atau autentikasi HTTP) diizinkan atau tidak dalam permintaan.

Alur CORS

Browser pertama-tama mengirimkan permintaan “preflight” ke server jika ada permintaan lintas asal oleh halaman web. Ini adalah permintaan awal dan permintaan standar (biasanya metode OPTIONS) untuk memeriksa apakah server akan mengizinkan permintaan yang sebenarnya dibuat. Kemudian, server merespons dengan header CORS yang benar. Jika server mengizinkan, browser akan membaca permintaan yang sebenarnya.

Sebagai contoh, bayangkan Anda membuat aplikasi JavaScript yang membuat permintaan ke API yang dihosting di domain yang berbeda. Browser pertama-tama akan mengirimkan permintaan pra-penerbangan ke server API untuk memeriksa apakah server tersebut mengizinkan permintaan lintas-asal. Jika server menyertakan header CORS yang benar (misalnya, Access-Control-Allow-Origin: *), browser akan mengizinkan permintaan tersebut. Jika tidak, permintaan akan diblokir.

Mengapa CORS Penting?

1. Keamanan: CORS sebagian besar adalah tentang keamanan. Tanpa CORS, situs web berbahaya dapat mengirim permintaan ke situs web lain dan mencuri data sensitif. Hal ini menambahkan mekanisme terkontrol untuk membatasi akses ke sumber daya Anda dari situs lain, sehingga mengurangi kemungkinan serangan lintas situs.

2. Integrasi API: Dalam pengembangan web, sering kali tidak dapat dihindari untuk mengintegrasikan API pihak ketiga. CORS adalah enabler utama untuk hal ini, baik itu gateway pembayaran, login media sosial, atau mengambil data dari entitas eksternal. Membatasi Akses: Dengan mengonfigurasi CORS secara efektif, Anda dapat memastikan bahwa hanya sumber (domain) tertentu yang tepercaya yang diizinkan untuk mengakses API Anda, sehingga membatasi eksposur sumber daya Anda.

3. Pengalaman Pengguna: CORS juga memengaruhi pengalaman pengguna. CORS mengatur interaksi yang benar antara aplikasi web dan sumber daya jarak jauh jika diatur dengan cara yang benar. Misalnya, toko online dapat menggunakan CORS untuk menampilkan gambar produk dari server eksternal sambil menjaga logika keranjang belanja di domainnya sendiri.

4. Efisiensi dan Skalabilitas: CORS memungkinkan sumber daya dihosting di server yang berbeda, sehingga memungkinkan penyeimbangan beban, caching, dan pengiriman aset yang lebih cepat. Misalnya, aset statis seperti gambar, skrip, dan lembar gaya dapat di-host di CDN, sehingga meningkatkan kinerja tanpa mengorbankan keamanan.

Kesalahan Umum CORS

Ketika dalam tahap pengembangan, Anda akan menghadapi lubang pada CORS. Sebagai contoh:
  • Tidak ada header 'Akses-Kontrol-Izinkan-Asal': Jika server gagal menyediakan header CORS yang diperlukan, permintaan akan diblokir oleh browser dan pesan kesalahan akan ditampilkan di konsol.
  • Permintaan Preflight Gagal: Ini terjadi ketika permintaan OPTIONS, yang digunakan untuk pengecekan pra-penerbangan, gagal karena server tidak menyertakan header yang diharapkan atau header yang dikirim dalam format yang salah.
  • Kredensial tidak digunakan: Jika server tidak mendukung kredensial (cookie, autentikasi HTTP), permintaan yang memerlukan kredensial akan gagal.

Kesimpulan

CORS adalah komponen penting dalam pengembangan web modern, yang menyeimbangkan kebutuhan akan permintaan lintas asal dengan kebutuhan akan keamanan. Tanpa CORS, aplikasi web akan terpapar berbagai ancaman keamanan. CORS memastikan bahwa hanya domain tepercaya yang dapat mengakses sumber daya, sehingga memungkinkan untuk berintegrasi secara aman dengan layanan eksternal, API, dan jaringan pengiriman konten. Memahami dan mengonfigurasi CORS sangat penting bagi pengembang untuk membangun aplikasi web yang aman, berkinerja baik, dan dapat diskalakan.