Implementasikan CORS di ASM - Alibaba Cloud Service Mesh

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

Ikhtisar CORS

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

Mekanisme CORS mendukung dua jenis permintaan: permintaan sederhana dan permintaan pra-penerbangan.

Permintaan sederhana
Browser mengirimkan permintaan lintas domain dengan header Origin yang menunjukkan bahwa permintaan tersebut merupakan permintaan lintas domain. Setelah server tujuan menerima permintaan lintas domain, server menentukan apakah akan mengizinkan permintaan berdasarkan aturan CORS yang dikonfigurasikan. Sebagai tanggapan, server mengembalikan header Access-Control-Allow-Origin dan Access-Control-Allow-Methods untuk menunjukkan apakah permintaan diizinkan.
Permintaan pra-penerbangan
Browser mengirimkan permintaan pra-penerbangan, yaitu permintaan HTTP OPTIONS yang digunakan untuk memeriksa apakah server tujuan mengizinkan permintaan lintas domain dari domain saat ini. Jika server tujuan mengizinkan permintaan lintas domain dari domain saat ini, browser mengirimkan permintaan lintas domain sebenarnya.
Permintaan OPTIONS berisi header berikut: Origin, Access-Control-Request-Method, dan Access-Control-Request-Headers. Setelah server tujuan menerima permintaan OPTIONS, server 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 diizinkan. Jika permintaan pra-penerbangan diizinkan, browser mengirimkan permintaan lintas domain sebenarnya.

Jika permintaan memenuhi tiga persyaratan berikut, mekanisme CORS memproses permintaan sebagai permintaan sederhana. Jika tidak, mekanisme CORS memproses permintaan sebagai permintaan pra-penerbangan.

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

Konfigurasikan kebijakan CORS dalam layanan virtual

Browser secara otomatis mengimplementasikan komunikasi CORS. Untuk mengizinkan permintaan lintas domain yang dimulai ke layanan dan mengimplementasikan komunikasi CORS, Anda harus menyetel corsPolicy bidang dalam layanan virtual yang didefinisikan untuk layanan tersebut.

Perluas untuk melihat contoh layanan virtual

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: *     # Ekspresi reguler didukung untuk menentukan alamat asal.
      allowMethods:
      - POST
      - GET
      allowCredentials: false
      allowHeaders:
      - X-Foo-Bar
      maxAge: "24h"

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

Praktik terbaik untuk CORS

Prasyarat

Kluster ditambahkan ke instance ASM.
Namespace default dan foo dibuat, dan injeksi proxy sidecar otomatis diaktifkan untuk namespace tersebut. Untuk informasi lebih lanjut, lihat Kelola namespace global.

Langkah 1: Menyebarkan aplikasi

Sebarkan 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 file tersebut:

Perluas untuk melihat file details.yaml

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 menyebarkan aplikasi details di namespace default:
```
kubectl apply -f details.yaml -n default
```

Sebarkan aplikasi frontend.

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

Perluas untuk melihat file istio-cors-demo.yaml

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 menyebarkan aplikasi istio-cors-demo di namespace foo:
```
kubectl apply -f istio-cors-demo.yaml -n foo 
```

Langkah 2: Menyebarkan gateway ingress

Masuk ke Konsol ASM. Di panel navigasi kiri, pilih Service Mesh > Mesh Management.
Di halaman Mesh Management, klik nama instance ASM. Di panel navigasi kiri, pilih ASM Gateways > Ingress Gateway.
Di halaman Ingress Gateway, klik Create.
Di halaman Create, setel parameter Name menjadi ingressgateway. Pilih kluster tempat Anda ingin menyebarkan gateway ingress dari daftar drop-down Cluster. Pilih Internet Access untuk CLB Instance Type. Pilih tipe instansi Classic Load Balancer (CLB) di bawah Create a CLB Instance. Pertahankan nilai default untuk parameter lainnya dan klik Create.
Ulangi Langkah 3 dan Langkah 4 untuk membuat gateway ingress 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. Di halaman Mesh Management, klik nama instance ASM. Di panel navigasi kiri, pilih ASM Gateways > Gateway.
  3. Di halaman Gateway, klik Create from YAML.
  4. Di halaman Create, pilih default dari daftar drop-down Namespace, pilih template dari daftar drop-down Template, ganti konten di editor kode YAML dengan konten berikut, lalu 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 halaman detail instance ASM, pilih Traffic Management Center > VirtualService di panel navigasi kiri. Di halaman VirtualService, klik Create from YAML.
  2. Di halaman Create, pilih default dari daftar drop-down Namespace, pilih template dari daftar drop-down Template, ganti konten di editor kode YAML dengan konten berikut, lalu 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 gateway ingress.
  2. Di bilah alamat browser Anda, masukkan http://<alamat IP gateway ingressgateway>/details/2.
    Jika pesan pada gambar di atas dikembalikan, itu 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 halaman detail instance ASM, pilih ASM Gateways > Gateway di panel navigasi kiri. Di halaman Gateway, klik Create from YAML.
  2. Di halaman Create, pilih foo dari daftar drop-down Namespace, pilih template dari daftar drop-down Template, ganti konten di editor kode YAML dengan konten berikut, lalu 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 halaman detail instance ASM, pilih Traffic Management Center > VirtualService di panel navigasi kiri. Di halaman VirtualService, klik Create from YAML.
  2. Di halaman Create, pilih foo dari daftar drop-down Namespace, pilih template dari daftar drop-down Template, ganti konten di editor kode YAML dengan konten berikut, lalu 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.
1. Dapatkan alamat IP gateway ingressgateway2. Untuk informasi lebih lanjut, lihat Buat gateway ingress.
2. Di bilah alamat Google Chrome, masukkan http://<alamat IP gateway ingressgateway2>.
3. Di bidang URL, masukkan http://<alamat IP gateway ingressgateway>/details/2 dan klik Send.
4. Di pojok kanan atas Google Chrome, klik ikon dan pilih More tools > Developer tools.
  Pesan kesalahan di atas menunjukkan bahwa permintaan gagal. Hal ini karena aplikasi frontend istio-cors-demo mengirimkan permintaan lintas domain untuk mengakses aplikasi backend details.

Langkah 4: Konfigurasikan kebijakan CORS

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

Di kotak dialog Edit, tambahkan konten berikut ke bidang http dan klik OK.

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

Langkah 5: Verifikasi bahwa kebijakan CORS berlaku

Di bilah alamat Google Chrome, masukkan http://<alamat IP gateway ingressgateway2>.
Di bidang URL, masukkan http://<alamat IP gateway ingressgateway>/details/2 dan klik Send.
Jika pesan pada gambar di atas dikembalikan, aplikasi frontend istio-cors-demo berhasil mengakses aplikasi backend details. Ini menunjukkan bahwa kebijakan CORS berlaku.