Menggunakan Azure CDN dengan CORS

  • Artikel

Apa itu CORS?

CORS (berbagi sumber daya lintas asal) adalah fitur HTTP yang memungkinkan aplikasi web yang berjalan di bawah satu domain untuk mengakses sumber daya di domain lain. Untuk mengurangi kemungkinan serangan scripting lintas situs, semua browser web modern menerapkan pembatasan keamanan yang dikenal sebagai kebijakan asal yang sama. Pembatasan ini mencegah halaman web memanggil API di domain lain. Namun, CORS menyediakan cara yang aman untuk memungkinkan domain asal memanggil API di domain lain.

Cara kerjanya

Ada dua jenis permintaan CORS, permintaan sederhana dan permintaan kompleks.

Untuk permintaan sederhana:

  1. Browser mengirimkan permintaan CORS dengan header permintaan HTTP Asal tambahan. Nilai header permintaan adalah asal yang melayani halaman induk, yang didefinisikan sebagai kombinasi protokol, domain, dan port. Saat halaman dari HTTPS://www.contoso.com upaya mengakses data pengguna di asal fabrikam.com, header permintaan berikut akan dikirim ke fabrikam.com:

    Origin: https://www.contoso.com

  2. Server mungkin merespons dengan salah satu header berikut:

    • Header Access-Control-Allow-Origin dalam responsnya menunjukkan situs asal mana yang diizinkan. Contohnya:

      Access-Control-Allow-Origin: https://www.contoso.com

    • Kode kesalahan HTTP seperti 403 jika server tidak mengizinkan permintaan asal silang setelah memeriksa header Asal

    • Header Access-Control-Allow-Origin dengan wildcard yang memungkinkan semua asal:

      Access-Control-Allow-Origin: *

Untuk permintaan kompleks:

Permintaan kompleks adalah permintaan CORS tempat browser diharuskan untuk mengirim permintaan preflight (yaitu, penyelidikan awal) sebelum mengirim permintaan CORS yang sebenarnya. Permintaan preflight meminta izin server apakah permintaan CORS asli dapat dilanjutkan dan merupakan permintaan OPTIONS ke URL yang sama.

Tip

Untuk detail lebih lanjut tentang aliran CORS dan perangkap umum, lihat Panduan untuk CORS untuk API REST.

Wildcard atau skenario asal tunggal

CORS di Azure CDN berfungsi secara otomatis tanpa konfigurasi tambahan saat header Access-Control-Allow-Origin diatur ke wildcard (*) atau satu asal. CDN menyimpan respons pertama dan permintaan berikutnya menggunakan header yang sama.

Jika permintaan telah dibuat ke CDN sebelum CORS diatur pada asal Anda, Anda perlu menghapus menyeluruh konten pada konten titik akhir Anda untuk memuat ulang konten dengan header Access-Control-Allow-Origin .

Beberapa skenario asal

Jika Anda perlu mengizinkan daftar asal tertentu agar diizinkan dalam CORS, semuanya menjadi sedikit lebih rumit. Masalah terjadi ketika CDN melakukan cache header Access-Control-Allow-Origin untuk asal CORS pertama. Ketika asal CORS yang berbeda membuat permintaan berikutnya, CDN melayani header Access-Control-Allow-Origin yang di-cache, yang tidak cocok. Ada beberapa cara untuk memperbaiki masalah ini.

Profil standar Azure CDN

Di Azure CDN Standard dari Microsoft, Anda dapat membuat aturan di Mesin aturan standar untuk memeriksa header Asal pada permintaan. Jika ini adalah asal yang valid, aturan Anda mengatur header Access-Control-Allow-Origin dengan nilai yang diinginkan. Dalam hal ini, header Access-Control-Allow-Origin dari server asal file diabaikan dan mesin aturan CDN sepenuhnya mengelola asal CORS yang diizinkan.

Contoh aturan dengan mesin aturan standar

Tip

Anda bisa menambahkan tindakan tambahan ke aturan untuk mengubah header respons tambahan, seperti Access-Control-Allow-Methods.

Azure CDN Premium dari Edgio

Dengan menggunakan mesin aturan Edgio Premium, Anda perlu membuat aturan untuk memeriksa header Asal pada permintaan. Jika ini adalah asal yang valid, aturan Anda mengatur header Access-Control-Allow-Origin dengan asal yang disediakan dalam permintaan. Jika asal yang ditentukan di header Asal tidak diizinkan, aturan Anda harus menghilangkan header Access-Control-Allow-Origin , yang menyebabkan browser menolak permintaan.

Ada dua cara untuk mengatasi masalah ini dengan mesin aturan Premium. Dalam kedua kasus, header Access-Control-Allow-Origin dari server asal file diabaikan dan mesin aturan CDN sepenuhnya mengelola asal CORS yang diizinkan.

Satu ekspresi reguler dengan semua asal yang valid

Dalam hal ini, Anda membuat ekspresi reguler yang menyertakan semua asal yang ingin Anda izinkan:

https?:\/\/(www\.contoso\.com|contoso\.com|www\.microsoft\.com|microsoft.com\.com)$

Tip

Azure CDN Premium dari Edgio menggunakan Perl Compatible Regular Expressions sebagai mesinnya untuk ekspresi reguler. Anda dapat menggunakan alat seperti Ekspresi Reguler 101 untuk memvalidasi ekspresi reguler Anda. Perhatikan bahwa karakter "/" valid dalam ekspresi reguler dan tidak perlu diloloskan, namun, meloloskan karakter itu dianggap sebagai praktik terbaik dan diharapkan oleh beberapa validator regex.

Jika ekspresi reguler cocok, aturan Anda menggantikan header Access-Control-Allow-Origin (jika ada) dari asal dengan asal yang mengirim permintaan. Anda juga dapat menambahkan header CORS tambahan, seperti Access-Control-Allow-Methods.

Contoh aturan dengan ekspresi reguler

Minta aturan header untuk setiap asal.

Alih-alih ekspresi reguler, Anda dapat membuat aturan terpisah untuk setiap asal yang ingin Anda izinkan menggunakan Meminta Kartu Bebas HeaderKondisi kecocokan. Seperti metode ekspresi reguler, hanya mesin aturan yang mengatur header CORS.

Contoh aturan tanpa ekspresi reguler

Tip

Dalam contoh, penggunaan karakter kartubebas * memberi tahu mesin aturan untuk mencocokkan HTTP dan HTTPS.