CORS: Conceito, Solução e Riscos em API REST com Chave API

Origem do erro CORS

CORS, um acrônimo para Cross-Origin Resource Sharing, é um mecanismo implementado em navegadores da web para permitir que os recursos de uma página da web sejam solicitados a um domínio diferente daquele que serviu a primeira página. Este mecanismo foi projetado para proteger o usuário contra ataques maliciosos que podem comprometer seus dados por meio de solicitações entre sites.

O erro CORS surge quando um aplicativo da web tenta fazer uma solicitação a uma API hospedada em um domínio diferente do aplicativo. Por exemplo, se seu aplicativo em https://miapp.com tentar acessar uma API em https://api.externo.com, o navegador bloqueará a solicitação devido à sua política de mesma origem, a menos que a API externa tenha configurado corretamente Cabeçalhos CORS para permitir solicitações do seu domínio.

Exemplo de erro CORS

Sem a configuração adequada do CORS, uma solicitação AJAX de https://miapp.com para https://api.externo.com falharia:

fetch("https://api.externo.com/datos")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error al realizar la petición:', error));

O navegador exibirá um erro semelhante a:

Access to fetch at 'https://api.externo.com/datos' from origin 'https://miapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Solução: Habilitar Domínio de Origem

Para resolver o erro CORS, o servidor API deve incluir o cabeçalho Access-Control-Allow-Origin em sua resposta, especificando os domínios que têm permissão para acessar os recursos. Isso pode ser definido de maneira geral ou específica para determinados domínios.

Riscos ao usar chave de API para autorização

Usar chaves de API como método de autorização em conjunto com CORS representa um risco significativo. Ao fazer solicitações diretamente do FrontEnd, a chave da API pode ser exposta através do código-fonte do navegador ou de ferramentas de desenvolvimento, colocando em risco a segurança da API e a integridade dos dados.

Exemplo de exposição de chave de API

fetch("https://api.externo.com/datos?apiKey=MI_API_KEY_SECRETA")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Nesse caso, qualquer pessoa com acesso ao navegador poderá ver facilmente a chave de API usada na solicitação.

Recomendação: Faça conexões pelo backend

Para mitigar os riscos de segurança associados à exposição de chaves de API e outros dados confidenciais, é recomendável fazer solicitações a APIs externas a partir do BackEnd da aplicação. Dessa forma, a lógica de autorização e o manuseio das chaves API permanecem ocultos e seguros no servidor.

Exemplo de solicitação do BackEnd

const fetch = require('node-fetch');

// Función para realizar la solicitud a la API externa desde el servidor
function obtenerDatosDesdeAPI() {
  const url = "https://api.externo.com/datos?apiKey=MI_API_KEY_SECRETA";
  
  fetch(url)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error al realizar la petición:', error));
}

Ao fazer solicitações através do servidor, você preserva a segurança das informações sensíveis e evita o risco de expor dados sensíveis ao cliente.

Concluindo, embora o CORS seja uma solução eficaz para permitir solicitações de origem cruzada, é crucial lidar com a segurança das chaves de API e de outros dados confidenciais, preferindo fazer solicitações confidenciais do servidor para garantir a segurança e integridade da aplicação e seus usuários.

Se você também deseja fazer solicitações a partir do seu FrontEnd, entre em contato conosco pelo e-mail success@icommkt.com, e envie-nos o domínio a partir do qual serão feitas as solicitações

Atualizado em: 29/04/2024