Cross-Origin Resource Sharing (CORS)

Membagikan resource lintas origin dengan aman

Mariko Kosaka
X

Kebijakan origin yang sama browser akan memblokir pembacaan resource dari origin yang berbeda. Mekanisme ini mencegah situs berbahaya membaca data situs lain, tetapi juga mencegah penggunaan yang sah.

Aplikasi web modern sering kali ingin mendapatkan resource dari origin yang berbeda, misalnya, mengambil data JSON dari domain yang berbeda atau memuat gambar dari situs lain ke dalam elemen <canvas>. Resource ini dapat berupa resource publik yang harus tersedia bagi siapa saja untuk dibaca, tetapi kebijakan origin yang sama akan memblokir penggunaannya. Developer sebelumnya memiliki solusi yang digunakan seperti JSONP.

Cross-Origin Resource Sharing (CORS) memperbaiki masalah ini secara standar. Dengan mengaktifkan CORS, server dapat memberi tahu browser bahwa browser dapat menggunakan asal tambahan.

Bagaimana cara kerja permintaan sumber daya di web?

permintaan dan respons
Ilustrasi permintaan klien dan respons server.

Browser dan server dapat bertukar data melalui jaringan menggunakan Hypertext Transfer Protocol (HTTP). HTTP mendefinisikan aturan komunikasi antara pemohon dan responden, termasuk informasi yang diperlukan untuk mendapatkan resource.

Header HTTP menegosiasikan pertukaran pesan antara klien dan server, serta digunakan untuk menentukan akses. Permintaan browser dan pesan respons server dibagi menjadi header dan isi.

Informasi tentang pesan, seperti jenis pesan atau encoding pesan. Header dapat menyertakan berbagai informasi yang dinyatakan sebagai key-value pair. Header permintaan dan header respons berisi informasi yang berbeda.

Contoh header permintaan

Accept: text/html
Cookie: Version=1

{i>Header<i} ini sama dengan mengatakan "Saya ingin menerima HTML sebagai respons. Ini kue yang saya punya."

Contoh header respons

Content-Encoding: gzip
Cache-Control: no-store

Header ini sama dengan menyatakan "Data dalam respons ini dienkode dengan gzip. Jangan meng-cache ini."

Body

Pesan itu sendiri. Format ini bisa berupa teks biasa, biner gambar, JSON, HTML, atau banyak format lainnya.

Bagaimana cara kerja CORS?

Kebijakan origin yang sama memberi tahu browser untuk memblokir permintaan lintas origin. Jika Anda memerlukan resource publik dari asal yang berbeda, server penyedia resource akan memberi tahu browser bahwa asal yang mengirim permintaan dapat mengakses resource-nya. Browser akan mengingatnya dan mengizinkan berbagi resource lintas origin untuk resource tersebut.

Langkah 1: permintaan klien (browser)

Saat browser membuat permintaan lintas origin, browser akan menambahkan header Origin dengan origin saat ini (skema, host, dan port).

Langkah 2: respons server

Saat melihat header ini, server akan menambahkan header Access-Control-Allow-Origin ke respons yang menentukan origin yang meminta (atau * untuk mengizinkan origin apa pun.)

Langkah 3: browser menerima respons

Saat melihat respons ini dengan header Access-Control-Allow-Origin yang sesuai, browser akan membagikan data respons ke situs klien.

Bagikan kredensial ke CORS

Untuk alasan privasi, CORS biasanya digunakan untuk permintaan anonim, yang pemohonnya tidak diidentifikasi. Jika ingin mengirim cookie saat menggunakan CORS yang dapat mengidentifikasi pengirim, Anda harus menambahkan header tambahan ke permintaan dan respons.

Permintaan

Tambahkan credentials: 'include' ke opsi pengambilan seperti dalam contoh berikut. Ini mencakup cookie dengan permintaan sebagai berikut:

fetch('https://example.com', {
  mode: 'cors',
  credentials: 'include'
})

Respons

Access-Control-Allow-Origin harus ditetapkan ke asal tertentu (tanpa karakter pengganti menggunakan *) dan Access-Control-Allow-Credentials harus ditetapkan ke true.

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Credentials: true

Permintaan preflight untuk panggilan HTTP yang kompleks

Saat aplikasi web membuat permintaan HTTP yang kompleks, browser akan menambahkan permintaan preflight ke awal rantai permintaan.

Spesifikasi CORS menentukan permintaan kompleks sebagai berikut:

  • Permintaan yang menggunakan metode selain GET, POST, atau HEAD.
  • Permintaan yang menyertakan header selain Accept, Accept-Language, atau Content-Language.
  • Permintaan yang memiliki header Content-Type selain application/x-www-form-urlencoded, multipart/form-data, atau text/plain.

Browser secara otomatis membuat permintaan preflight yang diperlukan dan mengirimkannya sebelum pesan permintaan yang sebenarnya. Permintaan preflight adalah permintaan OPTIONS seperti contoh berikut:

OPTIONS /data HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: DELETE

Di sisi server, aplikasi yang menerima permintaan akan merespons permintaan preflight dengan informasi tentang metode yang diterima aplikasi dari origin ini:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, DELETE, HEAD, OPTIONS

Respons server juga dapat menyertakan header Access-Control-Max-Age untuk menentukan durasi dalam detik guna meng-cache hasil preflight. Hal ini memungkinkan klien untuk mengirim beberapa permintaan yang kompleks tanpa perlu mengulangi permintaan preflight.