Cross-Origin Resource Sharing (CORS)

Membagikan resource lintas origin dengan aman

Mariko Kosaka
X

Kebijakan origin yang sama di browser memblokir pembacaan resource dari origin yang berbeda. Mekanisme ini menghentikan 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>. Ini dapat berupa resource publik yang seharusnya tersedia untuk dibaca siapa pun, tetapi kebijakan asal yang sama memblokir penggunaannya. Developer sebelumnya 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 server dapat menggunakan origin tambahan.

Bagaimana cara kerja permintaan resource di web?

permintaan dan respons
Permintaan klien dan respons server yang diilustrasikan.

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

Header HTTP menegosiasikan pertukaran pesan antara klien dan server, serta digunakan untuk menentukan akses. Pesan permintaan browser dan 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 setara dengan mengatakan "Saya ingin menerima HTML sebagai respons. Ini kuki 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. Data ini dapat 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. Saat Anda memerlukan resource publik dari origin lain, server penyedia resource memberi tahu browser bahwa origin 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 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, dan ingin mengizinkan akses, server akan menambahkan header Access-Control-Allow-Origin ke respons yang menentukan asal permintaan (atau * untuk mengizinkan asal mana pun).

Langkah 3: browser menerima respons

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

Membagikan kredensial dengan CORS

Karena alasan privasi, CORS biasanya digunakan untuk permintaan anonim, yang mana pemohon 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 origin 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 pra-penerbangan ke awal rangkaian 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 preflight yang diperlukan dan mengirimkannya sebelum pesan permintaan 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 merespons permintaan pra-penerbangan dengan informasi tentang metode yang diterima aplikasi dari asal 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 untuk menyimpan hasil preflight dalam cache. Hal ini memungkinkan klien mengirim beberapa permintaan kompleks tanpa perlu mengulangi permintaan pra-penerbangan.