Pengenalan CORS untuk Pemula

Tertanya-tanya apa itu CORS (Perkongsian Sumber Silang Asal)?


Dalam filem perisik, pengawal keselamatan mempunyai kaedah kod untuk menyebarkan maklumat sesama mereka. Oleh kerana mereka kebanyakan menyebarkan maklumat yang dapat digunakan untuk melawan mereka jika jatuh ke tangan musuh mereka, mereka harus memastikan bahawa mereka yang menerima maklumat itu adalah pihak yang dipercayai. Perkara yang sama berlaku bagi mereka yang mengirimkan maklumat tersebut. Apabila pengirim dan penerima dipercayai, kredibiliti dan keselamatan maklumat dapat dijamin.

https://pt.slideshare.net/atirekgupta/selenium-workshop-34820044

Replika senario ini berlaku dalam komunikasi antara penyemak imbas dan pelayan web, dan disebut sebagai dasar asal sama.

Menurut MDN:

The dasar asal sama adalah mekanisme keselamatan kritikal yang menyekat bagaimana dokumen atau skrip yang dimuat dari satu asal dapat berinteraksi dengan sumber dari asal lain. Ia membantu mengasingkan dokumen yang berpotensi berniat jahat, mengurangkan kemungkinan vektor serangan.

Apa itu CORS?

Dalam kes kehidupan nyata, ketika koperasi keselamatan memberikan peraturan bahawa komunikasi hanya boleh berlaku di antara koperasi sebagai alat keselamatan, yang serupa dengan kebijakan asal yang sama. Namun, mungkin ada kes di mana mereka perlu berinteraksi dengan dunia luar. Atau dengan operasi pakaian keselamatan lain, untuk itu, mereka boleh melaksanakan langkah keselamatan lain untuk mengesahkan koperasi tersebut. Pengesahan ini boleh dilakukan dengan cara yang berbeza, bergantung pada operasi yang terlibat. Dalam kes komunikasi di Internet, CORS adalah mekanisme yang memungkinkan penyemak imbas digunakan untuk mengakses sumber yang pada asalnya tidak dapat mereka lakukan kerana sumber tersebut berasal.

Cross-Origin Resource Sharing (CORS) adalah mekanisme yang menggunakan tajuk HTTP tambahan untuk memberitahu penyemak imbas untuk memberikan aplikasi web yang berjalan pada satu asal, akses ke sumber yang dipilih dari asal yang berbeza.

Saya telah bercakap mengenai asal lebih daripada sekali, dan anda mungkin tertanya-tanya apa maksudnya. Asal ditentukan oleh protokol, domain, dan port URL. Apabila anda mempunyai API pada asal seperti https://api.geekflare.com:3001 dan frontend anda di https://geekflare.com, asal-usulnya dikatakan berbeza. Dalam keadaan ini, anda memerlukan CORS untuk dapat mengakses sumber di kedua-dua hujungnya.

Apabila permintaan dibuat ke pelayan, penyemak imbas (klien) dan pelayan mengirim permintaan dan respons, tajuk HTTP disertakan. Di antara tajuk ini, tajuk tambahan disertakan untuk mengelakkan penyemak imbas menyekat komunikasi.

Mengapa penyemak imbas menyekat komunikasi?

Ciri keselamatan penyemak imbasnya. Ini akan dilakukan sekiranya permintaan itu datang dari asal yang berbeza dari permintaan pelanggan. Header tambahan yang disertakan sebagai hasil dari CORS adalah cara untuk memberitahu klien bahawa ia dapat memanfaatkan respons yang diterimanya.

Pengetua CORS

Salah satu tajuk selamat yang boleh menjadi respons atau permintaan tajuk.

Tajuk Respons

Ini adalah tajuk yang dihantar oleh pelayan sebagai tindak balasnya.

  • Access-Control-Allow-Origin:: Ini digunakan untuk menentukan asal yang dibenarkan untuk mengakses sumber di pelayan. Anda boleh menentukan bahawa hanya permintaan dari asal tertentu yang dibenarkan – Access-Control-Allow-Origin: https://geekflare.com, atau asal tidak penting – Access-Control-Allow-Origin: *.
  • Access-Control-Expose-Headers:: Seperti namanya, ini menyenaraikan tajuk yang boleh diakses oleh penyemak imbas.
  • Access-Control-Max-Age:: Ini menunjukkan tempoh di mana respons permintaan preflight dapat di-cache.
  • Access-Control-Allow-Credentials:: Ini menunjukkan bahawa penyemak imbas dapat memanfaatkan respons ketika permintaan awal dibuat dengan bukti kelayakan.
  • Access-Control-Allow-Methods:: Ini menunjukkan kaedah yang dibenarkan ketika cuba mengakses sumber.
  • Access-Control-Allow-Headers:: Ini menunjukkan header HTTP dapat digunakan dalam permintaan.

Berikut adalah contoh bagaimana tindak balas akan kelihatan

HTTP / 1.1 204 Tiada Kandungan
Akses-Kawalan-Benarkan-Asal: *
Kaedah Akses-Kawalan-Benarkan: DAPATKAN, KETUA, PUT, PATCH, POST, DELETE
Variasi: Akses-Kawalan-Permintaan-Tajuk
Akses-Kawalan-Benarkan-Tajuk: Jenis Kandungan, Terima
Panjang Kandungan: 0
Tarikh: Sabtu, 16 Nov 2019 11:41:08 GMT + 1
Sambungan: terus hidup

Minta Tajuk

Berikut adalah tajuk yang harus diisi permintaan pelanggan untuk memanfaatkan mekanisme CORS.

  • Asal:: Ini menunjukkan asal permintaan pelanggan. Semasa bekerja dengan frontend dan backend, seperti yang dinyatakan sebelumnya, ini akan menjadi tuan rumah aplikasi frontend anda.
  • Access-Control-Request-Method:: Ini digunakan dalam permintaan preflight untuk menunjukkan metode HTTP yang akan digunakan untuk membuat permintaan.
  • Access-Control-Request-Headers:: Ini digunakan dalam permintaan preflight untuk menunjukkan header HTTP yang akan digunakan untuk membuat permintaan.

Berikut adalah contoh bagaimana permintaan akan kelihatan

curl -i -X ​​PILIHAN localhost: 3001 / api \
-H ‘Kaedah Akses-Kawalan-Permintaan: DAPATKAN’ \
-H ‘Akses-Kawalan-Permintaan-Tajuk: Jenis Kandungan, Terima’ \
-H ‘Asal: http: // localhost: 3000’

Permintaan Penerbangan Awal

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Setelah menyebut permintaan preflight di sana sini, apa maksudnya?

Permintaan pra-penerbangan berlaku ketika klien harus mengirim permintaan preflight sebelum permintaan utama. Permintaan preflight lebih kepada siasatan untuk menentukan sama ada pelayan menyokong permintaan utama yang akan dibuat. Apabila pengesahan positif diperoleh, permintaan utama kemudian dihantar.

Apabila permintaan bukan permintaan preflight, itu disebut a permintaan sederhana.

Melaksanakan CORS

Anda kebanyakannya ingin mengatur perkara di bahagian belakang aplikasi anda. Pelaksanaannya bergantung pada kerangka yang anda gunakan. Untuk tutorial ini, kita akan melihat bagaimana melakukannya di NodeJS dan Rails.

Rel

Saya mengesyorkan anda menggunakan cors rak permata. Kemudian anda perlu menambahkannya ke fail config / application.rb anda.

config.middleware.insert_before 0, Rack :: Cors lakukan
membenarkan lakukan
asal-usul ‘*’
sumber ‘*’,
tajuk:: mana-mana,
expose:% i (klien uid jenis token tamat tempoh akses-token),
kaedah:% i (dapatkan kepala pasang pasang hapus pilihan),
tauliah: benar
akhir
akhir

NodeJS

Di Node.js, ini akan kelihatan seperti ini.

app.all (‘*’, (req, res, next) => {
res.header (‘Access-Control-Allow-Origin’, ‘*’);
res.header (‘Access-Control-Allow-Methods’, ‘PUT, GET, POST, DELETE, PATCH, OPTIONS HEAD’);
res.header (‘Access-Control-Allow-Headers’, ‘*’);
res.header (‘Access-Control-Allow-Credentials’, benar);
seterusnya ();
});

Dalam coretan kod, kami menyiapkan asal, kaedah, tajuk, dan tauliah yang harus diizinkan untuk mengakses sumber yang tersedia di pelayan kami. Anda juga boleh membuat pembayaran Sqreen yang menyediakan modul header keselamatan untuk disatukan dengan aplikasi Ruby, PHP, Python, Java, Go, Node.JS. Dan untuk dilaksanakan dalam Apache atau Nginx, rujuk panduan ini.

Kesimpulannya

CORS melonggarkan polisi supaya penyemak imbas anda dapat mengakses sumber yang anda inginkan. Memahami apa itu, mengapa itu penting, dan cara menyiapkannya akan membantu mengetahui masalah yang mungkin anda hadapi semasa anda membina aplikasi web anda.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector