Memahami CORS: Pembagian Sumber Daya Lintas Asal

Cross-Origin Resource Sharing, atau CORS, adalah fitur keamanan yang diimplementasikan oleh peramban web modern untuk membatasi halaman web agar tidak membuat permintaan ke domain yang berbeda dengan domain yang menyajikan halaman web tersebut. Hal ini sangat penting untuk menjaga keamanan web, memastikan bahwa situs web jahat tidak dapat mengakses data sensitif dari situs lain atas nama pengguna. Namun, CORS juga merupakan konsep yang penting untuk dipahami oleh para pengembang web karena memungkinkan pembagian sumber daya yang terkendali di berbagai sumber yang berbeda saat dibutuhkan.

Apa yang dimaksud dengan CORS?

Sederhananya, CORS adalah protokol yang memungkinkan aplikasi web yang berjalan di satu asal (domain) untuk membuat permintaan sumber daya dari asal yang berbeda. Sebagai contoh, katakanlah kita memiliki halaman web yang dihosting di https://example.com yang perlu mengambil data dari https://api.example2.com. Tanpa CORS, permintaan lintas asal ini akan diblokir oleh browser untuk tujuan keamanan.

Hal ini diimplementasikan melalui header HTTP yang mengindikasikan sumber daya mana yang dapat mengambil sumber daya yang mana. Server yang menghosting sumber daya yang diminta mengirimkan header ini sebagai respons terhadap permintaan, memberi tahu browser domain lain mana yang diizinkan untuk mengakses sumber daya tersebut.

sumber: dev.to

Bagaimana Cara Kerja CORS?

Ketika browser web meminta sumber daya dari asal (yaitu, domain, protokol, atau port) yang berbeda dari yang melayani halaman web, browser web akan mengirimkan permintaan HTTP yang menyertakan header Asal. da Header ini menentukan sumber permintaan. Server yang menjadi tujuan permintaan dapat merespons dengan berbagai header yang mengizinkan atau menolak akses ke sumber dayanya.

Misalnya, respons CORS yang umum mungkin menyertakan header Access-Control-Allow-Origin, yang menentukan asal mana yang diizinkan untuk mengakses sumber daya. Jika asal cocok dengan salah satu asal yang diizinkan, browser akan melanjutkan permintaan. Jika tidak cocok, browser akan memblokir permintaan tersebut.

Header CORS Utama

1. Akses-Kontrol-Izinkan-Asal: Ini adalah tajuk CORS yang sangat penting. Header ini mengindikasikan asal mana yang diizinkan untuk menggunakan sumber daya. Ini dikonfigurasikan untuk domain tertentu (mis. https://example.com), atau sebagai wildcard (*), yang akan mengizinkan domain apa pun. Namun, menggunakan wildcard bisa berbahaya dalam situasi tertentu karena akan mengekspos sumber daya ke semua asal.

2. Akses-Kontrol-Izinkan-Metode: Header ini mengindikasikan metode HTTP mana (misalnya, GET, POST, PUT, DELETE) yang diizinkan saat mengakses sumber daya. Header ini memungkinkan server untuk menentukan dengan tepat operasi mana yang dapat dilakukan.

3. Header Akses-Kontrol-Izinkan: Header ini menentukan header HTTP yang diizinkan untuk digunakan oleh klien ketika membuat permintaan yang sebenarnya. Jadi, dalam kasus pengiriman header khusus seperti X-My-Header, server perlu memberikan arahan eksplisit yang mengizinkan penggunaan header ini melalui header ini.

4. Akses-Kontrol-Izinkan-Kredensial: Header ini menentukan apakah kredensial (cookie, header autentikasi, dll.) dapat disertakan dengan permintaan ke sumber daya atau tidak. Jika disetel ke true, browser akan mengirimkan kredensial dengan permintaan.

5. Access-Control-Max-Age: Header ini memberi tahu browser berapa lama hasil permintaan prapenelusuran dapat di-cache, sehingga mengurangi jumlah pemeriksaan prapenelusuran untuk permintaan berikutnya.

Permintaan Sebelum Penerbangan

Browser melakukan hal ini untuk beberapa permintaan (seperti permintaan apa pun yang bukan GET atau POST, atau dengan tajuk khusus) dengan menyertakan permintaan “preflight”. Ini adalah permintaan HTTP OPTIONS yang dikirimkan sebelum permintaan yang sebenarnya. Ini menanyakan kepada server ke mana permintaan tersebut akan pergi apakah permintaan lintas situs aman untuk dikirim atau tidak. Jika server merespons dengan header CORS yang sesuai, browser akan melanjutkan dengan permintaan yang sebenarnya.

Mengapa CORS Penting?

CORS sangat penting untuk keamanan web. Tanpa CORS, situs web berbahaya dapat mengeluarkan permintaan latar belakang ke domain sembarangan dan mencuri data sensitif, seperti token otentikasi atau informasi pribadi. Dengan demikian, CORS dapat membantu mencegah berbagai serangan, termasuk Pemalsuan Permintaan Lintas Situs (CSRF), atau Penyertaan Skrip Lintas Situs (XSSI).

Pada saat yang sama, CORS dirancang agar fleksibel. Hal ini memungkinkan para pengembang untuk menentukan domain mana yang harus memiliki akses ke sumber daya dan dalam kondisi apa. Hal ini memungkinkan pengembang untuk membuat aplikasi web yang kuat yang berintegrasi dengan layanan eksternal dengan tetap menjaga keamanan.

Kesalahan dan Resolusi Lintas Asal yang Umum Terjadi

1. Header Akses-Kontrol-Izinkan-Asal yang Hilang: Salah satu keluhan utama para pengembang mengenai CORS adalah kurangnya header Access-Control-Allow-Origin dalam respons. Jika Anda melewatkan header ini, permintaan akan diblokir oleh browser. Header ini harus ditambahkan ke respons dari server

2. Masalah Kredensial: Dalam kasus ini permintaan menyertakan kredensial (cookie, dll.), tetapi server tidak mengatur header Access-Control-Allow-Credentials dengan nilai true, dan dengan demikian browser akan memblokir permintaan tersebut. Ini berarti server harus diatur untuk mengizinkan asal dan kredensial Anda dengan benar.

3. Kegagalan Preflight: Permintaan pra-penerbangan mungkin gagal karena header yang salah atau kesalahan konfigurasi server. Untuk memperbaiki masalah ini, pengembang sisi server harus mendengarkan permintaan OPTIONS dan mengirimkan header CORS yang tepat dalam responsnya.

Kesimpulan

Memahami CORS merupakan hal yang mendasar untuk pengembangan web modern. CORS adalah alat penting untuk mengelola permintaan lintas asal dengan aman sambil memastikan bahwa pembagian sumber daya yang sah di antara domain yang berbeda dimungkinkan. Dengan menguasai CORS, pengembang dapat memastikan bahwa aplikasi web mereka bekerja dengan lancar, aman, dan terlindungi dalam lingkungan multi-asal.