Cross-Origin Resource Sharing (CORS)

Berbagi resource lintas origin dengan aman

Mariko Kosaka
X

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

Aplikasi web modern sering kali ingin mendapatkan resource dari asal yang berbeda, misalnya, mengambil data JSON dari domain lain atau memuat gambar dari situs lain ke elemen <canvas>. Ini dapat berupa resource publik yang harus tersedia untuk dibaca siapa saja, tetapi kebijakan asal yang sama memblokir penggunaannya. Developer pernah menggunakan solusi seperti JSONP.

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

Bagaimana cara kerja permintaan referensi 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 menentukan 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

Header ini sama dengan mengatakan "Saya ingin menerima HTML sebagai respons. Berikut cookie yang saya miliki."

Contoh header respons

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

Header ini setara dengan mengatakan "Data dalam respons ini dienkode dengan gzip. Jangan meng-cache ini."

Isi

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

Bagaimana cara kerja CORS?

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

Langkah 1: permintaan klien (browser)

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

Langkah 2: respons server

Saat melihat header ini, dan ingin mengizinkan akses, 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 browser melihat respons ini dengan header Access-Control-Allow-Origin yang sesuai, browser akan membagikan data respons ke situs klien.

Membagikan kredensial dengan CORS

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

Permintaan

Tambahkan credentials: 'include' ke opsi pengambilan seperti dalam contoh berikut. Hal 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 (tidak ada karakter pengganti yang 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 pra-penerbangan 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 otomatis membuat permintaan pra-penerbangan yang diperlukan dan mengirimnya 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 guna menentukan durasi dalam detik untuk menyimpan hasil preflight ke cache. Hal ini memungkinkan klien untuk mengirim beberapa permintaan yang kompleks tanpa perlu mengulangi permintaan preflight.