Konfigurasikan berbagi sumber daya lintas asal (CORS) untuk ApsaraVideo VOD menggunakan header respons HTTP kustom - ApsaraVideo VOD

Saat perlu berbagi atau mengakses resource dari origin yang berbeda, Anda dapat mengonfigurasi header respons HTTP kustom. Topik ini menjelaskan cara mengaktifkan berbagi sumber daya lintas asal untuk resource di ApsaraVideo VOD.

Apa itu berbagi sumber daya lintas asal?

Berbagi sumber daya lintas asal (CORS) adalah mekanisme standar yang memungkinkan halaman web mengakses resource dari origin (domain, protokol, atau port) yang berbeda dari miliknya sendiri. Mekanisme ini menyediakan cara aman untuk mengaktifkan transfer data lintas asal. Untuk informasi lebih lanjut, lihat Cross-Origin Resource Sharing (CORS).

Catatan

T: Apa yang terjadi jika CORS tidak diaktifkan pada CDN secara default?

Secara default, CDN tidak mengaktifkan berbagi sumber daya lintas asal (CORS). Tanpa konfigurasi ini, browser menerapkan kebijakan asal sama dan memblokir permintaan lintas asal, sehingga mencegah situs web lain memuat resource Anda.

Error lintas asal intermiten akibat caching CDN

Saat node CDN mengambil konten dari origin untuk pertama kalinya, jika permintaan tidak berisi header Origin, OSS tidak mengembalikan header respons Access-Control-Allow-Origin. CDN menyimpan cache respons ini yang tidak berisi header CORS (durasi cache default ditentukan oleh aturan cache).

Saat permintaan lintas asal berikutnya yang berisi header Origin mengenai respons cache tersebut, browser melaporkan error lintas asal karena respons tidak berisi header Access-Control-Allow-Origin. Karena sifat acak cache hit, akses ke resource yang sama gagal secara intermiten pada waktu yang berbeda.

Solusi: Tambahkan header respons Access-Control-Allow-Origin di Custom HTTP Response Header di bawah Domain Names > Cache. Setelah konfigurasi, gunakan refresh and prefetch untuk menghapus respons cache lama yang tidak berisi header CORS pada node CDN, sehingga respons cache baru berisi header CORS yang benar.

Setelah CDN menyimpan cache respons, CDN tidak lagi mengambil konten dari origin untuk memeriksa pengaturan CORS OSS. Oleh karena itu, Anda harus mengonfigurasi header respons di tingkat CDN, bukan hanya mengandalkan aturan CORS OSS.

Mengapa mengonfigurasi berbagi sumber daya lintas asal?

Karena pembatasan keamanan, browser biasanya menerapkan kebijakan asal sama, yang membatasi permintaan untuk memuat dan mengakses resource dari domain, subdomain, protokol, atau port yang berbeda. Misalnya, example.com tidak dapat mengakses resource di example.org. Dengan mengonfigurasi berbagi sumber daya lintas asal (CORS), Anda dapat menetapkan header respons terkait pada server CDN. Jika permintaan mencakup header yang sesuai dengan aturan yang diizinkan, server mengembalikan header respons HTTP yang sesuai, sehingga memungkinkan resource lintas asal dimuat dan diakses.

Cara kerja

CORS dikonfigurasi pada server origin

Dengan CORS dikonfigurasi pada CDN

Aktifkan berbagi sumber daya lintas asal

Login ke ApsaraVideo VOD console.
Pada panel navigasi kiri, pilih Configuration Management > CDN Configuration > Domain Names.
Pada halaman Domain Names, temukan nama domain yang ingin Anda kelola dan klik Configure.
Pada panel navigasi kiri untuk nama domain, klik Cache.
Klik tab Custom HTTP Response Header.
Klik Add untuk mengonfigurasi header respons HTTP kustom.

Tetapkan parameter untuk origin yang diizinkan dan klik OK.

Parameter	Contoh
Operation	Add
Response Header	Access-Control-Allow-Origin
Header Value	* Catatan Nilainya dapat diatur menjadi tanda bintang (``) untuk mengizinkan permintaan dari origin mana pun. Jika nilainya bukan tanda bintang (``), Anda dapat menentukan satu atau beberapa alamat IP, nama domain, atau kombinasi keduanya. Gunakan koma untuk memisahkan beberapa nilai. Jika nilai header bukan `*`, nilai tersebut harus diawali dengan `http://` atau `https://`. Anda dapat menyertakan nomor port dalam nilai header. Nama domain wildcard didukung.
Allow Duplicates	No Catatan Yes: Mengizinkan header duplikat. POP CDN mempertahankan header dari server origin dan menambahkan header baru dengan nama yang sama. No: Mencegah header duplikat. POP CDN menimpa header dari server origin dengan header baru. Topik ini menggunakan contoh di mana duplikat tidak diizinkan. Konfigurasi aktual dapat berbeda tergantung lingkungan Anda. Penting Pengaturan Allow Duplicates dan CORS saling eksklusif. Jika Allow Duplicates diatur ke Yes, validasi CORS dinonaktifkan.
CORS	Enable Catatan Anda hanya dapat mengonfigurasi CORS saat Operation diatur ke Add dan Response Header adalah "Access-Control-Allow-Origin". CORS dapat diatur ke Disable atau Enable. Nilai default-nya adalah Disable. Dalam status Off, node CDN tidak memvalidasi header Origin dalam permintaan pengguna dan hanya merespons dengan nilai "Access-Control-Allow-Origin" yang dikonfigurasi. Saat Enabled, node CDN akan melakukan validasi lintas asal pada permintaan pengguna sesuai aturan berikut dan merespons dengan nilai "Access-Control-Allow-Origin" berdasarkan hasil validasi. Aturan validasi lintas asal: Pencocokan Wildcard: Saat nilai Response Header Access-Control-Allow-Origin diatur ke "", header `Access-Control-Allow-Origin:` selalu dikembalikan, terlepas dari apakah permintaan pengguna menyertakan parameter `Origin` atau berapa pun nilainya. Pencocokan eksak: Header Value diatur ke satu atau beberapa origin spesifik, dipisahkan oleh koma (,). Jika nilai header "Origin" dalam permintaan secara eksak sesuai dengan salah satu nilai yang dikonfigurasi, respons akan menyertakan header lintas asal yang sesuai. Jika tidak ada kecocokan eksak, header CORS tidak disertakan dalam respons. Pencocokan nama domain wildcard: Jika nilai custom response header "Access-Control-Allow-Origin" diatur ke nama domain wildcard, sistem memverifikasi apakah nilai Origin dalam header permintaan sesuai dengan nama domain wildcard tersebut. Saat enabled, jika nama domain dalam Header Value berisi tanda hubung `-`, Anda harus melakukan escape tanda hubung tersebut sebelum mengonfigurasi nilainya. Escape `-` sebagai `%-`. Contoh: Nilai Header Asli: `http://doc.aliyun-example.com`. Nilai Header yang Di-Escape: `http://doc.aliyun%-example.com`.

Tetapkan parameter untuk metode yang diizinkan dan klik OK.

Parameter	Contoh
Operation	Add
Response Header	Access-Control-Allow-Methods
Header Value	GET, POST, PUT Catatan Gunakan koma untuk memisahkan beberapa metode.
Allow Duplicates	No Catatan Yes: Mengizinkan header duplikat. POP CDN mempertahankan header dari server origin dan menambahkan header baru dengan nama yang sama. No: Mencegah header duplikat. POP CDN menimpa header dari server origin dengan header baru. Topik ini menggunakan contoh di mana duplikat tidak diizinkan. Implementasi aktual dapat berbeda tergantung lingkungan Anda.

Contoh konfigurasi

Contoh 1

Jika nilai header respons untuk berbagi sumber daya lintas asal diatur ke satu nilai atau beberapa nilai (nilai ganda dipisahkan oleh koma).

Jika nilai parameter "Origin" dalam header permintaan secara eksak sesuai dengan salah satu nilai yang dikonfigurasi, server merespons dengan header lintas asal yang sesuai.
Jika tidak ada kecocokan eksak, header CORS tidak disertakan dalam respons.

Di ApsaraVideo VOD console, atur Access-Control-Allow-Origin ke http://example.com,https://aliyundoc.com.

Header Origin permintaan pengguna adalah http://example.com, dan POP CDN merespons dengan Access-Control-Allow-Origin: http://example.com.
Header Origin dalam permintaan pengguna adalah https://aliyundoc.com, dan node CDN merespons dengan Access-Control-Allow-Origin: https://aliyundoc.com.
Node CDN tidak akan merespons permintaan pengguna dengan header Origin http://aliyundoc.com (karena ketidaksesuaian protokol: permintaan pengguna menggunakan HTTP, sedangkan CDN dikonfigurasi untuk HTTPS).
Jika header Origin permintaan adalah http://aliyun.com, POP CDN tidak akan merespons (ketidaksesuaian domain).

Contoh 2

Jika header respons Access-Control-Allow-Origin diatur ke nama domain wildcard, nilai Origin dalam header permintaan diperiksa untuk memverifikasi bahwa nilainya sesuai dengan nama domain wildcard tersebut.

Di ApsaraVideo VOD console, atur Access-Control-Allow-Origin ke http://*.aliyundoc.com.

Permintaan pengguna berisi header Origin http://demo.aliyundoc.com, dan POP CDN merespons dengan Access-Control-Allow-Origin: http://demo.aliyundoc.com.
Jika header Origin permintaan adalah http://demo.example.com, POP CDN tidak akan merespons karena nama domain tidak sesuai.
Node CDN tidak merespons permintaan pengguna dengan header Origin https://demo.aliyundoc.com karena permintaan menggunakan protokol HTTPS, tetapi CDN dikonfigurasi dengan protokol HTTP.

FAQ

Mengapa pemutaran gagal di browser web (Chrome/Edge) dengan error CORS pada file .ts?

Versi browser yang lebih baru menerapkan validasi CORS ketat saat memuat segmen .ts melalui Media Source Extensions (MSE). Jika CDN tidak memiliki header Access-Control-Allow-Origin yang dikonfigurasi dengan benar, browser akan memblokir permintaan dan pemutaran akan gagal.

Selain itu, jika Anda telah mengonfigurasi nilai wildcard * untuk Access-Control-Allow-Origin dan permintaan pemutar membawa cookie atau kredensial session, browser akan menolak respons tersebut. Dalam kasus ini, ubah nilai dari * menjadi nama domain eksak antarmuka depan pemutar Anda (misalnya, https://player.example.com).

Mengapa pratinjau konsol gagal atau permintaan file .ts melaporkan error CORS di beberapa komputer?

Periksa apakah aturan CORS telah ditambahkan untuk nama domain yang dipercepat. Pada halaman Domain Names, pilih domain target, dan verifikasi bahwa header respons HTTP kustom mencakup Access-Control-Allow-Origin dengan nilai yang benar.

Mengapa pemutaran gagal di Android WebView tetapi berhasil di web/iOS setelah memodifikasi Access-Control-Allow-Origin?

Setelah memodifikasi header respons Access-Control-Allow-Origin, Anda harus melakukan purge cache CDN dan menghapus cache WebView di perangkat Android agar pengaturan CORS baru berlaku. Jika tidak, aplikasi terus menggunakan respons cache dengan header lama.

Mengapa lingkungan pengujian atau domain tertentu mengembalikan error 4009?

Periksa apakah Access-Control-Allow-Origin dikonfigurasi hanya untuk mengizinkan domain produksi sementara mengecualikan domain pengujian. Tambahkan domain pengujian Anda ke daftar origin yang diizinkan.

Jika Access-Control-Allow-Credentials diatur ke true, nilai Origin tidak boleh diatur ke wildcard *. Konfigurasikan domain origin eksak (misalnya, https://test.example.com) sebagai gantinya.

Mengapa pemutaran gagal di WeChat Mini Programs atau Official Accounts?

Jika perlindungan hotlink tidak diaktifkan, Anda tidak perlu mengonfigurasi daftar putih Referer. Namun, jika intersepsi CORS masih terjadi, Anda tetap harus mengonfigurasi aturan CORS.

Untuk pemutaran dalam aplikasi di WeChat Official Accounts, pastikan hal berikut:

Halaman pemutaran disajikan melalui HTTPS.
Nama domain telah menyelesaikan Pendaftaran ICP.
Sertifikat SSL valid.
Respons playlist M3U8 mengembalikan header Content-Type yang benar: application/vnd.apple.mpegurl atau application/x-mpegURL.

Apakah mengonfigurasi berbagi sumber daya lintas asal (CORS) meningkatkan risiko hotlinking?

Tidak. CORS dan perlindungan hotlink berbasis Referer adalah dua mekanisme keamanan independen yang bekerja pada lapisan berbeda. CORS adalah kebijakan sisi browser yang mengontrol apakah browser mengizinkan halaman web meminta resource dari origin berbeda. Perlindungan hotlink berbasis Referer adalah kontrol akses sisi server pada CDN yang mencegah nama domain tidak sah menggunakan resource video Anda.

Mengonfigurasi CORS tidak melewati atau melemahkan daftar hitam dan daftar putih Referer yang sudah ada. Bahkan jika Anda mengatur Access-Control-Allow-Origin ke wildcard *, permintaan yang nilai Referer-nya tidak diizinkan tetap ditolak dengan kode status HTTP 403. Untuk mencegah resource Anda di-hotlink, konfigurasikan perlindungan hotlink berbasis Referer. Untuk informasi lebih lanjut, lihat Configure Referer hotlink protection.