Cross-Origin Resource Sharing (CORS) adalah mekanisme keamanan yang memungkinkan aplikasi web yang berjalan di satu asal (domain) untuk meminta sumber daya dari asal lain. Fitur ini sangat penting dalam pengembangan web modern karena kebutuhan aplikasi sisi klien untuk berinteraksi dengan API dan layanan eksternal. Meskipun Kebijakan Asal-Sama (SOP) membatasi halaman web agar tidak membuat permintaan ke domain selain domainnya sendiri, CORS berfungsi sebagai metode terkontrol untuk memungkinkan komunikasi lintas asal dalam kondisi tertentu. Pada artikel ini, kami akan menjelaskan cara kerja CORS, pentingnya CORS dalam pengembangan web, dan aspek teknis penerapannya.
Apa yang dimaksud dengan Kebijakan Asal Sama (SOP)?
Untuk memahami apa itu CORS, Anda harus mengetahui apa itu Kebijakan Asal-Sama (SOP), karena SOP adalah implementasi keamanan default untuk peramban web. Detail tentang skrip asal silang - atau kebijakan asal yang sama (SOP): SOP membatasi skrip pada satu sumber untuk mengakses sumber daya pada sumber yang terpisah. Hal ini dirancang untuk menghentikan situs web berbahaya agar tidak membaca data sensitif Anda di situs lain tanpa persetujuan Anda.
Namun, ada skenario yang sah di mana permintaan lintas asal diperlukan, seperti mengambil data dari API yang dihosting di domain yang berbeda. Di sinilah CORS berperan - CORS menyediakan cara bagi server untuk secara eksplisit mengizinkan jenis permintaan asal silang tertentu sambil mempertahankan manfaat keamanan SOP.
Bagaimana Cara Kerja CORS?
Apa yang dimaksud dengan CORS? CORS - Berbagi Sumber Daya Lintas Asal - menyediakan mekanisme bagi server web untuk menunjukkan sumber daya mana yang diizinkan untuk mengakses sumber dayanya. Hal ini dilakukan dengan menggunakan header HTTP, yang dikirim bersama permintaan dan respons.
Permintaan Sebelum Penerbangan
Untuk permintaan lintas asal yang menggunakan metode HTTP tertentu (seperti PUT, DELETE, atau PATCH) atau tajuk khusus (seperti Otorisasi), browser mengirimkan permintaan HTTP OPSI ke server terlebih dahulu dalam apa yang disebut dengan “permintaan pra-penerbangan”.
Permintaan pra-penerbangan mencakup tajuk berikut ini:
- Asal: Asal situs web yang meminta.
- Metode Permintaan-Kontrol-Akses: Metode HTTP yang akan digunakan dalam permintaan yang sebenarnya (misalnya, GET, POST, PUT).
- Header Permintaan-Kontrol-Akses: Daftar header yang akan disertakan dalam permintaan yang sebenarnya.
Jika server dikonfigurasikan untuk mengizinkan metode dan header yang diminta, server akan merespons dengan header CORS yang sesuai dalam respons, yang mengindikasikan bahwa permintaan yang sebenarnya aman untuk dilanjutkan.
Header CORS
Tanggapan dari server terhadap permintaan pra-penerbangan akan menyertakan sejumlah tajuk terkait CORS yang penting:
1. Access-Control-Allow-Origin: Tunjukkan siapa yang diizinkan mengakses sumber daya Anda. Nilainya dapat berupa asal yang tepat (misalnya https://example.com) atau karakter pengganti (*) yang menerima semua asal.
2. Kontrol-Akses-Kontrol-Izinkan-Metode: Menentukan metode HTTP mana yang diizinkan saat meminta sumber daya (GET, POST, PUT).
3. Akses-Kontrol-Izinkan-Header: Menunjukkan header yang dapat digunakan dalam permintaan yang sebenarnya. Misalnya, jika klien ingin menyertakan header Otorisasi, server harus mengizinkan klien untuk melakukannya.
4. Akses-Kontrol-Izinkan-Kredensial: Memberitahukan apakah permintaan dapat berisi kredensial (cookie, autentikasi HTTP) Ini berguna ketika Anda memerlukan autentikasi lintas asal.
5. Access-Control-Max-Age: Memberitahukan berapa lama hasil permintaan pra-penerbangan dapat di-cache. Hal ini membantu mengurangi jumlah permintaan pra-penerbangan.
Permintaan Sederhana
Untuk permintaan sederhana (permintaan yang menggunakan GET atau POST dengan header dan metode standar), tidak ada permintaan pra-penerbangan yang dibuat. Browser langsung mengirimkan permintaan, dan server menyertakan header CORS yang diperlukan dalam respons. Jika server mengizinkan asal, respons diterima; jika tidak, permintaan diblokir.
Peran JavaScript dan Fetch API
Pengembangan Web modern bergantung pada JavaScript untuk membuat permintaan lintas asal. Fetch API biasanya digunakan untuk membuat permintaan terhadap sumber lain di luar browser. Jika Anda menggunakan Fetch API atau XMLHttpRequest, browser akan menangani CORS untuk Anda, mengirimkan permintaan sebelum terbang jika diperlukan dan menerapkan header respons.
Saat mengirim permintaan lintas-asal, JavaScript dapat menentukan apakah kredensial (seperti cookie atau autentikasi HTTP) harus disertakan dengan mengatur opsi kredensial dalam permintaan Ambil untuk menyertakan atau sama-asal. Sebagai contoh:
fetch('https://api.example.com/data', {
method: 'GET',
credentials: 'include'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
Mengapa CORS Penting?
CORS penting karena merupakan mekanisme yang memungkinkan akses terkontrol ke sumber daya yang berada di luar domain tempat sumber daya tersebut dilayani. Hal ini memungkinkan pengembang untuk mengakses API yang dihosting di domain lain sambil memastikan bahwa permintaan ini dikelola dan disetujui oleh server target.
Akan sangat sulit bagi pengembang web untuk membangun aplikasi web modern yang terdistribusi karena tanpa CORS, mereka tidak akan dapat mengambil sumber daya dari layanan pihak ketiga dengan aman. CORS juga menyediakan kontrol granular, yang memungkinkan server untuk menentukan asal, metode, dan header mana yang diizinkan, sehingga mengurangi risiko skrip lintas situs (XSS) dan serangan lainnya.
Kesimpulan
CORS adalah bagian fundamental dari web modern, memungkinkan berbagi sumber daya lintas asal yang aman dan terkendali. Dengan menggunakan header HTTP, CORS memungkinkan server untuk menentukan permintaan mana yang diizinkan dari sumber yang berbeda, memastikan bahwa aplikasi sisi klien dapat mengakses sumber daya yang diperlukan tanpa mengorbankan keamanan. Memahami cara kerja CORS, termasuk peran permintaan preflight, header HTTP, dan alat JavaScript seperti Fetch API, sangat penting bagi pengembang yang bekerja dengan API dan membangun aplikasi web lintas asal.
Kembali ke>>>> Memahami CORS: Pembagian Sumber Daya Lintas Asal
