cara mengonfigurasi berbagi sumber daya lintas asal - Edge Security Acceleration

Anda dapat mengonfigurasi header respons HTTP di Edge Security Acceleration (ESA) untuk mengaktifkan berbagi sumber daya lintas asal (CORS) pada situs web Anda. Hal ini memungkinkan browser memuat dan mengakses resource dari origin yang berbeda secara aman.

Mengapa mengonfigurasi berbagi sumber daya lintas asal

Aplikasi web sering kali memiliki arsitektur frontend dan backend yang terpisah. Aplikasi frontend, seperti http://example.com, perlu mengambil data dari API backend, seperti http://example.org/api. Secara default, kebijakan asal sama (same-origin policy) pada browser memblokir permintaan HTTP lintas asal tersebut, sehingga mencegah aplikasi frontend berfungsi dengan benar.

Mengonfigurasi kebijakan CORS pada titik kehadiran (POP) menyelesaikan masalah akses lintas domain ini. Kebijakan tersebut memungkinkan browser memvalidasi respons dari http://example.org/api dan memungkinkan skrip dari http://example.com mengakses data respons tersebut. Selain itu, kebijakan ini juga memastikan hanya origin yang berwenang yang dapat mengakses resource Anda.

Ikhtisar solusi

CORS diimplementasikan melalui mekanisme negosiasi Header HTTP antara browser dan server. Men-deploy konfigurasi CORS pada POP ESA menangani logika lintas asal sebelum permintaan mencapai origin server, sehingga menyediakan manajemen kebijakan terpadu di tepi jaringan ESA.

Initiate request: Aplikasi frontend di http://example.com meminta resource http://example.com/index.html.
Process at POP: POP ESA memeriksa cache-nya untuk konten yang diminta. Jika konten tersebut tersedia di cache, POP langsung mengembalikannya. Jika tidak, POP mengambil konten tersebut dari origin server, menyimpannya di cache, lalu mengembalikannya.
Respond from POP: POP mengirimkan konten yang diminta (file index.html) ke client dengan status 200 OK.
Process at client: Client mengeksekusi skrip dalam file HTML tersebut.
Initiate cross-origin request: Skrip client mengirim permintaan lintas asal, GET http://example.org/api, yang menyertakan header permintaan Origin:http://example.com.
Process cross-origin request at POP: POP memeriksa apakah permintaan tersebut sesuai dengan kondisi aturan. Misalnya, POP memeriksa apakah nilai header Origin adalah http://example.com. Jika kondisi terpenuhi, POP menambahkan header CORS Access-Control-Allow-Origin:http://example.com ke respons.
POP response to a cross-origin request: POP mengembalikan 200 OK untuk permintaan lintas asal tersebut.
Process cross-origin request at client: Browser memeriksa apakah header Access-Control-Allow-Origin dalam respons sesuai dengan origin halaman saat ini (http://example.com). Jika sesuai, browser memproses respons dan menampilkan kontennya.

Contoh konfigurasi

Catatan

Jika Anda menggunakan OSS sebagai origin server dan mengonfigurasi CORS baik di konsol OSS maupun ESA, konfigurasi ESA akan menimpa pengaturan CORS OSS.

Terapkan ke semua permintaan

Kasus penggunaan

Kasus penggunaan ini memungkinkan semua permintaan dari situs saat ini, seperti example.com, mengakses resource dari origin mana pun.

Langkah-langkah

Di konsol ESA, pilih Websites. Di kolom Website, klik situs target.
Di panel navigasi sebelah kiri, pilih Rules > Transform Rules. Di halaman Transform Rules, klik tab Modify Response Header. Atur Response Header Position menjadi ESA to Client, lalu klik tombol Create Rule.
Di halaman Create Response Header Modification Rule, konfigurasikan parameter sebagai berikut:
1. Rule Name: Masukkan nama aturan kustom, misalnya rule-cors-for-all.
2. If requests match...: Tetapkan kondisi aturan untuk memfilter permintaan client. Untuk contoh ini, pilih All Requests.
3. Then execute...: Tetapkan aksi untuk memodifikasi header respons. Untuk contoh ini, konfigurasikan parameter berikut:
  - Type: Pilih Static.
  - Operation: Pilih Add.
  - Response Header Name: Masukkan Access-Control-Allow-Origin.
  - Response Header Value: Masukkan *.

Hasil

Untuk setiap permintaan lintas asal, ESA menambahkan header Access-Control-Allow-Origin: * ke respons. Browser kemudian dapat memproses respons dan menampilkan resource lintas asal tersebut.

Terapkan ke permintaan tertentu

Kasus penggunaan

Kasus penggunaan ini berlaku ketika nilai header origin dalam permintaan client merupakan subdomain dari example.com. Konfigurasi ini mendukung protokol HTTP maupun HTTPS. Sebagai contoh, akses lintas asal diizinkan untuk origin berikut:

origin:http://www.example.com
origin:https://www.example.com
origin:http://image.example.com
origin:https://image.example.com

Tambahkan header CORS ke respons. Nilai header respons CORS harus sama dengan nilai header origin dalam permintaan.

Langkah-langkah konfigurasi

Di konsol ESA, pilih Websites. Di kolom Website, klik situs target.
Di panel navigasi sebelah kiri, pilih Rules > Transform Rules. Di halaman Transform Rules, klik tab Modify Response Header. Atur Response Header Position menjadi ESA to Client, lalu klik tombol Create Rule.
Di halaman Create Response Header Modification Rule, konfigurasikan parameter sebagai berikut:
1. Rule Name: Masukkan nama aturan kustom, misalnya rule-cors-origin.
2. If requests match...: Tetapkan kondisi aturan untuk memfilter permintaan client. Hal ini memastikan aksi hanya dieksekusi untuk permintaan yang memenuhi kriteria tertentu. Untuk contoh ini, tetapkan kondisi menjadi Header Value of origin matches regex ^https?://(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-]*[a-zA-Z0-9])?\.)+example\.com$.
  Anda juga dapat langsung mengedit ekspresi sebagai berikut: (http.request.headers["origin"] matches "^https?://(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-]*[a-zA-Z0-9])?\.)+example\.com$")
  Catatan
  Jika paket Anda tidak mendukung pencocokan dengan ekspresi reguler, gunakan operator is in dan cantumkan daftar nilai header origin yang diizinkan.
  Anda juga dapat langsung mengedit ekspresi sebagai berikut: (http.request.headers["origin"] in {"http://www.example.com" "https://www.example.com" "http://image.example.com" "https://image.example.com"})
3. Then execute...: Tetapkan aksi untuk memodifikasi header respons. Untuk contoh ini, konfigurasikan parameter berikut:
  - Type: Pilih Dynamic.
  - Operation: Pilih Add.
  - Response Header Name: Masukkan Access-Control-Allow-Origin.
  - Response Header Value: Masukkan http.request.headers["origin"].

Hasil

Ketika permintaan lintas asal dilakukan, jika header origin dalam permintaan sesuai dengan aturan, ESA menambahkan header Access-Control-Allow-Origin ke respons. Nilai header ini sama dengan nilai header Origin dari permintaan client. Browser kemudian dapat memproses respons dan menampilkan resource lintas asal tersebut.