Przewodnik po konfiguracji CORS dla interfejsów API webhook w programie API Designer

Cross-Origin Resource Sharing (CORS) to mechanizm bezpieczeństwa przeglądarki, który ogranicza stronom internetowym możliwość wysyłania żądań do innej domeny niż ta, która obsługiwała stronę internetową. Ma to na celu ochronę użytkowników przed złośliwymi witrynami próbującymi uzyskać dostęp do poufnych danych z innej witryny bez pozwolenia.

Przegląd

Vtiger API Designer został stworzony jako potężne narzędzie, które służy jako warsztat dla programistów do łatwego tworzenia niestandardowych interfejsów API opartych na protokole HTTP. Te interfejsy API można bezproblemowo zintegrować z interfejsami API JavaScript VTAP lub aplikacjami zewnętrznymi.

Dodaliśmy funkcję w API Designer, aby określić dozwolone domeny (domeny, które mogą być umieszczone na białej liście). Tylko te domeny umieszczone na białej liście będą mogły wysyłać żądania CORS.

Poznajmy bliżej CORS i jego zastosowania.

Cel

Główne cele wdrożenia CORS:

  • Umożliwia bezpieczną komunikację między domenami między aplikacjami front-end i CRM.
  • Włącz wywołania interfejsu API webhook z aplikacji klienckich lub portali zewnętrznych.
  • Zapobiegaj błędom CORS po stronie przeglądarki.
  • Chroń dane CRM przed nieautoryzowanymi domenami.

Implementacja techniczna

Podczas tworzenia interfejsu API webhook w projektancie interfejsu API dostępna jest opcja dodaj domenę do konfiguracji. Ta domena reprezentuje pochodzenie (stronę internetową lub aplikację), które będzie wysyłać żądania lub odbierać dane z Vtiger. 

Po dodaniu domeny:

  • Vtiger będzie zezwalaj na żądania międzydomenowe z tej domeny.
  • Rozpocznie się działanie interfejsu API webhook pomyślne odbieranie danych z CRM.
  • Przeglądarka zablokuje wszystkie żądania przychodzące z domeny nieobjęte białą listą.

Taka konfiguracja gwarantuje, że interfejs API webhook będzie mógł bezpiecznie działać zgodnie z przeznaczeniem, bez konieczności stosowania serwerów proxy zaplecza lub obejść, a jednocześnie zachowana zostanie kontrola nad tym, które domeny mogą wchodzić w interakcje z Vtiger.

Przykład

Jeśli aplikacja internetowa hostowana pod adresem https://app.example.com spróbuje wysłać żądanie do interfejsu API pod adresem https://api.vtiger.com, przeglądarka zablokuje żądanie, chyba że interfejs API wyraźnie na to zezwoli za pośrednictwem nagłówków CORS.

Aby ta interakcja była możliwa i bezpieczna, serwer musi odpowiedzieć specjalnymi nagłówkami (takimi jak Access-Control-Allow-Origin), które informują przeglądarkę, które źródła (domeny) mają prawo dostępu do niego.

W przypadku Vtiger włączenie Biała lista CORS umożliwia zaufanym domenom interakcję z CRM (np. wysyłanie żądań webhook lub wywoływanie interfejsów API) bez blokowania ich przez przeglądarkę.

Przypadek użycia

Masz aplikację front-end hostowaną pod adresem https://portal.mycompany.com, która musi wysyłać żądania API webhook do Twojej instancji Vtiger CRM pod adresem https://crm.mycompany.com.

Problem

Przeglądarka blokuje żądanie z powodu błędu CORS: Dostęp do pobierania pod adresem „https://crm.mycompany.com/webhook” z adresu źródłowego „https://portal.mycompany.com” został zablokowany przez zasady CORS.

Rozwiązanie Dodaj https://portal.mycompany.com do białej listy CORS w Vtiger. Następnie przeglądarka zezwoli na żądanie, ponieważ odpowiedź będzie zawierać prawidłowe nagłówki.

Korzyści

  • Zapobiega błędom żądań związanych z CORS w aplikacjach front-end.
  • Umożliwia bezpieczny i kontrolowany dostęp do interfejsów API Vtiger z zaufanych domen.
  • Obsługuje integrację z nowoczesnymi frameworkami front-endowymi, takimi jak React, Angular, Vue itp.
  • Eliminuje potrzebę stosowania serwerów proxy do obsługi komunikacji API.
  • Łatwe zarządzanie i aktualizacja poprzez interfejs administratora.

Wierzymy, że te przykłady poprawią Twoje doświadczenia z Vtiger CRM. Chcemy zapewnić, że programiści i użytkownicy CRM mogą wzajemnie dzielić się informacjami i wiedzą, aby zwiększyć funkcjonalność CRM. 

Bądźcie czujni, aby dowiedzieć się więcej. Szczęśliwego kodowania!

 
 

Zarejestruj się, aby otrzymywać najnowsze aktualizacje!