Mengonfigurasi berbagi sumber daya lintas asal (CORS) DCDN menggunakan header respons HTTP dan tindakan pencegahan - Edge Security Acceleration

Setelah menambahkan domain Anda ke DCDN Alibaba Cloud, Anda dapat mengonfigurasi header respons HTTP kustom untuk mengaktifkan berbagi sumber daya lintas asal (CORS) dan mengakses resource dari origin yang berbeda.

Apa itu CORS?

Berbagi sumber daya lintas asal (CORS) adalah solusi lintas asal standar yang disediakan oleh HTML5 untuk memungkinkan halaman web mengakses dan memuat resource dari server origin yang berbeda, sekaligus menjaga keamanan transmisi data. Untuk informasi lebih lanjut, lihat Cross-Origin Resource Sharing (CORS).

Manfaat

Untuk alasan keamanan, browser menerapkan kebijakan asal sama, yang membatasi halaman web dalam menginisiasi permintaan untuk mengakses dan memuat resource dari domain atau subdomain yang berbeda, atau melalui protokol atau port yang berbeda. Misalnya, example.com tidak dapat mengakses resource di example.org. Dengan mengonfigurasi CORS, Anda dapat menentukan header respons pada server DCDN. Jika permintaan untuk mengakses resource DCDN membawa header yang sesuai dengan aturan yang diizinkan, resource lintas asal tersebut dapat dimuat dan diakses.

Cara kerja CORS

CORS dinonaktifkan

Klien mengirim permintaan untuk http://example.com/index.html ke example.com.
example.com mengembalikan file index.html ke klien. URL file tersebut berisi URL ke resource dari server origin lain: http://example.org/image_01.png.
Klien mengirim permintaan untuk http://example.org/image_01.png ke example.org.
example.org mengembalikan header lintas asal, seperti Access-Control-Allow-Origin: *.
Klien menerima respons dan browser memeriksa nilai header tersebut. Nilai header berupa tanda bintang (*), yang menunjukkan bahwa permintaan lintas asal dari semua origin diizinkan. Browser kemudian menampilkan respons tersebut.

CORS diaktifkan

Klien mengirim permintaan untuk http://example.com/index.html ke DCDN.
DCDN mengembalikan file index.html ke klien. URL file tersebut berisi URL ke resource dari server origin lain: http://example.org/image_01.png.
Klien mengirim permintaan untuk http://example.org/image_01.png ke DCDN. Permintaan tersebut menyertakan header Origin: http://example.com.
DCDN menerima permintaan tersebut, lalu membandingkan nilai header Origin dalam permintaan dengan nilai Access-Control-Allow-Origin yang telah dikonfigurasi. Anda dapat menentukan satu atau beberapa nilai, atau nama domain wildcard untuk Access-Control-Allow-Origin. Header Access-Control-Allow-Origin hanya dikembalikan ke klien jika nilai header tersebut sesuai.
DCDN mengembalikan header lintas asal, seperti Access-Control-Allow-Origin: http://example.com, ke klien.
Klien menerima respons dan browser memeriksa nilai header tersebut. Nilai header adalah http://example.com, yang menunjukkan bahwa permintaan lintas asal dari http://example.com diizinkan. Browser kemudian menampilkan respons tersebut.

Catatan penggunaan

Jika server origin adalah bucket Object Storage Service (OSS) dan CORS dikonfigurasi baik di konsol OSS maupun konsol DCDN, pengaturan CORS di konsol DCDN yang berlaku. Untuk informasi lebih lanjut tentang pengaturan CORS di konsol OSS, lihat CORS.
Header respons HTTP yang dikonfigurasi di konsol DCDN, seperti header CORS Access-Control-Allow-Origin, berlaku untuk semua jenis resource, termasuk permintaan API dinamis.

Aktifkan CORS

Masuk ke DCDN console.
Di panel navigasi sebelah kiri, klik Domain Names.
Pada halaman Domain Names, temukan nama domain yang ingin Anda kelola dan klik Configure.
Di pohon navigasi sebelah kiri halaman detail domain, klik Caching.
Klik tab Modify Outgoing Response Header, lalu klik Add untuk mengonfigurasi header respons HTTP yang ditambahkan oleh node DCDN ke respons.

Tetapkan parameter berikut untuk menentukan origin yang diizinkan untuk permintaan lintas asal, lalu klik OK.

Parameter	Deskripsi	Contoh
Operation	Anda harus menetapkan parameter ini ke Add untuk menggunakan fitur CORS.	Add
Response Header	Anda harus menetapkan parameter ini ke `Access-Control-Allow-Origin` untuk menggunakan fitur CORS.	Access-Control-Allow-Origin
Header Value	CORS dinonaktifkan: Anda hanya dapat mengonfigurasi wildcard atau satu origin tertentu. Wildcard (``): Wildcard dikonfigurasi, yang menunjukkan bahwa resource dapat diakses dari semua origin. Single specified origin: Satu origin (nama domain) ditentukan, yang menunjukkan bahwa resource hanya dapat diakses dari origin yang ditentukan tersebut. CORS diaktifkan: Anda dapat mengonfigurasi wildcard, satu origin tertentu, beberapa origin tertentu, dan nama domain wildcard.* Wildcard (``): Wildcard dikonfigurasi, yang menunjukkan bahwa resource dapat diakses dari semua origin. Single specified origin: Satu origin (nama domain) ditentukan, yang menunjukkan bahwa resource hanya dapat diakses dari origin yang ditentukan tersebut. Multiple specified origins:* Beberapa origin (nama domain) ditentukan dan dipisahkan dengan koma (`,`), yang menunjukkan bahwa resource dapat diakses dari origin dalam rentang yang ditentukan. Wildcard domain names: Nama domain wildcard dikonfigurasi, yang menunjukkan bahwa resource dapat diakses dari semua origin yang cocok dengan nama domain wildcard yang ditentukan.	`` `http://www.aliyun.com` `https://aliyun.com,http://www.aliyun.com` `http://.aliyun.com`
Allow Duplicates	Yes: Header duplikat diizinkan. Header yang dikembalikan dari server origin dan header yang ditambahkan ke respons dikembalikan ke klien. No: Header duplikat tidak diizinkan. Header yang dikembalikan dari server origin ditimpa oleh header yang ditambahkan ke respons. Penting Pengaturan Allow Duplicates dan CORS saling eksklusif. Jika Anda menetapkan Allow Duplicates ke Yes, pengaturan CORS menjadi tidak berlaku.	No
CORS	Anda dapat mengonfigurasi parameter CORS hanya jika Anda menetapkan Operation ke Add dan Response Header ke `Access-Control-Allow-Origin`. Nilai yang valid untuk CORS: Disable dan Enable. Nilai default: Disable. Disable: POP DCDN tidak memeriksa header `Origin` dalam permintaan pengguna. Dalam kasus ini, POP mengembalikan nilai `Access-Control-Allow-Origin` yang telah dikonfigurasi. Enable: POP DCDN memeriksa header `Origin` dalam permintaan pengguna dan menentukan nilai untuk header `Access-Control-Allow-Origin` berdasarkan aturan berikut: Pencocokan pola wildcard: Jika Anda menetapkan header `Access-Control-Allow-Origin` ke tanda bintang (), `Access-Control-Allow-Origin:` dikembalikan, terlepas dari apakah permintaan pengguna berisi header `Origin` atau nilai yang ditentukan untuk header `Origin`. Pencocokan eksak: Anda dapat menentukan satu atau beberapa nilai untuk header `Access-Control-Allow-Origin`. Pisahkan beberapa nilai dengan koma (`,`): Jika nilai header `Origin` dalam permintaan pengguna sesuai dengan salah satu nilai header `Access-Control-Allow-Origin`, nilai header `Access-Control-Allow-Origin` yang sesuai dikembalikan. Jika nilai header `Origin` dalam permintaan pengguna tidak sesuai dengan nilai header `Access-Control-Allow-Origin` , header `Access-Control-Allow-Origin` tidak dikembalikan. Pencocokan nama domain wildcard: Jika Anda menetapkan header `Access-Control-Allow-Origin` ke nama domain wildcard, nilai header `Origin` dicocokkan dengan nama domain wildcard tersebut. Jika Anda menetapkan parameter CORS ke Enable dan nilai yang ingin Anda tentukan untuk parameter Header Value berisi tanda hubung (`-`), Anda perlu melakukan escape tanda hubung tersebut (`-`) menjadi `%-`. Contoh: Nilai header respons asli: `http://doc.aliyun-example.com`. Nilai header respons setelah escape: `http://doc.aliyun%-example.com`.	Enable

Konfigurasikan parameter berikut untuk menentukan metode yang diizinkan untuk permintaan lintas asal, lalu klik OK.

Parameter	Deskripsi	Contoh
Operation	Anda harus menetapkan parameter ini ke Add.	Add
Response Header	Anda harus menetapkan parameter ini ke `Access-Control-Allow-Methods`.	Access-Control-Allow-Methods
Header Value	Nilai yang valid: `GET`, `POST`, dan `PUT`. Jika Anda menambahkan `GET`, `POST`, dan `PUT` secara bersamaan, pisahkan dengan koma (`,`).	`GET`
Allow Duplicates	Yes: Header duplikat diizinkan. Header yang dikembalikan dari server origin dan header yang ditambahkan ke respons dikembalikan ke klien. No: Header duplikat tidak diizinkan. Header yang dikembalikan dari server origin ditimpa oleh header yang ditambahkan ke respons.	No

Contoh konfigurasi

Contoh 1

Jika nilai header respons untuk CORS ditetapkan ke satu atau beberapa origin spesifik yang dipisahkan dengan koma (,):

Jika nilai header Origin dalam permintaan pengguna persis sesuai dengan salah satu origin yang ditentukan, POP DCDN merespons dengan header CORS yang sesuai.
Jika tidak ditemukan kecocokan eksak, header CORS tidak disertakan dalam respons.

Pada /DCDN, tetapkan: Access-Control-Allow-Origin: http://example.com,https://aliyundoc.com.

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

Contoh 2

Jika nilai header respons untuk CORS ditetapkan ke domain wildcard, POP memeriksa apakah nilai Origin dalam header permintaan sesuai dengan pola wildcard tersebut.

Pada /DCDN, tetapkan: Access-Control-Allow-Origin: http://*.aliyundoc.com.

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

Catatan

T: Bagaimana cara menggunakan curl untuk memverifikasi bahwa header Access-Control-Allow-Origin dari CDN berfungsi?

Kirim permintaan GET dengan header Origin menggunakan curl -svo /dev/null dan periksa output verbose untuk header respons. Jika header Access-Control-Allow-Origin muncul dalam respons dengan nilai yang diharapkan (misalnya, * atau domain yang Anda tentukan), konfigurasi CORS Anda berfungsi. Jika header tersebut tidak muncul, tinjau aturan header respons kustom Anda di konsol CDN dan pengaturan CORS server origin Anda.

curl -svo /dev/null https://img.anleme.cc/agent/dl1.jpg -H 'origin:https://am.anleme.cc'