Cross-Origin Resource Sharing (CORS)

Membagikan resource lintas-asal 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. Secara historis, developer telah menggunakan solusi seperti JSONP.

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

Bagaimana cara kerja permintaan resource 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 peminta dan pengirim, termasuk informasi yang diperlukan untuk mendapatkan resource.

Header HTTP menegosiasikan pertukaran pesan antara klien dan server, dan 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 setara 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 simpan dalam cache."

Isi

Pesan itu sendiri. 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 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 server melihat header ini, dan ingin mengizinkan akses, server akan menambahkan header Access-Control-Allow-Origin ke respons yang menentukan origin permintaan (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 dengan situs klien.

Membagikan kredensial dengan CORS

Karena alasan privasi, CORS biasanya digunakan untuk permintaan anonim, dengan peminta 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 pra-penerbangan 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 pra-penerbangan 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 untuk meng-cache hasil pra-penerbangan. Hal ini memungkinkan klien mengirim beberapa permintaan kompleks tanpa perlu mengulangi permintaan preflight.