Panduan Konfigurasi CORS untuk API Webhook di API Designer

Cross-Origin Resource Sharing (CORS) adalah mekanisme keamanan browser yang membatasi halaman web agar tidak membuat permintaan ke domain yang berbeda dari domain yang menyediakan halaman web tersebut. Hal ini dilakukan untuk melindungi pengguna dari situs web jahat yang mencoba mengakses data sensitif dari situs lain tanpa izin.

Ringkasan

API Designer Vtiger diciptakan sebagai alat canggih yang berfungsi sebagai meja kerja bagi para pengembang untuk membangun API berbasis HTTP khusus dengan mudah. ​​API ini dapat diintegrasikan dengan lancar dengan API JavaScript VTAP atau aplikasi eksternal.

Kami telah menambahkan fitur di API Designer untuk menentukan domain yang diizinkan (domain yang dapat masuk daftar putih). Hanya domain yang masuk daftar putih ini yang akan diizinkan untuk membuat permintaan CORS.

Mari pelajari lebih lanjut tentang CORS dan penerapannya.

Tujuan

Tujuan utama mengaktifkan CORS:

  • Memungkinkan komunikasi lintas asal yang aman antara aplikasi frontend dan CRM.
  • Aktifkan panggilan API webhook dari aplikasi sisi klien atau portal eksternal.
  • Mencegah kesalahan CORS sisi browser.
  • Lindungi data CRM dari domain yang tidak sah.

Implementasi Teknis

Saat membuat Webhook API di API Designer, ada opsi untuk tambahkan domain ke konfigurasi. Domain ini mewakili asal (situs web atau aplikasi) yang akan membuat permintaan atau menerima data dari Vtiger. 

Setelah domain ditambahkan:

  • Vtiger akan izinkan permintaan lintas asal dari domain itu.
  • API webhook akan dimulai berhasil menerima data dari CRM.
  • Browser akan memblokir permintaan apa pun yang datang dari domain yang tidak masuk daftar putih.

Pengaturan ini memastikan bahwa API webhook dapat berfungsi dengan aman sebagaimana mestinya tanpa memerlukan proxy backend atau solusi sementara, sembari tetap mempertahankan kontrol atas domain mana saja yang diizinkan berinteraksi dengan Vtiger.

Example

Jika aplikasi web yang dihosting di https://app.example.com mencoba mengirim permintaan ke API di https://api.vtiger.com, browser akan memblokir permintaan tersebut kecuali API secara eksplisit mengizinkannya melalui header CORS.

Untuk membuat interaksi ini memungkinkan dan aman, server harus merespons dengan header khusus (seperti Access-Control-Allow-Origin) yang memberi tahu browser asal (domain) mana yang diizinkan untuk mengaksesnya.

Dalam kasus Vtiger, mengaktifkan Daftar Putih CORS memungkinkan domain tepercaya untuk berinteraksi dengan CRM (seperti mengirim permintaan webhook atau memanggil API) tanpa diblokir oleh browser.

Gunakan kasing

Anda memiliki aplikasi frontend yang dihosting di https://portal.mycompany.com yang perlu mengirim permintaan API webhook ke instans Vtiger CRM Anda di https://crm.mycompany.com.

Masalah

Peramban memblokir permintaan karena kesalahan CORS: Akses untuk mengambil di 'https://crm.perusahaansaya.com/webhook' dari asal 'https://portal.perusahaansaya.com' telah diblokir oleh kebijakan CORS.

Solusi Tambahkan https://portal.mycompany.com ke Daftar Putih CORS di Vtiger. Setelah ini, browser akan mengizinkan permintaan tersebut karena responsnya akan menyertakan tajuk yang benar.

Manfaat

  • Mencegah kegagalan permintaan terkait CORS di aplikasi frontend.
  • Memungkinkan akses aman dan terkendali ke API Vtiger dari domain tepercaya.
  • Mendukung integrasi dengan kerangka kerja frontend modern seperti React, Angular, Vue, dll.
  • Menghilangkan kebutuhan proxy backend untuk menangani komunikasi API.
  • Mudah dikelola dan diperbarui melalui antarmuka admin.

Kami yakin contoh-contoh ini akan meningkatkan pengalaman Anda dengan Vtiger CRM. Kami ingin memastikan bahwa pengembang dan pengguna CRM dapat saling berbagi informasi dan pengetahuan untuk meningkatkan fungsionalitas CRM. 

Nantikan informasi lebih lanjut. Selamat membuat kode!

 
 

Daftar untuk menerima pembaruan terbaru!