Руководство по настройке CORS для API Webhook в API Designer

Cross-Origin Resource Sharing (CORS) — это механизм безопасности браузера, который запрещает веб-страницам делать запросы к домену, отличному от того, который обслуживает веб-страницу. Это делается для защиты пользователей от вредоносных веб-сайтов, пытающихся получить доступ к конфиденциальным данным с другого сайта без разрешения.

Обзор

API Designer от Vtiger был создан как мощный инструмент, который служит рабочим местом для разработчиков, чтобы легко создавать собственные API на основе HTTP. Эти API могут быть легко интегрированы с API JavaScript VTAP или внешними приложениями.

Мы добавили функцию в API Designer для указания разрешенных доменов (домены, которые могут быть добавлены в белый список). Только этим доменам из белого списка будет разрешено делать запросы CORS.

Давайте узнаем больше о CORS и его применении.

Цель

Основные цели внедрения CORS:

  • Обеспечить безопасную кросс-доменную связь между приложениями интерфейса и CRM.
  • Включите вызовы API веб-перехватчиков из клиентских приложений или внешних порталов.
  • Предотвращение ошибок CORS на стороне браузера.
  • Защитите данные CRM от несанкционированного доступа.

Техническая реализация

При создании API Webhook в API Designer есть возможность добавить домен в конфигурацию. Этот домен представляет источник (веб-сайт или приложение), который будет делать запросы или получать данные от Vtiger. 

После добавления домена:

  • Втигр будет разрешить запросы из разных источников из этого домена.
  • API веб-перехватчика будет запущен успешное получение данных из CRM.
  • Браузер будет блокировать любые запросы, поступающие от Домены, не входящие в белый список.

Такая настройка гарантирует, что API веб-перехватчика может безопасно функционировать так, как задумано, без необходимости использования внутренних прокси-серверов или обходных путей, при этом сохраняя контроль над тем, каким доменам разрешено взаимодействовать с Vtiger.

Пример

Если веб-приложение, размещенное по адресу https://app.example.com, попытается отправить запрос к API по адресу https://api.vtiger.com, браузер заблокирует запрос, если только API явно не разрешит это через заголовки CORS.

Чтобы сделать это взаимодействие возможным и безопасным, сервер должен отвечать специальными заголовками (например, Access-Control-Allow-Origin), которые сообщают браузеру, каким источникам (доменам) разрешен доступ к нему.

В случае Vtiger, включение Белый список CORS позволяет доверенным доменам взаимодействовать с CRM (например, отправлять запросы webhook или вызывать API) без блокировки браузером.

Примеры использования

У вас есть фронтенд-приложение, размещенное по адресу https://portal.mycompany.com, которому необходимо отправлять запросы API webhook на ваш экземпляр Vtiger CRM по адресу https://crm.mycompany.com.

Проблема

Браузер блокирует запрос из-за ошибки CORS: доступ к выборке по адресу «https://crm.mycompany.com/webhook» из источника «https://portal.mycompany.com» заблокирован политикой CORS.

Решение Добавьте https://portal.mycompany.com в белый список CORS в Vtiger. После этого браузер разрешит запрос, поскольку ответ будет включать правильные заголовки.

Преимущества

  • Предотвращает сбои запросов, связанные с CORS, в интерфейсных приложениях.
  • Обеспечивает безопасный и контролируемый доступ к API Vtiger из доверенных доменов.
  • Поддерживает интеграцию с современными фронтенд-фреймворками, такими как React, Angular, Vue и т. д.
  • Устраняет необходимость использования внутренних прокси-серверов для обработки API-коммуникаций.
  • Легко управлять и обновлять через интерфейс администратора.

Мы считаем, что эти примеры улучшат ваш опыт работы с Vtiger CRM. Мы хотим гарантировать, что разработчики и пользователи CRM смогут обмениваться информацией и знаниями для дальнейшего расширения функциональности CRM. 

Оставайтесь с нами для большего. Приятного кодирования!

 
 

Подпишитесь, чтобы получать последние обновления!