Guia de configuração do CORS para APIs de Webhook no API Designer

O Compartilhamento de Recursos entre Origens (CORS) é um mecanismo de segurança do navegador que impede que páginas da web façam solicitações a um domínio diferente daquele que as serviu. Isso serve para proteger os usuários de sites maliciosos que tentam acessar dados confidenciais de outro site sem permissão.

Visão geral

O API Designer do Vtiger foi criado como uma ferramenta poderosa que serve como uma bancada para desenvolvedores criarem APIs personalizadas baseadas em HTTP com facilidade. Essas APIs podem ser perfeitamente integradas com APIs JavaScript VTAP ou aplicativos externos.

Adicionamos um recurso no Designer de API para especificar domínios permitidos (domínios que podem ser incluídos na lista de permissões). Somente esses domínios na lista de permissões terão permissão para fazer solicitações CORS.

Vamos aprender mais sobre o CORS e sua aplicação.

Objetivo

Os principais objetivos da ativação do CORS:

  • Permita comunicação segura entre origens entre aplicativos front-end e o CRM.
  • Habilite chamadas de API do webhook de aplicativos do lado do cliente ou portais externos.
  • Evite erros CORS no navegador.
  • Proteja os dados do CRM de domínios não autorizados.

Implementação Técnica

Ao criar uma API Webhook no API Designer, há uma opção para adicionar um domínio para a configuração. Este domínio representa a origem (o site ou aplicativo) que fará solicitações ou receberá dados do Vtiger. 

Depois que o domínio for adicionado:

  • Vtiger irá permitir solicitações de origem cruzada daquele domínio.
  • A API do webhook será iniciada recebendo dados com sucesso do CRM.
  • O navegador bloqueará qualquer solicitação vinda de domínios não incluídos na lista de permissões.

Essa configuração garante que a API do webhook possa funcionar com segurança conforme o esperado, sem exigir proxies de back-end ou soluções alternativas, mantendo o controle sobre quais domínios têm permissão para interagir com o Vtiger.

Exemplo

Se um aplicativo web hospedado em https://app.example.com tentar enviar uma solicitação a uma API em https://api.vtiger.com, o navegador bloqueará a solicitação, a menos que a API a permita explicitamente por meio de cabeçalhos CORS.

Para tornar essa interação possível e segura, o servidor deve responder com cabeçalhos especiais (como Access-Control-Allow-Origin) que informam ao navegador quais origens (domínios) têm permissão para acessá-lo.

No caso do Vtiger, a habilitação Lista de permissões do CORS permite que domínios confiáveis ​​interajam com o CRM (como enviar solicitações de webhook ou chamar APIs) sem serem bloqueados pelo navegador.

Caso de uso

Você tem um aplicativo front-end hospedado em https://portal.mycompany.com que precisa enviar solicitações de API de webhook para sua instância do Vtiger CRM em https://crm.mycompany.com.

Problema

O navegador bloqueia a solicitação devido a um erro CORS: O acesso para buscar em 'https://crm.mycompany.com/webhook' da origem 'https://portal.mycompany.com' foi bloqueado pela política CORS.

Solução Adicione https://portal.mycompany.com à lista de permissões do CORS no Vtiger. Depois disso, o navegador permitirá a solicitação, pois a resposta incluirá os cabeçalhos corretos.

Benefícios

  • Evita falhas de solicitação relacionadas ao CORS em aplicativos front-end.
  • Permite acesso seguro e controlado às APIs do Vtiger de domínios confiáveis.
  • Suporta integração com frameworks frontend modernos como React, Angular, Vue, etc.
  • Elimina a necessidade de proxies de backend para lidar com a comunicação da API.
  • Fácil de gerenciar e atualizar através da interface de administração.

Acreditamos que esses exemplos melhorarão sua experiência com o Vtiger CRM. Queremos garantir que desenvolvedores e usuários de CRM possam compartilhar mutuamente informações e conhecimento para promover a funcionalidade do CRM. 

Fique ligado para mais. Boa codificação!

 
 

Inscreva-se para receber as últimas atualizações!