Memahami Cara CORS Berfungsi dalam Penyemak Imbas Web

Cross-Origin Resource Sharing (CORS) ialah ciri keselamatan kritikal dalam penyemak imbas web yang mengawal cara aplikasi web boleh meminta sumber (seperti data, imej atau skrip) daripada domain yang berbeza daripada yang menyediakan halaman web awal. Ia direka terutamanya untuk melindungi pengguna daripada tapak berniat jahat yang cuba mengakses maklumat sensitif di tapak web lain. Blog ini akan menerangkan cara CORS berfungsi dan sebab ia penting untuk pembangunan web.
Apakah CORS?
Secara ringkas, CORS ialah mekanisme penyemak imbas yang mengawal sumber mana yang boleh diminta oleh halaman web daripada domain yang berbeza. Secara lalai, penyemak imbas melaksanakan Dasar Asal Sama (SOP), yang mengehadkan halaman web daripada membuat permintaan kepada domain selain daripada halaman yang halaman itu dimuatkan. Dasar ini ialah ciri keselamatan asas yang menghalang interaksi yang mungkin berbahaya antara tapak web.

Walau bagaimanapun, terdapat banyak kes di mana permintaan silang asal yang sah diperlukan—contohnya, apabila aplikasi web perlu mengambil data daripada API yang dihoskan pada pelayan lain. CORS mendayakan permintaan sedemikian dengan cara yang selamat dengan membenarkan pelayan menentukan domain mana yang dibenarkan untuk mengakses sumber mereka.

Bagaimana CORS Berfungsi?
CORS berfungsi dengan menambahkan pengepala HTTP pada respons daripada pelayan, menunjukkan sama ada permintaan silang asal dibenarkan atau tidak. Berikut ialah pecahan langkah demi langkah tentang cara CORS beroperasi:

Pelanggan Membuat Permintaan
Apabila halaman web cuba membuat permintaan (cth., melalui XMLHttpRequest, pengambilan atau kemasukan skrip) ke asal yang berbeza (ditakrifkan oleh domain, protokol dan port), penyemak imbas menyemak sama ada permintaan itu melanggar dasar asal yang sama.

Permintaan Prapenerbangan CORS (Untuk Permintaan Kompleks)
Sesetengah permintaan, terutamanya yang mempunyai kaedah seperti PUT, DELETE atau dengan pengepala tersuai, dianggap "kompleks." Sebelum menghantar permintaan sebenar, penyemak imbas menghantar permintaan OPTIONS, yang dikenali sebagai permintaan prapenerbangan. Permintaan prapenerbangan ini bertanya kepada pelayan sama ada ia membenarkan permintaan sebenar dan mengesahkan kaedah, pengepala dan asal HTTP yang dibenarkan.

Pelayan Membalas dengan Pengepala CORS
Pelayan yang menerima permintaan pra-penerbangan atau sebenar menghantar semula respons dengan pengepala khusus yang menunjukkan sama ada permintaan itu dibenarkan. Tajuk utama termasuk:

Access-Control-Allow-Origin: Pengepala ini menentukan domain mana yang dibenarkan untuk mengakses sumber. Jika pengepala ini termasuk asal permintaan, penyemak imbas membenarkan respons. Contohnya, pelayan mungkin membalas dengan:

Access-Control-Allow-Origin: https://example.com

Access-Control-Allow-Methods: Pengepala ini menentukan kaedah HTTP (GET, POST, PUT, dll.) yang dibenarkan oleh pelayan untuk permintaan silang asal.

Access-Control-Allow-Methods: GET, POST

Access-Control-Allow-Headers: Ini menentukan pengepala tersuai yang boleh disertakan dalam permintaan sebenar.

Access-Control-Allow-Headers: Content-Type, Authorization

Access-Control-Allow-Credentials: Jika pelayan membenarkan bukti kelayakan (kuki, pengesahan HTTP), pengepala ini akan disertakan dan ditetapkan kepada benar.

Pelayar Memutuskan
Selepas menerima respons pelayan, penyemak imbas menilai pengepala. Jika pelayan memberikan kebenaran melalui pengepala CORS yang sesuai, penyemak imbas membenarkan permintaan silang asal dan memproses respons. Jika tidak, penyemak imbas menyekat permintaan dan halaman web tidak dapat mengakses sumber.

Contoh Permintaan CORS Mudah
Pertimbangkan senario di mana halaman web yang dihoskan di https://example.com cuba membuat permintaan GET kepada API yang dihoskan di https://api.example.com/data.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Dalam kes ini, penyemak imbas menghantar permintaan ke https://api.example.com. Jika pelayan API dikonfigurasikan untuk membenarkan permintaan daripada https://example.com, ia akan bertindak balas dengan pengepala:

Access-Control-Allow-Origin: https://example.com

Jika pengepala tiada atau salah, penyemak imbas akan menyekat respons disebabkan dasar CORS.

Contoh Prapenerbangan CORS
Untuk permintaan yang lebih kompleks, penyemak imbas memulakan permintaan prapenerbangan untuk menyemak sama ada permintaan silang asal dibenarkan. Berikut ialah contoh permintaan PUT yang mencetuskan prapenerbangan:

fetch('https://api.example.com/update', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
});

Pelayar menghantar permintaan OPTIONS seperti ini:

OPTIONS /update HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Content-Type

Pelayan harus bertindak balas dengan pengepala yang menunjukkan sama ada permintaan ini dibenarkan:

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: PUT
Access-Control-Allow-Headers: Content-Type

Jika pengepala ini ada dan sah, penyemak imbas akan meneruskan dengan permintaan PUT sebenar.

Kepentingan CORS
CORS ialah ciri keselamatan yang menyediakan mekanisme terperinci untuk pelayan web mengawal akses kepada sumber mereka. Tanpa CORS, tapak web berniat jahat boleh dengan mudah mengambil data sensitif daripada domain lain tanpa kebenaran pengguna, yang membawa kepada kelemahan keselamatan seperti Pemalsuan Permintaan Merentas Tapak (CSRF).

Kesimpulan
Memahami CORS adalah penting untuk pembangun web yang bekerja dengan API dan sumber pihak ketiga. Dengan mengkonfigurasi dasar CORS yang betul pada pelayan, pembangun boleh memastikan bahawa aplikasi mereka kekal selamat sambil masih mendayakan interaksi silang asal yang sah.

Jika anda sedang membangunkan apl web dan menghadapi ralat CORS, adalah penting untuk menyemak konfigurasi pelayan dan memastikan pengepala yang diperlukan dihantar dalam respons.

Atas ialah kandungan terperinci Memahami Cara CORS Berfungsi dalam Penyemak Imbas Web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!