Wawasan Mendalam tentang Solusi Cross-Origin APISIX

January 27, 2024

Technology

Dalam pengembangan aplikasi web, masalah lintas asal (cross-origin) telah menjadi topik yang populer. Namun, dengan adopsi luas dari gateway API, kita sekarang memiliki solusi yang lebih nyaman dan efisien untuk mengatasi masalah lintas asal. Gateway API, sebagai komponen kunci dalam arsitektur aplikasi, tidak hanya menyediakan fungsionalitas seperti perutean permintaan dan manajemen API, tetapi juga secara efektif menangani permintaan lintas asal, membantu pengembang melewati batasan kebijakan same-origin dari browser. Artikel ini akan membahas lebih dalam tentang bagaimana menggunakan gateway API APISIX untuk menyelesaikan masalah lintas asal.

Apa Itu Lintas Asal?

Masalah lintas asal terutama muncul dari kebijakan same-origin yang diberlakukan oleh browser. Kebijakan same-origin mengharuskan bahwa sumber (protokol, domain, port) dari suatu permintaan harus persis sama dengan sumber daya target; jika tidak, browser akan memblokir permintaan tersebut. Kebijakan ini bertujuan untuk melindungi keamanan informasi pengguna dan mencegah situs web jahat mencuri data. Namun, dalam pengembangan praktis, skenario seperti pemisahan frontend-backend atau penyebaran dengan domain atau port yang berbeda sering kali menyebabkan masalah lintas asal.

Menyelesaikan Masalah Lintas Asal Menggunakan APISIX

CORS (Cross-Origin Resource Sharing)

CORS (Cross-Origin Resource Sharing) adalah standar W3C yang memungkinkan browser untuk mengirim permintaan ke server lintas asal, mengatasi batasan yang diberlakukan oleh kebijakan same-origin. Di APISIX, pengembang dapat dengan mudah mengonfigurasi aturan CORS menggunakan plugin CORS, menentukan sumber mana yang diizinkan untuk mengakses sumber daya.

Contoh perintah menggunakan curl untuk mengonfigurasi CORS di APISIX:

curl http://127.0.0.1:9180/apisix/admin/routes/1 -H 'X-API-KEY: edd1c9f034335f136f87ad84b625c8f1' -X PUT -d ' { "uri": "/hello", "plugins": { "cors": {} }, "upstream": { "type": "roundrobin", "nodes": { "127.0.0.1:8080": 1 } } }'

Perintah ini menggunakan curl untuk mengirim permintaan PUT ke Admin API dari APISIX, membuat rute dengan ID 1. Rute dikonfigurasi dengan jalur URI /hello, dan konfigurasi default mengaktifkan plugin CORS. Selain itu, server upstream ditentukan sebagai 127.0.0.1:8080.

Menjalankan permintaan tes akan mendapatkan hasil konfigurasi default:

curl http://127.0.0.1:9080/hello -v

...
< Server: APISIX web server
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: *
< Access-Control-Allow-Headers: *
< Access-Control-Expose-Headers: *
< Access-Control-Max-Age: 5
...

Jika penyesuaian kebijakan CORS diperlukan, cukup modifikasi konfigurasi plugin yang relevan. Berikut adalah beberapa opsi konfigurasi yang umum digunakan:

  • allow_origins: Menentukan asal yang diizinkan untuk akses lintas asal. Ini bisa berupa URL tertentu atau menggunakan wildcard '*' untuk mengizinkan semua asal. Beberapa nilai dipisahkan oleh koma.

  • allow_methods: Menentukan metode HTTP yang diizinkan untuk akses lintas asal, seperti GET, POST, dll. Beberapa nilai dipisahkan oleh koma.

  • allow_headers: Mengizinkan bidang header kustom untuk dibawa dalam permintaan lintas asal. Beberapa nilai dipisahkan oleh koma.

  • expose_headers: Menentukan bidang header kustom yang akan diekspos dalam respons lintas asal. Beberapa nilai dipisahkan oleh koma.

  • max_age: Menetapkan waktu maksimum untuk browser menyimpan respons CORS.

  • allow_credentials: Menentukan apakah mengizinkan membawa kredensial (seperti Cookies) dalam permintaan lintas asal.

CORS

Poin yang Perlu Diperhatikan

Perhatian khusus harus diberikan pada fakta bahwa meskipun CORS mudah digunakan, mengaktifkannya dapat menyebabkan masalah keamanan. Ini terutama karena CORS melonggarkan batasan yang diberlakukan oleh kebijakan same-origin, mengizinkan permintaan dari asal yang berbeda untuk mengakses sumber daya.

Dalam konteks ini, mari fokus pada allow_credentials. allow_credentials adalah item konfigurasi penting dalam CORS, menentukan apakah permintaan lintas asal diizinkan untuk membawa informasi autentikasi. Ini termasuk, tetapi tidak terbatas pada data sensitif, termasuk cookies, informasi autentikasi HTTP, atau sertifikat SSL klien.

Secara default, allow_credentials dinonaktifkan, artinya tidak mengizinkan membawa informasi autentikasi. Namun, jika CORS diaktifkan, dan mengizinkan membawa informasi autentikasi (allow_credentials: true), kehati-hatian ekstra diperlukan. Ini berarti permintaan dari asal lain juga dapat mengakses sumber daya yang dilindungi, berpotensi menjalankan operasi sensitif. Misalnya, situs web jahat yang memanfaatkan kerentanan konfigurasi ini mungkin dapat memicu pengguna untuk memulai permintaan lintas asal, menyebabkan pencurian cookie sesi mereka atau tindakan yang tidak sah.

Untuk meminimalkan potensi masalah keamanan saat mengaktifkan permintaan lintas asal, disarankan untuk mengikuti praktik terbaik berikut:

  1. Hati-hati mengonfigurasi allow_origin: Hindari mengatur allow_origin ke * (mengizinkan semua sumber) secara sembarangan. Sebaliknya, tentukan secara eksplisit sumber yang diizinkan.
  2. Batasi allow_credentials: Aktifkan allow_credentials hanya jika diperlukan dan batasi ke sumber yang tepercaya.
  3. Gunakan protokol transportasi yang aman: Pastikan permintaan CORS dikirim melalui HTTPS untuk mencegah serangan man-in-the-middle.
  4. Validasi dan otorisasi: Di server backend, terapkan pemeriksaan validasi dan otorisasi yang tepat untuk permintaan lintas asal, memastikan hanya pengguna yang berwenang yang dapat mengakses sumber daya sensitif.
  5. Hindari menggunakan metode HTTP yang tidak aman: Batasi metode HTTP yang digunakan dalam permintaan lintas asal, hanya mengizinkan metode yang aman seperti GET dan POST, sementara menonaktifkan metode yang berpotensi berisiko seperti PUT dan DELETE, yang dapat menimbulkan risiko keamanan.

Reverse Proxy

Selain menggunakan CORS, APISIX dapat secara tidak langsung mengatasi masalah lintas asal dengan mengonfigurasi dirinya sebagai reverse proxy. Reverse proxy adalah pola arsitektur server umum di mana server reverse proxy bertindak sebagai perantara antara klien dan server target. Ketika klien memulai permintaan, permintaan ini pertama-tama dikirim ke server reverse proxy, yang kemudian meneruskannya ke server target yang sebenarnya. Setelah pemrosesan selesai, respons dari server target dikembalikan ke reverse proxy, yang akhirnya diteruskan kembali ke klien.

Reverse Proxy

Penting untuk dipahami bahwa reverse proxy itu sendiri tidak secara langsung menyelesaikan masalah lintas asal tetapi dengan cerdas melewati batasan kebijakan same-origin dari browser. Ketika klien perlu membuat permintaan lintas asal, sebenarnya permintaan tersebut dikirim ke server reverse proxy alih-alih langsung ke server target. Karena server reverse proxy dan server target biasanya berada dalam lingkungan jaringan atau konfigurasi yang sama, komunikasi mereka tidak tunduk pada batasan kebijakan same-origin. Ini memungkinkan server reverse proxy untuk dengan bebas meneruskan permintaan klien ke server target dan mengembalikan respons ke klien, secara tidak langsung mencapai tujuan akses lintas asal.

Karena APISIX berfungsi sebagai gateway API, secara alami posisinya ditempatkan antara klien dan server. Oleh karena itu, dalam aplikasi skala kecil, menyebarkan aplikasi klien dan APISIX dalam domain yang sama dan mengubah alamat permintaan klien ke alamat layanan APISIX memastikan akses klien ke APISIX berjalan lancar. Ini dapat memanfaatkan fungsionalitas reverse proxy untuk menyediakan akses lintas asal untuk klien. Selain itu, plugin lain dapat digabungkan untuk memastikan keamanan dan keandalan seluruh proses komunikasi.

Kesimpulan

Dalam artikel ini, kita telah menjelajahi cara menggunakan APISIX untuk mengatasi masalah lintas asal, dengan fokus pada dua metode: CORS dan reverse proxy. Dengan mengonfigurasi plugin CORS dengan tepat, kita dapat melonggarkan batasan kebijakan same-origin yang diberlakukan oleh browser, mengizinkan permintaan lintas asal untuk mengakses sumber daya. Di sisi lain, reverse proxy bertindak sebagai perantara, melewati kebijakan same-origin dari browser dan memfasilitasi akses lintas asal. Setiap metode memiliki kelebihannya sendiri, dan pemilihan solusi yang tepat tergantung pada kebutuhan spesifik. Baik menggunakan CORS atau reverse proxy, APISIX menawarkan fungsionalitas yang fleksibel dan kuat, membantu pengembang menyelesaikan masalah lintas asal dengan mulus dan memastikan operasi normal dan pengalaman pengguna aplikasi.

Tags:
APISIX Basics
CORS