CORS Adalah: Definisi, Fungsi, dan Cara Mengaktifkannya

Pernahkan kamu mendengar tentang CORS? CORS adalah sebuah teknologi yang hadir ketika kamu mengalami masalah saat mencoba akses data dari domain lain. 

Ketika aplikasi web perlu mengakses sumber daya dari domain lain, CORS memastikan proses tersebut berjalan lancar dan aman, tanpa melanggar kebijakan keamanan browser. 

Di artikel ini, kita akan membahas apa itu CORS, bagaimana cara kerjanya, serta cara mengaktifkannya dengan benar!

Apa yang Dimaksud CORS (Cross-Origin Resource Sharing)?

Definisi CORS

CORS, atau Cross-Origin Resource Sharing, adalah mekanisme yang dirancang untuk memungkinkan aplikasi web di satu domain untuk mengakses sumber daya yang ada di domain lain dengan cara yang aman. 

Sederhananya, CORS memungkinkan komunikasi antar domain yang berbeda, yang sebelumnya dibatasi oleh kebijakan Same-Origin Policy (SOP).

Dengan mengaplikasikan CORS, dapat lebih fleksibel dalam mengintegrasikan berbagai layanan eksternal, seperti API dari pihak ketiga, dengan cara yang terkontrol. 

Artinya, meskipun aplikasi web di domain A ingin mengakses data dari domain B, server di domain B dapat memberikan izin (atau menolaknya) melalui serangkaian header HTTP yang diterapkan.

Perbedaan CORS dan Same-Origin Policy

Sebelum kita lebih jauh membahas bagaimana CORS bekerja, penting untuk memahami perbedaannya dengan kebijakan dasar yang diterapkan browser, yaitu Same-Origin Polcy (SOP). 

Same-Origin Policy (SOP) adalah kebijakan keamanan yang ada di browser, yang membatasi bagaimana dokumen atau skrip yang dimuat dari satu origin (misalnya, www.example.com) dapat berinteraksi dengan data yang dimuat dari origin lain (misalnya, www.another.com). 

Kebijakan ini bertujuan untuk mencegah potensi serangan, seperti cross-site scripting (XSS). Baik CORS dan SOP berkaitan dengan keamanan dan pembatasan akses antar domain, namun SOP kadang-kadang terlalu ketat. 

Adanya SOP ini akan menyulitkan kamu sebagai developer ketika perlu berbagi data antar aplikasi yang terpisah. Di sinilah CORS berperan, memberikan cara yang lebih fleksibel dan aman untuk mengatasi masalah ini.

Contoh Kasus CORS

Bayangkan kamu sedang membangun aplikasi web yang mengambil data cuaca dari API yang berada di server lain (misalnya, api.weather.com). 

Jika aplikasi web kamu berjalan di domain www.mysite.com, browser secara default akan memblokir permintaan tersebut karena API berada di origin yang berbeda. 

Bisa dikatakan, CORS adalah cara untuk memberi izin kepada aplikasi di www.mysite.com untuk mengakses data dari api.weather.com dengan aman.

Baca Juga: ModSecurity di Apache dan Nginx: Persamaan & Perbedaan

Bagaimana Cara CORS Bekerja?

CORS bekerja melalui serangkaian HTTP headers yang dipertukarkan antara browser dan server. Untuk lebih jelasnya, mari kita uraikan komponen-komponen utama CORS:

#1 HTTP Headers

• Access-Control-Allow-Origin: Menentukan origin mana saja yang diizinkan untuk mengakses resource. Bisa berupa “*” untuk membuka akses ke semua origin, namun lebih baik untuk menyebutkan origin tertentu demi keamanan.
• Access-Control-Allow-Methods: Menunjukkan metode HTTP apa yang diizinkan, seperti GET, POST, PUT, DELETE.
• Access-Control-Allow-Headers: Menyebutkan header HTTP apa yang boleh digunakan saat melakukan request.
• Access-Control-Allow-Credentials: Menyatakan apakah respons dapat dibagikan ketika flag kredensialnya aktif.

#2 Jenis Permintaan CORS

• Permintaan Sederhana: Ini adalah permintaan yang tidak memicu pemeriksaan preflight. Biasanya menggunakan metode GET, HEAD, atau POST, dan hanya menggunakan header dan tipe konten tertentu.
• Permintaan Preflight: Untuk permintaan yang bisa mempengaruhi data pengguna, browser pertama-tama akan mengirimkan permintaan (request) HTTP OPTIONS untuk memastikan apakah permintaan asli aman untuk dikirim.
• Permintaan Aktual: Setelah preflight berhasil, permintaan yang membawa data sesungguhnya akan dikirim.

#3 Penanganan Browser

Saat aplikasi web melakukan permintaan lintas origin, browser secara otomatis menambahkan header Origin ke permintaan. Server kemudian merespons dengan header CORS yang sesuai. Jika Origin diizinkan, browser melanjutkan permintaan; jika tidak, permintaan diblokir.

#4 Penanganan Error

Beberapa kesalahan CORS yang umum adalah:

• “No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”
• “The ‘Access-Control-Allow-Origin’ header has a value that is not equal to the supplied origin.”

Kesalahan ini menunjukkan bahwa server tidak dikonfigurasi untuk mengizinkan permintaan dari origin aplikasi web kamu.

Baca Juga: Cara Menambahkan Expires Headers di Website, Apa Manfaatnya?

Fungsi CORS pada Web Development

CORS memiliki peran yang sangat penting dalam pengembangan web modern, di antaranya:

• Memungkinkan Berbagi Sumber Daya: Dalam arsitektur microservices saat ini, berbagai komponen aplikasi mungkin dihosting di domain terpisah. CORS memungkinkan komunikasi antar komponen ini tanpa masalah.
• Konsumsi API: Banyak aplikasi web mengandalkan API pihak ketiga untuk menyediakan fitur seperti pembaruan cuaca, integrasi media sosial, atau pemrosesan pembayaran. CORS memungkinkan aplikasi mengakses API ini dengan aman.
• Peningkatan Keamanan: Meskipun CORS mengurangi beberapa pembatasan dari Same-Origin Policy, hal ini dilakukan dengan cara yang terkontrol. Pengembang bisa menentukan domain mana saja yang diizinkan mengakses sumber daya mereka.
• Meningkatkan Pengalaman Pengguna: Dengan memungkinkan berbagi sumber daya antar origin, CORS memungkinkan pengembang untuk menciptakan aplikasi web yang lebih kaya fitur dan responsif.
• Kepatuhan terhadap Standar Web Modern: Seiring aplikasi web semakin kompleks dan terdistribusi, CORS menjadi bagian penting dari standar web, memastikan interoperabilitas dan keamanan di seluruh web.

Baca Juga: Inilah Cara Mengarahkan HTTP ke HTTPS SSL Dengan .htaccess

Cara Mengaktifkan di Server

Untuk mengaktifkan CORS, kamu perlu mengkonfigurasi server, dan dalam beberapa kasus, aplikasi sisi klien. Berikut adalah cara mengaktifkan CORS di berbagai server:

#1 Apache

Edit file .htaccess atau file konfigurasi server Apache:

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET,POST,OPTIONS,DELETE,PUT"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"

#2 Nginx

Untuk Nginx, kamu perlu mengubah file nginx.conf:

location / {
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
    }
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
}

#3 Microsoft IIS

Di IIS, kamu bisa mengonfigurasi CORS melalui IIS Manager atau dengan mengubah file web.config:

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*" />
            <add name="Access-Control-Allow-Headers" value="Content-Type" />
            <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

Baca Juga: GraphQL vs REST: Manakah Arsitektur API Paling Unggul?

Alat untuk Bekerja dengan CORS

Beberapa alat yang bisa membantu kamu bekerja dengan CORS secara efektif antara lain:

• Ekstensi Browser: Seperti CORS Everywhere (Firefox) dan Allow CORS (Chrome) untuk menguji CORS.
• API Testing Tools: Postman dan cURL untuk mengirim permintaan dengan header khusus, berguna untuk menguji konfigurasi CORS.
• CORS Proxies: CORS Anywhere adalah proxy NodeJS yang menambahkan header CORS pada permintaan yang diproksikan.

Tips Keamanan untuk CORS

• Hindari menggunakan * untuk Access-Control-Allow-Origin di lingkungan produksi. Sebaiknya sebutkan origin yang pasti.
• Gunakan header Access-Control-Allow-Credentials dengan hati-hati. Hanya set ke true jika kamu perlu mengirimkan cookies atau autentikasi HTTP.
• Implementasikan autentikasi dan otorisasi yang tepat bersama CORS. CORS bukan pengganti untuk langkah-langkah keamanan sisi server.
• Gunakan HTTPS untuk semua permintaan lintas origin guna mencegah serangan man-in-the-middle.

Kesimpulan

Definisi CORS adalah mekanisme yang sangat penting untuk memastikan keamanan dan kelancaran komunikasi antar domain dalam pengembangan web modern. Dengan mengaktifkan dan mengkonfigurasi CORS dengan tepat, kamu bisa berbagi sumber daya antar aplikasi dan API secara aman. 

Jangan lupa, untuk memastikan website kamu selalu terjaga performa dan keamanannya, kamu bisa mempertimbangkan menggunakan layanan VPS Murah dari IDwebhost yang siap mendukung kebutuhan hosting dan konfigurasi server kamu dengan harga terjangkau!