Apa itu CORS

Internet telah berkembang pesat selama beberapa dekade terakhir, dengan situs web, aplikasi, dan API sekarang terhubung lebih dari sebelumnya. Di dunia yang saling terhubung ini, kebutuhan akan mekanisme yang aman dan fleksibel untuk berbagi resource di antara domain yang berbeda menjadi sangat penting. Inilah yang disebut Cross-Origin Resource Sharing atau CORS.

CORS adalah standar web yang memungkinkan komunikasi lintas asal yang aman antara server web dan klien web, seperti browser. Ini memungkinkan server untuk menentukan asal mana (domain, skema, dan nomor port) yang dapat mengakses resource mereka, memastikan bahwa akses yang tidak sah dicegah. CORS bekerja dengan menambahkan header HTTP baru yang memungkinkan server untuk mendeskripsikan set asal yang diizinkan untuk membaca informasi menggunakan browser.

Memahami Permintaan Lintas Asal

Dalam bab ini, saya akan mempelajari konsep permintaan lintas asal dan memahami komponen kunci yang membentuk skenario CORS yang tipikal.

Asal dan Kebijakan Asal Sama

Asal terdiri dari tiga komponen: protokol (misalnya, HTTP, HTTPS), domain (misalnya, example.com), dan nomor port (misalnya, 80, 443). Dua resource dianggap memiliki asal yang sama jika protokol, domain, dan nomor port mereka cocok. Kebijakan asal sama (SOP) adalah fitur keamanan yang diterapkan di browser web yang membatasi halaman web dari melakukan permintaan ke domain yang berbeda dengan yang melayani halaman web.

SOP mencegah potensi kerentanan keamanan, seperti cross-site request forgery (CSRF) dan cross-site scripting (XSS), dengan memastikan bahwa halaman web tidak dapat membuat permintaan yang tidak sah ke resource eksternal. Namun, SOP dapat terlalu membatasi dalam beberapa skenario, seperti ketika permintaan lintas asal yang sah diperlukan untuk aplikasi web berfungsi dengan benar. Inilah tempat CORS berperan, memungkinkan komunikasi lintas asal yang aman sambil mempertahankan prinsip-prinsip keamanan yang mendasar.

Permintaan Sederhana dan Terpreflighted

CORS membedakan antara dua jenis permintaan lintas asal: permintaan sederhana dan permintaan terpreflighted.

Permintaan sederhana adalah permintaan yang memenuhi kriteria tertentu, seperti hanya menggunakan metode GET, HEAD, atau POST, memiliki kumpulan header yang diizinkan terbatas, dan menggunakan jenis konten tertentu (misalnya, teks biasa, application/x-www-form-urlencoded, atau multipart/form-data). Browser menangani permintaan sederhana dengan mengirimkannya langsung ke server, disertai dengan header Origin yang menunjukkan asal permintaan.

Permintaan terpreflighted, di sisi lain, lebih kompleks dan memerlukan langkah tambahan sebelum permintaan sebenarnya dikirimkan. Browser memulai permintaan terpreflight menggunakan metode OPTIONS untuk menanyakan apakah server mendukung metode dan header permintaan yang diinginkan. Jika server merespons dengan jawaban yang positif, browser kemudian melanjutkan dengan permintaan sebenarnya.

Header CORS dan Peran Mereka

CORS mengandalkan kumpulan header HTTP yang memungkinkan server dan browser untuk berkomunikasi dan bernegosiasi akses ke resource. Beberapa header CORS penting meliputi:

• Origin: Menunjukkan asal permintaan.
• Access-Control-Allow-Origin: Menentukan asal yang diizinkan untuk resource.
• Access-Control-Allow-Methods: Daftar metode HTTP yang diizinkan.
• Access-Control-Allow-Headers: Menghitung header HTTP yang diizinkan.
• Access-Control-Expose-Headers: Menunjukkan header respons mana yang dapat diekspos ke skrip yang meminta.

Header-header ini memainkan peran penting dalam menegakkan kebijakan CORS dan memungkinkan komunikasi lintas asal yang aman.

Peran Browser dalam CORS

Browser web menjadi pusat dari mekanisme CORS, karena mereka menegakkan kebijakan CORS dan mengontrol akses ke resource berdasarkan header respons dari server. Browser secara otomatis mengirim header Origin dengan permintaan lintas asal, memeriksa respons server untuk header CORS, dan menentukan apakah memberikan atau menolak akses ke resource yang diminta. Proses ini transparan bagi pengguna dan memastikan bahwa hanya komunikasi lintas asal yang diotorisasi terjadi.

Mengkonfigurasi CORS

Dalam bab ini, saya akan mengeksplorasi bagaimana mengkonfigurasi CORS dalam berbagai teknologi, termasuk server web dan jaringan pengiriman konten (CDN).

Server Web

Apache

Untuk mengaktifkan CORS di Apache, Anda dapat menambahkan direktif berikut ke file .htaccess Anda atau dalam bagian <Directory> yang sesuai di file konfigurasi Apache Anda:

Header set Access-Control-Allow-Origin "http://example.com"
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"

Nginx

Di Nginx, Anda dapat mengaktifkan CORS dengan menambahkan direktif berikut ke blok konfigurasi server Anda:

add_header 'Access-Control-Allow-Origin' 'http://example.com';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';

Jaringan Pengiriman Konten (CDN)

Amazon CloudFront

Untuk mengaktifkan CORS di Amazon CloudFront, Anda dapat mengonfigurasi asal Anda untuk menambahkan header CORS ke respons Anda. Anda juga dapat membuat kebijakan cache untuk meneruskan header Origin, Access-Control-Request-Headers, dan Access-Control-Request-Method dari permintaan pemirsa ke asal.

Cloudflare

Di Cloudflare, Anda dapat mengaktifkan CORS dengan menambahkan skrip Worker ke domain Anda:

addEventListener('fetch', (event) => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const response = await fetch(request)
  const corsHeaders = {
    'Access-Control-Allow-Origin': 'http://example.com',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
    'Access-Control-Allow-Headers': 'Content-Type, Authorization',
  }

  const newHeaders = new Headers(response.headers)
  for (const [key, value] of Object.entries(corsHeaders)) {
    newHeaders.set(key, value)
  }

  return new Response(response.body, {
    status: response.status,
    statusText: response.statusText,
    headers: newHeaders,
  })
}

Error CORS Umum dan Troubleshooting

Dalam bab ini, saya akan membahas masalah terkait CORS yang umum dan bagaimana cara menemukan dan memperbaikinya dengan efektif.

Mengidentifikasi Kesalahan CORS

Kesalahan CORS dapat muncul dengan cara yang berbeda, tetapi biasanya muncul sebagai kesalahan sisi klien di konsol browser. Beberapa pesan kesalahan umum meliputi:

• "Access to XMLHttpRequest at 'URL' from origin 'ORIGIN' has been blocked by CORS policy."
• "No 'Access-Control-Allow-Origin' header is present on the requested resource."
• "The 'Access-Control-Allow-Origin' header contains multiple values 'VALUE', but only one is allowed."
• "Request header field 'HEADER' is not allowed by Access-Control-Allow-Headers in preflight response."

Pesan kesalahan ini sering memberikan informasi yang berguna tentang akar penyebab masalah CORS dan dapat memandu Anda dalam arah yang tepat untuk debugging.

Debugging Isu CORS di Web Browser

Browser web menyediakan berbagai alat untuk membantu Anda memecahkan masalah CORS:

• Konsol Browser
  Konsol menampilkan pesan kesalahan terkait CORS dan dapat memberikan wawasan berharga tentang penyebab masalah.

• Tab Jaringan
  Tab Jaringan dalam alat pengembang browser memungkinkan Anda untuk memeriksa permintaan dan respons HTTP individu, termasuk header dan kode status. Informasi ini dapat membantu Anda mengidentifikasi header CORS yang hilang atau salah.

• Tab Keamanan
  Beberapa browser, seperti Chrome, menyediakan tab Keamanan dalam alat pengembang mereka, yang dapat menampilkan informasi detail tentang masalah keamanan, termasuk masalah terkait CORS.

Menggunakan alat-alat ini dapat membantu Anda menemukan sumber masalah CORS dan mengidentifikasi perubahan yang diperlukan dalam konfigurasi server atau kode aplikasi.

Teknik Debugging di Sisi Server

Debugging masalah CORS di sisi server melibatkan memeriksa log server, file konfigurasi, dan kode aplikasi. Beberapa teknik yang perlu dipertimbangkan meliputi:

• Log Server
  Periksa log server untuk kesalahan atau peringatan terkait CORS, seperti masalah dengan file konfigurasi atau middleware.

• File Konfigurasi
  Tinjau file konfigurasi server dan aplikasi untuk memastikan pengaturan CORS benar dan terbaru.

• Kode Aplikasi
  Periksa kode aplikasi Anda untuk logika yang dapat menyebabkan masalah CORS, seperti penanganan permintaan preflight yang salah atau konfigurasi header CORS yang tidak tepat.

Dengan memeriksa komponen sisi server Anda secara menyeluruh, Anda dapat mengidentifikasi