Dalam dunia pengembangan web saat ini, kebutuhan untuk mengakses sumber daya di berbagai domain menjadi semakin umum. Baik itu aplikasi front-end yang mencoba berinteraksi dengan API back-end atau layanan pihak ketiga yang mencoba mengambil data dari situs Anda, header Cross-Origin Resource Sharing (CORS) berperan penting dalam memastikan permintaan lintas domain yang aman. Dalam panduan ini, kita akan membahas lebih dalam tentang header CORS, menjelaskan apa itu header CORS, bagaimana cara kerjanya, dan mengapa header CORS itu penting.
Apa yang dimaksud dengan CORS?
Cross-Origin Resource Sharing (CORS) adalah langkah keamanan yang diterapkan browser web untuk melindungi dari akses tidak sah ke sumber daya dari sumber (domain) lain. Browser, secara default, mencegah halaman web membuat permintaan ke domain mana pun selain domain tempat halaman web tersebut ditayangkan. Hal ini disebut Kebijakan Asal Sama (SOP). Meskipun SOP sangat penting untuk melindungi pengguna, SOP dapat menimbulkan tantangan bagi para pengembang, terutama ketika aplikasi mereka perlu berinteraksi dengan sumber daya yang di-host di server yang berbeda.
CORS memungkinkan server untuk menentukan domain mana yang diizinkan untuk mengakses sumber daya mereka, sehingga memungkinkan untuk mem-bypass Kebijakan Asal-Sama yang ketat dengan cara yang terkendali dan aman.
 |
| sumber: serverlessapigateway.com |
Bagaimana Cara Kerja Header CORS?
Browser web mengimplementasikan CORS dengan memeriksa header respons server untuk mengetahui apakah sumber daya dapat diakses dari asal permintaan (domain). Header hanya relevan untuk browser yang mengimplementasikan protokol CORS, dan mengizinkan atau menolak permintaan lintas situs.
Sebagai dasar pemahaman Anda, ada beberapa header utama CORS yang harus diketahui oleh para pengembang:
1. Akses-Kontrol-Izinkan-Asal
Header ini mendefinisikan domain mana yang dapat mengakses sumber daya. Header ini dapat disetel ke domain tertentu, seperti https://example.com, atau ke nilai wildcard *, yang berarti domain apa pun dapat mengakses sumber daya. Untuk alasan keamanan, sebaiknya hindari penggunaan wildcard kecuali jika benar-benar diperlukan.
Contoh:
Access-Control-Allow-Origin: https://example.com
2. Akses-Kontrol-Bolehkan-Metode
Header ini mendefinisikan metode HTTP yang diizinkan (GET, POST, PUT, DELETE, dll.) yang dapat digunakan saat mengakses sumber daya. Anda sebaiknya hanya mengaktifkan metode yang sangat penting agar aplikasi Anda dapat bekerja.
Contoh:
Access-Control-Allow-Methods: GET, POST, PUT
3. Akses-Kontrol-Izinkan-Header
Header ini menentukan header HTTP mana yang dapat diterima untuk dikirim dalam permintaan. Ini sangat berguna untuk API yang membutuhkan header khusus, seperti header Otorisasi atau X-Custom-Header.
Contoh:
Access-Control-Allow-Headers: Content-Type, Authorization
4. Akses-Kontrol-Izinkan-Kredensial
Header ini memberikan petunjuk kepada browser apakah akan mengirim kredensial (cookie atau informasi autentikasi HTTP) bersama permintaan atau tidak. Ini berarti bahwa dengan nilai true, kredensial dikirim bersama dengan permintaan lintas-asal. Hal ini memberi tahu kita bahwa Access-Control-Allow-Origin tidak boleh disetel ke * jika kredensial disetel.
Contoh:
Access-Control-Allow-Credentials: true
5. Header Akses-Kontrol-Pengungkapan-Kendali
Header ini memungkinkan server untuk mengindikasikan header respons mana yang aman untuk diakses di browser. Hanya sedikit pilihan header yang tersedia secara default, tetapi Anda dapat mengekspos header tambahan dengan header ini.
Contoh:
Access-Control-Expose-Headers: X-Custom-Header
6. Akses-Kontrol-Umur-Maks
Header ini menunjukkan durasi cache dari respons permintaan sebelum penerbangan. Permintaan preflight adalah permintaan pendahuluan yang dibuat oleh browser untuk memeriksa apakah permintaan yang sebenarnya aman untuk dikirim. Dengan menyimpan respons di cache, permintaan berikutnya dapat menghindari pemeriksaan preflight selama durasi yang ditentukan.
Contoh:
Access-Control-Max-Age: 86400
Permintaan Preflight
Permintaan yang terkenal saat bekerja dengan CORS adalah permintaan preflight. Hal ini terjadi ketika browser membuat permintaan HTTP OPTIONS sebelum permintaan yang sebenarnya, untuk memverifikasi bahwa server akan mengizinkan permintaan lintas asal. Permintaan preflight biasanya dimulai ketika:
- Metode permintaan bukan merupakan metode yang sederhana (GET, HEAD, POST, OPTIONS, TRACE).
- Permintaan menyertakan header khusus.
- Kredensial diberikan dalam permintaan.
Permintaan pra-penerbangan memeriksa kebijakan CORS server, dan server merespons dengan tajuk CORS yang sesuai. Jika permintaan pra-penerbangan berhasil, browser akan melanjutkan permintaan yang sebenarnya.
Pentingnya Header CORS
Cross-Origin Resource Sharing adalah mekanisme yang diperlukan untuk menyediakannya. Jika Anda tidak memiliki konfigurasi CORS yang tepat, maka situs web berbahaya dapat membuat permintaan ke server Anda atas nama pengguna di tab lain dan mengeksploitasi pencurian data, pembajakan akun, dll. Menentukan asal mana yang diizinkan untuk mengakses sumber daya Anda akan membantu mengurangi jenis serangan ini.
Selain itu, tajuk CORS memberikan fleksibilitas bagi para pengembang, yang memungkinkan mereka untuk mengaktifkan permintaan asal silang yang sah dari sumber tepercaya sambil memblokir permintaan yang berpotensi membahayakan. Header ini juga memungkinkan integrasi yang lebih mulus dengan layanan pihak ketiga, seperti API, yang mungkin berada di domain yang berbeda.
Kesimpulan
Header CORS merupakan komponen penting dari keamanan web modern, memungkinkan permintaan lintas asal yang aman sekaligus melindungi pengguna dari aktor jahat. Memahami cara mengonfigurasi dan mengimplementasikan header CORS merupakan keahlian yang sangat penting bagi para pengembang web. Dengan menggunakan header ini secara tepat, Anda dapat memastikan bahwa aplikasi web Anda berfungsi dan aman dalam lingkungan lintas asal.
Kembali ke>>>> Memahami CORS: Pembagian Sumber Daya Lintas Asal