Membagikan resource lintas origin dengan aman
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](https://web.dev/static/articles/cross-origin-resource-sharing/image/request-response.png?authuser=0&hl=id)
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.
Header
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
, atauContent-Language
. - Permintaan yang memiliki header
Content-Type
selainapplication/x-www-form-urlencoded
,multipart/form-data
, atautext/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.