Blogger Jateng
Home / Tutorial

CORS dalam Aplikasi Halaman Tunggal (SPA): Pertimbangan Utama

Aplikasi Halaman Tunggal (SPA) telah merevolusi pengembangan web dengan memberikan pengalaman pengguna yang cepat dan mulus. Namun, dengan kemunculannya, muncul pula kebutuhan untuk mengelola pembagian sumber daya lintas-asal (CORS) untuk memungkinkan komunikasi yang aman dan fungsional antara layanan frontend dan backend. Memahami CORS dan implikasinya sangat penting bagi pengembang yang bekerja dengan SPA untuk memastikan keamanan dan kegunaan.

Apa yang dimaksud dengan CORS?

Browser menyimpan beberapa langkah keamanan untuk menghindari permintaan asal silang yang tidak terduga, yang dikenal sebagai fitur keamanan CORS. Permintaan Lintas Asal Kapan pun domain halaman yang berisi berbeda dengan domain sumber daya yang ingin diakses, kami menyebut permintaan tersebut sebagai `permintaan lintas asal. Misalnya, jika SPA Anda dihosting di https://myapp.com dan mengambil sumber daya dari https://api.external.com, maka itu adalah permintaan lintas asal. Tanpa penanganan CORS yang tepat, browser akan memblokir permintaan tersebut untuk melindungi pengguna dari potensi ancaman keamanan seperti pemalsuan permintaan lintas situs (CSRF).

Untuk mengizinkan permintaan lintas-asal, server harus secara eksplisit mengizinkannya dengan menyertakan tajuk spesifik dalam respons mereka. Header ini menentukan domain, metode HTTP, dan header mana yang diizinkan.

sumber: medianova.com

Tajuk CORS Utama

  1. Akses-Kontrol-Izinkan-Asal: Domain mana yang diizinkan untuk mengakses sumber daya ini. Ini bisa berupa domain tertentu atau * (karakter pengganti) untuk mengizinkan semua domain.
  2. Akses-Kontrol-Izinkan-Metode: Menentukan metode HTTP (GET, POST, PUT, dll). diizinkan untuk permintaan lintas asal
  3. Akses-Kontrol-Izinkan-Header: Menentukan header khusus yang diizinkan dalam permintaan.
  4. Access-Control-Expose-Headers: mencantumkan header yang dapat dibaca browser.
  5. Kontrol-Akses-Izinkan-Kredensial: Menunjukkan apakah kredensial seperti cookie atau autentikasi HTTP dapat disertakan dalam permintaan lintas-asal.

CORS di SPA

SPA sering kali berinteraksi dengan API yang dihosting di domain atau subdomain yang berbeda, sehingga konfigurasi CORS sangat penting. Berikut ini adalah pertimbangan utama saat bekerja dengan CORS di SPA:

1. Konfigurasi Frontend

  • Pengaturan URL Dasar: Pastikan klien HTTP SPA Anda (Axios, Fetch API...) mengarah ke URL dasar API yang benar (domain dan port).
  • Manajemen Kredensial: Jika API memerlukan cookie atau token untuk otentikasi, sesuaikan opsi kredensial di klien HTTP Anda (mis. kredensial: 'include' dalam kasus Fetch API).
  • Header Khusus: Pastikan server menambahkannya ke header respons Access-Control-Allow-Headers, jika SPA Anda mengirimkan header khusus (mis. Otorisasi).

2. Konfigurasi Backend

  • Kebijakan Granular: Jangan gunakan * untuk Access-Control-Allow-Origin kecuali jika memang harus. Sebaliknya, tentukan secara eksplisit domain mana yang dipercaya.
  • Permintaan Sebelum Penerbangan: Browser mengirimkan permintaan OPTIONS preflight untuk permintaan yang rumit (misalnya, permintaan dengan tajuk khusus atau metode non-GET/POST). Pastikan server Anda dapat menangani permintaan ini dan merespons dengan tajuk CORS yang benar.
  • Permintaan yang dikreditkan: Jika SPA mengirimkan cookie atau memerlukan autentikasi dalam permintaan, setel Access-Control-Allow-Credentials ke true Ini tidak boleh digunakan dengan * di header Access-Control-Allow-Origin.

3. Implikasi Keamanan

  • Batasi Akses Domain: Hanya izinkan domain tepercaya untuk memanggil API Anda. Jangan gunakan karakter pengganti kecuali API adalah API publik
  • CORS Bukan Pengganti Pemeriksaan Sisi Server: Meskipun CORS telah dikonfigurasi, pastikan untuk memvalidasi permintaan yang masuk dari sisi server untuk memastikan permintaan tersebut memenuhi persyaratan keamanan Anda.
  • Batasi header: Terapkan Access-Control-Expose-Headers secara konservatif untuk menghindari pembagian yang berlebihan.

4. Penanganan Kesalahan dan Debugging

  • Konsol Browser: Sebagian besar browser modern menyediakan pesan kesalahan yang terperinci untuk masalah terkait CORS saat terjadi. Periksa konsol untuk mendapatkan petunjuk.
  • Log Server: Catat permintaan/respon untuk mendiagnosis ketidaksesuaian konfigurasi.
  • Alat Pengujian: Gunakan alat bantu seperti Postman atau cURL untuk mensimulasikan permintaan lintas asal dan memverifikasi respons server.

Contoh Praktis

Pertimbangkan SPA yang dihosting di https://example-spa.com yang membuat permintaan API ke https://api.example.com. Untuk mengaktifkan CORS:
  • Konfigurasi Backend:
Access-Control-Allow-Origin: https://example-spa.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true

  • Konfigurasi Frontend:

fetch('https://api.example.com/data', {

  method: 'GET',

  credentials: 'include',

  headers: {

    'Content-Type': 'application/json',

  },

});

Kesimpulan

CORS merupakan pertimbangan penting untuk SPA yang berinteraksi dengan API eksternal. Dengan memahami dan mengonfigurasi frontend dan backend dengan benar, pengembang dapat memastikan komunikasi yang aman dan efisien. Prioritaskan keamanan dengan membatasi sumber, menangani permintaan sebelum penerbangan, dan memvalidasi semua masukan untuk mengurangi potensi kerentanan. Dengan manajemen CORS yang bijaksana, SPA dapat memberikan pengalaman yang kuat dan ramah pengguna. 

 Kembali ke>>>> Memahami CORS: Pembagian Sumber Daya Lintas Asal