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

Arsitektur aplikasi web sering kali memisahkan antarmuka depan dan backend. Oleh karena itu, aplikasi antarmuka depan, 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 ini, sehingga mencegah aplikasi antarmuka depan berfungsi dengan benar:

Anda dapat mengonfigurasi kebijakan CORS pada titik kehadiran (POP) untuk mengatasi masalah ini. Kebijakan tersebut memungkinkan browser memvalidasi respons dari http://example.org/api dan memungkinkan skrip dari http://example.com mengakses data respons tersebut. Konfigurasi ini juga memastikan bahwa hanya origin yang sah yang dapat mengakses resource Anda.

Alur kerja

CORS diimplementasikan melalui mekanisme negosiasi header HTTP antara browser dan server. Anda dapat menerapkan konfigurasi CORS pada POP ESA. Hal ini memungkinkan Anda menangani logika lintas asal sebelum permintaan mencapai server origin dan mengelola kebijakan secara terpusat di tepi jaringan ESA.

Initiate request: Aplikasi antarmuka depan di http://example.com meminta resource http://example.com/index.html.
Process at POP: POP memeriksa cache-nya untuk konten yang diminta. Jika konten tersedia di cache, POP langsung mengembalikannya. Jika tidak, POP mengambil konten dari server origin, menyimpannya di cache, lalu mengembalikannya ke klien.
Respond from POP: POP mengirimkan konten (file index.html) ke klien dengan status 200 OK.
Process at client: Klien mengeksekusi skrip dalam file HTML tersebut.
Initiate cross-origin request: Skrip 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.
Respond to cross-origin request from POP: POP mengirimkan konten ke klien dengan status 200 OK.
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: aktifkan berbagi sumber daya lintas asal

Catatan

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

Terapkan ke semua permintaan

Kasus penggunaan

Skenario ini memungkinkan semua permintaan dari situs saat ini, seperti example.com, mengakses resource dari alamat lintas asal apa pun.

Proses

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 posisi header respons menjadi ESA To Client, lalu klik Create Rule.
Di halaman Create Response Header Modification Rule, konfigurasi parameter seperti pada contoh berikut:
1. Rule Name: Masukkan nama aturan kustom, misalnya rule-cors-for-all.
2. If requests match...: Tentukan kondisi untuk mencocokkan permintaan klien. Untuk contoh ini, pilih All Requests.
3. Then execute...: Tentukan aksi untuk memodifikasi header respons. Untuk contoh ini, konfigurasi 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. Hal ini memungkinkan browser memproses respons dan menampilkan resource lintas asal tersebut.

Terapkan ke permintaan tertentu

Kasus penggunaan

Skenario ini berlaku ketika nilai header origin dalam permintaan klien merupakan subdomain dari example.com. Skema 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

Anda perlu menambahkan header CORS ke respons. Nilai header ini harus sama dengan nilai header origin dalam permintaan.

Proses

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 posisi header respons menjadi ESA To Client, lalu klik Create Rule.
Di halaman Create Response Header Modification Rule, konfigurasi parameter seperti pada contoh berikut:
1. Rule Name: Masukkan nama aturan kustom, misalnya rule-cors-origin.
2. If requests match...: Tentukan kondisi untuk mencocokkan permintaan klien. Hal ini memastikan aksi hanya dijalankan untuk permintaan yang memenuhi kriteria tertentu. Untuk contoh ini, tetapkan kondisi berikut: Header Value of origin matches regex ^https?://(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-]*[a-zA-Z0-9])?\.)+example\.com$.
3. Then execute...: Tentukan aksi untuk memodifikasi header respons. Untuk contoh ini, konfigurasi 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

Jika permintaan lintas asal dilakukan dan 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 klien. Hal ini memungkinkan browser menampilkan resource lintas asal tersebut.