Configure a CORS policy in a VirtualService to allow cross-origin requests - Alibaba Cloud Service Mesh - Alibaba Cloud - Alibaba Cloud Service Mesh

Ketika klien dari satu domain mengakses layanan di domain berbeda atau di domain yang sama tetapi menggunakan port berbeda, klien memulai permintaan lintas asal. Jika layanan tersebut tidak mengizinkan akses sumber daya lintas asal, klien tidak dapat mengakses layanan tersebut. Dalam kasus ini, Anda dapat mengimplementasikan Berbagi Sumber Daya Lintas Asal (CORS) agar server aplikasi web mendukung akses lintas asal. Topik ini menjelaskan cara mengonfigurasi kebijakan CORS dalam layanan virtual Service Mesh (ASM) untuk mengimplementasikan CORS.

Ikhtisar CORS

Demi alasan keamanan, browser membatasi permintaan HTTP lintas asal yang dimulai dari skrip. Untuk memenuhi kebutuhan akses sumber daya lintas asal, ASM memungkinkan Anda mengimplementasikan CORS. CORS adalah mekanisme berbasis Header HTTP yang memungkinkan server mengidentifikasi domain, protokol, atau port selain miliknya sendiri dari mana browser mengizinkan pemuatan sumber daya.

Mekanisme CORS mendukung dua jenis permintaan: simple requests dan preflight requests.

Simple requests
Browser mengirim permintaan lintas asal dengan header Origin yang menunjukkan bahwa permintaan tersebut merupakan permintaan lintas asal. Setelah menerima permintaan tersebut, server tujuan menentukan apakah akan mengizinkannya berdasarkan aturan CORS yang dikonfigurasi. Sebagai respons, server mengembalikan header Access-Control-Allow-Origin dan Access-Control-Allow-Methods untuk menunjukkan apakah permintaan diizinkan.
Preflight requests
Browser mengirim permintaan preflight berupa permintaan HTTP OPTIONS untuk memeriksa apakah server tujuan mengizinkan permintaan lintas asal dari domain saat ini. Jika diizinkan, browser kemudian mengirim permintaan lintas asal yang sebenarnya.
Permintaan OPTIONS mencakup header Origin, Access-Control-Request-Method, dan Access-Control-Request-Headers. Setelah menerima permintaan OPTIONS, server tujuan menentukan header Access-Control-Allow-Origin, Access-Control-Allow-Method, Access-Control-Allow-Headers, dan Access-Control-Max-Age dalam respons untuk menunjukkan apakah permintaan tersebut diizinkan. Jika permintaan preflight diizinkan, browser mengirim permintaan lintas asal yang sebenarnya.

Jika permintaan memenuhi ketiga persyaratan berikut, mekanisme CORS memprosesnya sebagai simple request. Jika tidak, permintaan tersebut diproses sebagai preflight request.

Permintaan menggunakan salah satu metode berikut:
GET, HEAD, dan POST
Header Content-Type dalam permintaan diatur ke salah satu nilai berikut:
text/plain, application/x-www-form-urlencoded, dan multipart/form-data
Permintaan hanya menggunakan header yang termasuk dalam daftar aman CORS yang didefinisikan oleh Fetch standard:
Accept, Accept-Language, Content-Language, dan Content-Type. Perhatikan bahwa nilai header Content-Type harus sesuai dengan salah satu nilai yang tercantum dalam persyaratan kedua.

Konfigurasikan kebijakan CORS dalam layanan virtual

Browser secara otomatis mengimplementasikan komunikasi CORS. Untuk mengizinkan permintaan lintas asal yang ditujukan ke layanan dan mengaktifkan komunikasi CORS, Anda harus mengatur bidang corsPolicy dalam layanan virtual yang didefinisikan untuk layanan tersebut.

Expand to view the virtual service example

apiVersion: networking.istio.io/v1alpha3
kind: VirtualService
metadata:
  name: ratings-route
spec:
  hosts:
  - ratings.prod.svc.cluster.local
  http:
  - route:
    - destination:
        host: ratings.prod.svc.cluster.local
        subset: v1
    corsPolicy:
      allowOrigins:
      - exact: https://example.com
      - regex: *     # Regular expressions are supported to specify the addresses of the origins. 
      allowMethods:
      - POST
      - GET
      allowCredentials: false
      allowHeaders:
      - X-Foo-Bar
      maxAge: "24h"

Parameter	Description
allowOrigins	Alamat origin yang diizinkan untuk mengakses layanan. Ekspresi reguler didukung. Untuk permintaan tanpa kredensial, server dapat mengatur parameter ini ke wildcard (*) sehingga semua origin diizinkan mengakses layanan.
allowMethods	Metode HTTP yang dapat digunakan untuk memulai permintaan lintas asal.
allowHeaders	Header yang dapat digunakan selama permintaan lintas asal yang sebenarnya. Header yang ditentukan diserialisasi ke header Access-Control-Allow-Headers yang digunakan dalam respons terhadap permintaan preflight.
exposeHeaders	Header yang diizinkan server agar dapat diakses oleh browser.
maxAge	Durasi maksimum waktu yang dapat digunakan browser untuk menyimpan cache respons terhadap permintaan preflight.
allowCredentials	Menentukan apakah permintaan lintas asal dapat dilakukan dengan kredensial. Hanya kredensial yang valid yang dapat digunakan untuk mengirim permintaan lintas asal.

Praktik terbaik untuk CORS

Prasyarat

Kluster telah ditambahkan ke instans ASM.
Anda telah membuat namespace default dan foo, serta mengaktifkan injeksi proxy sidecar otomatis untuk keduanya. Untuk informasi lebih lanjut, lihat Kelola namespace global.

Langkah 1: Deploy aplikasi

Deploy aplikasi backend.

Dapatkan file kubeconfig kluster dan gunakan kubectl untuk terhubung ke kluster. Untuk informasi lebih lanjut, lihat Dapatkan file kubeconfig kluster dan gunakan kubectl untuk terhubung ke kluster.

Buat file bernama details.yaml dan tambahkan konten berikut ke dalam file tersebut:

Expand to view the details.yaml file

apiVersion: v1
kind: Service
metadata:
  name: details
  labels:
    app: details
    service: details
spec:
  ports:
  - port: 9080
    name: http
  selector:
    app: details
---
apiVersion: v1
kind: ServiceAccount
metadata:
  name: bookinfo-details
  labels:
    account: details
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: details-v1
  labels:
    app: details
    version: v1
spec:
  replicas: 1
  selector:
    matchLabels:
      app: details
      version: v1
  template:
    metadata:
      labels:
        app: details
        version: v1
    spec:
      serviceAccountName: bookinfo-details
      containers:
      - name: details
        image: docker.io/istio/examples-bookinfo-details-v1:1.16.4
        imagePullPolicy: IfNotPresent
        ports:
        - containerPort: 9080
        securityContext:
          runAsUser: 1000

Jalankan perintah berikut untuk deploy aplikasi details di namespace default:
```
kubectl apply -f details.yaml -n default
```

Deploy aplikasi frontend.

Buat file bernama istio-cors-demo.yaml dan tambahkan konten berikut ke dalam file tersebut:

Expand to view the istio-cors-demo.yaml file

apiVersion: v1
kind: ServiceAccount
metadata:
  name: istio-cors-demo
---
apiVersion: v1
kind: Service
metadata:
  name: istio-cors-demo
  labels:
    app: istio-cors-demo
    service: istio-cors-demo
spec:
  ports:
    - name: http
      port: 8000
      targetPort: 80
  selector:
    app: istio-cors-demo
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: istio-cors-demo
spec:
  replicas: 1
  selector:
    matchLabels:
      app: istio-cors-demo
      version: v1
  template:
    metadata:
      labels:
        app: istio-cors-demo
        version: v1
    spec:
      serviceAccountName: istio-cors-demo
      containers:
        - image: registry.cn-hangzhou.aliyuncs.com/build-test/istio-cors-demo:v1.0-g8e215f6-aliyun
          imagePullPolicy: IfNotPresent
          name: istio-cors-demo
          ports:
            - containerPort: 80

Jalankan perintah berikut untuk deploy aplikasi istio-cors-demo di namespace foo:
```
kubectl apply -f istio-cors-demo.yaml -n foo 
```

Langkah 2: Deploy gerbang masuk

Masuk ke Konsol ASM. Di panel navigasi kiri, pilih Service Mesh > Mesh Management.
Pada halaman Mesh Management, klik nama instans ASM. Di panel navigasi kiri, pilih ASM Gateways > Ingress Gateway.
Pada halaman Ingress Gateway, klik Create.
Pada halaman Create, atur Name menjadi ingressgateway, pilih Cluster tempat deployment dilakukan, dan atur CLB instance type menjadi Internet Access. Di bawah New CLB, pilih spesifikasi untuk instans Classic Load Balancer (CLB). Gunakan nilai default untuk parameter lainnya dan klik Create.
Ulangi Langkah 3 dan Langkah 4 untuk membuat gerbang masuk bernama ingressgateway2.

Langkah 3: Buat aturan routing

Buat aturan routing untuk aplikasi backend.
1. Buat gateway Istio dan asosiasikan aplikasi details dengan gateway ingressgateway.
  1. Masuk ke Konsol ASM. Di panel navigasi kiri, pilih Service Mesh > Mesh Management.
  2. Pada halaman Mesh Management, klik nama instans ASM. Di panel navigasi kiri, pilih ASM Gateways > Gateway.
  3. Pada halaman Gateway, klik Create from YAML.
  4. Pada halaman Create, atur Namespaces menjadi default. Pilih Scenario Template apa pun. Ganti konten di editor YAML dengan konfigurasi berikut dan klik Create.
```
apiVersion: networking.istio.io/v1beta1
kind: Gateway
metadata:
  name: bookinfo-gateway
  namespace: default
spec:
  selector:
    istio: ingressgateway
  servers:
    - hosts:
        - '*'
      port:
        name: http
        number: 80
        protocol: HTTP
                                   
```
2. Buat layanan virtual.
  1. Di panel navigasi kiri halaman detail mesh, pilih Traffic Management Center > VirtualService. Pada halaman yang muncul, klik Create from YAML.
  2. Pada halaman Create, atur Namespaces menjadi default. Pilih Scenario Template apa pun. Ganti konten di editor YAML dengan konfigurasi berikut dan klik Create.
```
apiVersion: networking.istio.io/v1beta1
kind: VirtualService
metadata:
  name: bookinfo
  namespace: default
spec:
  gateways:
    - bookinfo-gateway
  hosts:
    - '*'
  http:
    - match:
        - uri:
            prefix: /details
      route:
        - destination:
            host: details
            port:
              number: 9080
                                        
```
3. Akses aplikasi backend.
  1. Dapatkan alamat IP gateway ingressgateway. Untuk informasi lebih lanjut, lihat Buat gerbang masuk.
  2. Di bilah alamat browser Anda, masukkan http://<alamat IP gateway ingressgateway>/details/2.
```
{"id":2,"author":"William Shakespeare","year":1595,"type":"paperback","pages":200,"publisher":"PublisherA","language":"English","ISBN-10":"1234567890","ISBN-13":"123-1234567890"}
```
    Jika pesan pada gambar sebelumnya dikembalikan, hal ini menunjukkan bahwa permintaan ke aplikasi backend details berhasil.
Buat aturan routing untuk aplikasi frontend.
1. Buat gateway Istio.
  Buat gateway Istio dan asosiasikan aplikasi istio-cors-demo dengan gateway ingressgateway2.
  1. Di panel navigasi kiri halaman detail mesh, pilih ASM Gateways > Gateway. Pada halaman Gateway, klik Create from YAML.
  2. Pada halaman Create, atur Namespaces menjadi foo. Pilih Scenario Template apa pun. Ganti konten di editor YAML dengan konfigurasi berikut dan klik Create.
```
apiVersion: networking.istio.io/v1beta1
kind: Gateway
metadata:
  name: istio-cors-demo-gateway
  namespace: foo
spec:
  selector:
    istio: ingressgateway2
  servers:
    - hosts:
        - '*'
      port:
        name: http
        number: 80
        protocol: HTTP
```
2. Buat layanan virtual.
  1. Di panel navigasi kiri, pilih Traffic Management Center > VirtualService. Pada halaman VirtualService, klik Create from YAML.
  2. Pada halaman Create, atur Namespaces menjadi foo. Pilih Scenario Template apa pun. Ganti konten di editor YAML dengan konfigurasi berikut dan klik Create.
```
apiVersion: networking.istio.io/v1beta1
kind: VirtualService
metadata:
  name: istio-cors-demo
  namespace: foo
spec:
  gateways:
    - istio-cors-demo-gateway
  hosts:
    - '*'
  http:
    - route:
        - destination:
            host: istio-cors-demo
            port:
              number: 8000
```

Akses aplikasi backend menggunakan aplikasi frontend.

Dapatkan alamat IP gateway ingressgateway2. Untuk informasi lebih lanjut, lihat Buat gerbang masuk.
Di bilah alamat Google Chrome, masukkan http://<alamat IP gateway ingressgateway2>.
Di kotak teks URL, masukkan http://<alamat IP gateway ingressgateway>/details/2 dan klik Send.

Di pojok kanan atas Google Chrome, klik ikon dan pilih More tools > Developer tools.

Access to XMLHttpRequest at 'http://47.111.xxx/details/2' from origin 'http://116.62.xxx' has been
blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Failed to load resource: net::ERR_FAILED
Access to XMLHttpRequest at 'http://47.111.xxx/details/2' from origin 'http://116.62.xxx' has been
blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Failed to load resource: net::ERR_FAILED
Access to XMLHttpRequest at 'http://47.111.xxx/details/2' from origin 'http://116.62.xxx' has been
blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Failed to load resource: net::ERR_FAILED
DevTools failed to load source map: Could not load content for https://unpkg.com/axios/dist/axios.min.map: HTTP error: status code 404,
net::ERR_HTTP_RESPONSE_CODE_FAILURE

Pesan kesalahan di atas menunjukkan bahwa permintaan gagal karena aplikasi frontend istio-cors-demo mengirim permintaan lintas asal untuk mengakses aplikasi backend details.

Langkah 4: Konfigurasikan kebijakan CORS

Masuk ke Konsol ASM. Di panel navigasi kiri, pilih Service Mesh > Mesh Management.
Pada halaman Mesh Management, klik nama instans ASM. Di panel navigasi kiri, pilih Traffic Management Center > VirtualService.
Pada halaman VirtualService, temukan layanan virtual bookinfo dan klik View YAML di kolom Actions.

Di dialog Edit, tambahkan konfigurasi corsPolicy berikut di bawah parameter http dan klik OK.

- corsPolicy:
    allowCredentials: false
    allowMethods:
      - POST
      - GET
    allowOrigins:
      - prefix: 'http://<alamat IP gateway ingressgateway2>'
    maxAge: 24h

# Final YAML after adding the corsPolicy
http:
    - match:
      - uri:
          prefix: /details
      route:
      - destination:
          host: details
          port:
            number: 9080
      corsPolicy:
        allowCredentials: false
        allowMethods:
          - POST
          - GET
        allowOrigins:
          - prefix: 'http://<alamat IP gateway ingressgateway2>' # Use the IP of your ingressgateway2 gateway.
        maxAge: 24h

Langkah 5: Verifikasi bahwa kebijakan CORS berlaku

Di bilah alamat Google Chrome, masukkan http://<alamat IP gateway ingressgateway2>.
Di kotak teks URL, masukkan http://<alamat IP gateway ingressgateway>/details/2 dan klik Send.
```
success
{"id":2,"author":"William Shakespeare","year":1595,"type":"paperback","pages":200,"publisher":"PublisherA","language":"English","ISBN-10":"1234567890","ISBN-13":"123-1234567890"}
```
Jika pesan pada gambar sebelumnya dikembalikan, aplikasi frontend istio-cors-demo berhasil mengakses aplikasi backend details. Hal ini menunjukkan bahwa kebijakan CORS berlaku.