Pendahuluan CORS untuk Pemula

Ingin tahu apa itu CORS (Cross-Origin Resource Sharing)?


Dalam film mata-mata, petugas keamanan memiliki cara kode untuk mentransmisikan informasi di antara mereka sendiri. Karena mereka sebagian besar mentransmisikan informasi yang dapat digunakan untuk melawan mereka jika jatuh ke tangan musuh mereka, mereka harus memastikan bahwa mereka yang menerima informasi adalah pihak yang dipercaya. Hal yang sama berlaku untuk mereka yang mengirim informasi tersebut. Ketika pengirim dan penerima dipercaya, kredibilitas dan keamanan informasi dapat dijamin.

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

Replika skenario ini terjadi dalam komunikasi antara browser dan server web, dan itu disebut kebijakan asal yang sama.

Menurut MDN:

Itu kebijakan asal yang sama adalah mekanisme keamanan kritis yang membatasi cara dokumen atau skrip yang dimuat dari satu sumber dapat berinteraksi dengan sumber dari sumber lain. Ini membantu mengisolasi dokumen yang berpotensi berbahaya, mengurangi kemungkinan vektor serangan.

Apa itu CORS??

Dalam kasus kehidupan nyata, ketika operator keamanan memberikan aturan bahwa komunikasi hanya boleh terjadi di antara operasinya sebagai alat keamanan, itu mirip dengan kebijakan asal-sama. Namun, mungkin ada kasus di mana mereka perlu berinteraksi dengan dunia luar. Atau dengan operator pakaian keamanan lainnya, agar hal itu terjadi, mereka dapat menerapkan tindakan keamanan lain memeriksa mereka operasi. Verifikasi ini dapat datang dengan berbagai cara, tergantung pada operasi yang terlibat. Dalam hal komunikasi di Internet, CORS adalah mekanisme yang memungkinkan peramban menggunakan untuk mengakses sumber daya yang semula tidak akan dapat mereka peroleh karena sumber dayanya berbeda.

Cross-Origin Resource Sharing (CORS) adalah mekanisme yang menggunakan tajuk HTTP tambahan untuk memberi tahu peramban agar memberikan aplikasi web yang berjalan di satu sumber, akses ke sumber daya yang dipilih dari sumber yang berbeda.

Saya telah berbicara tentang asal lebih dari sekali, dan Anda mungkin bertanya-tanya apa artinya itu. Asal ditentukan oleh protokol, domain, dan port dari URL. Ketika Anda memiliki API di asal seperti https://api.geekflare.com:3001 dan frontend Anda di https://geekflare.com, asal-usulnya dikatakan berbeda. Dalam situasi ini, Anda perlu CORS untuk dapat mengakses sumber daya di kedua ujungnya.

Ketika permintaan dibuat ke server, browser (klien) dan server mengirim permintaan dan tanggapan, header HTTP disertakan. Di antara tajuk ini, tajuk tambahan disertakan untuk mencegah peramban memblokir komunikasi.

Mengapa browser memblokir komunikasi?

Fitur keamanan browsernya. Ini akan melakukannya jika permintaan berasal dari asal yang berbeda dari permintaan klien. Header tambahan yang disertakan sebagai hasil dari CORS adalah cara untuk memberi tahu klien bahwa ia dapat memanfaatkan respons yang diterimanya..

Header CORS

Salah satu tajuk aman yang bisa berupa tajuk respons atau permintaan.

Header Respons

Ini adalah tajuk yang dikirim kembali oleh server sebagai tanggapannya.

  • Access-Control-Allow-Origin:: Ini digunakan untuk menentukan asal yang diizinkan untuk mengakses sumber daya di server. Dimungkinkan untuk menentukan bahwa hanya permintaan dari asal tertentu yang diizinkan – Access-Control-Allow-Origin: https://geekflare.com, atau bahwa asal tidak masalah – Access-Control-Allow-Origin: *.
  • Access-Control-Expose-Headers:: Seperti namanya, ini mencantumkan header yang dapat diakses browser.
  • Access-Control-Max-Age:: Ini menunjukkan durasi di mana respons permintaan preflight dapat di-cache.
  • Akses-Kontrol-Bolehkan-Kredensial:: Ini menunjukkan bahwa browser dapat menggunakan respons ketika permintaan awal dibuat dengan kredensial.
  • Metode Akses-Kontrol-Bolehkan:: Ini menunjukkan metode yang diizinkan saat mencoba mengakses sumber daya.
  • Access-Control-Allow-Headers:: Ini menunjukkan header HTTP dapat digunakan dalam permintaan.

Berikut ini adalah contoh dari bagaimana tanggapan akan terlihat

HTTP / 1.1 204 Tidak Ada Konten
Akses-Kontrol-Bolehkan-Asal: *
Metode Akses-Kontrol-Bolehkan: DAPATKAN, KEPALA, PUT, PATCH, POST, DELETE
Vary: Access-Control-Request-Headers
Header Akses-Kontrol-Bolehkan: Jenis Konten, Terima
Panjang Konten: 0
Tanggal: Sab, 16 Nov 2019 11:41:08 GMT + 1
Koneksi: tetap hidup

Tajuk Permintaan

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

  • Asal:: Ini menunjukkan asal permintaan klien. Ketika bekerja dengan frontend dan backend, seperti yang dinyatakan sebelumnya, ini akan menjadi tuan rumah aplikasi frontend Anda.
  • Metode Akses-Kontrol-Permintaan:: Ini digunakan dalam permintaan preflight untuk menunjukkan metode HTTP yang akan digunakan untuk membuat permintaan.
  • Akses-Kontrol-Permintaan-Header:: Ini digunakan dalam permintaan preflight untuk menunjukkan header HTTP yang akan digunakan untuk membuat permintaan.

Berikut adalah contoh tampilan permintaan

curl -i -X ​​OPSI localhost: 3001 / api \
-H ‘Akses-Kontrol-Permintaan-Metode: DAPATKAN’ \
-H ‘Access-Control-Request-Headers: Content-Type, Accept’ \
-H ‘Asal: http: // localhost: 3000’

Permintaan Preflight

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

Setelah menyebutkan permintaan preflight di sana-sini, apa artinya itu?

Permintaan Preflight terjadi ketika klien harus mengirim permintaan preflight sebelum permintaan utama. Permintaan preflight lebih dari a menyelidiki untuk menentukan apakah server mendukung permintaan utama yang akan dibuat. Ketika konfirmasi positif diperoleh, permintaan utama kemudian dikirim.

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

Menerapkan CORS

Anda sebagian besar ingin mengatur hal-hal di bagian belakang aplikasi Anda. Implementasinya tergantung pada kerangka kerja yang Anda gunakan. Untuk tutorial ini, kita akan melihat bagaimana melakukannya di NodeJS dan Rails.

Rel

Saya sarankan Anda memanfaatkan rak-rak permata Maka Anda harus menambahkan ini ke file config / application.rb Anda.

config.middleware.insert_before 0, Rack :: Cors do
memungkinkan lakukan
asal-usul ‘*’
sumber daya ‘*’,
header:: apa saja,
expose:% i (klien uid tipe token kadaluwarsa akses-token),
metode:% i (dapatkan kepala opsi hapus posting put patch),
kredensial: benar
akhir
akhir

NodeJS

Di Node.js, ini akan terlihat seperti ini.

app.all (‘*’, (req, res, next) => {
res.header (‘Access-Control-Allow-Origin’, ‘*’);
res.header (‘Metode Akses-Kontrol-Izinkan ‘,‘ PUT, DAPATKAN, POST, HAPUS, PATCH, KEPALA OPSI’);
res.header (‘Access-Control-Allow-Headers’, ‘*’);
res.header (‘Akses-Kontrol-Izinkan-Kredensial ‘, benar);
lanjut();
});

Dalam cuplikan kode, kami menyiapkan sumber, metode, tajuk, dan kredensial yang harus diizinkan untuk mengakses sumber daya yang tersedia di server kami. Anda juga dapat checkout Sqreen yang menyediakan modul header keamanan untuk diintegrasikan dengan aplikasi Ruby, PHP, Python, Java, Go, Node.JS. Dan untuk mengimplementasikan di Apache atau Nginx, lihat panduan ini.

Kesimpulan

CORS melonggarkan kebijakan sehingga browser Anda dapat mengakses sumber daya yang Anda inginkan. Memahami apa itu, mengapa itu penting, dan bagaimana cara mengaturnya akan membantu dalam mencari tahu masalah yang mungkin Anda hadapi saat Anda membangun aplikasi web Anda.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map