Executando verificação de segurança...
1
FilipeDias
1 min de leitura ·

Como posso proteger minha chave API?

Olá, meu nome é Filipe e estou estudando programação a uns 7 meses na parte do FrontEnd.

Bom, recentemente comecei a fazer um projeto usando a API do The Movie DB (TMDB), até que me veio uma dúvida na qual eu me perguntei se era certo chamar a API direto do front, que era como eu sempre fazia.

Após algumas pesquisas descobri que não era nem um pouco recomendável fazer isso pelo front, nem se a API for gratuita, mas ainda insisti em achar algum método para chamar a API no front de forma segura, mas todas as vezes acabava que indo pro backend.

Conformado que não teria jeito, que usar o backend seria necessário, resolvi proucurar algum conteúdo na internet sobre o assunto (uma pesquisa rápida) e para minha surpresa não achei quase nada, talvez não soube pesquisar.

Bem, o propósito de eu está fazendo esse post, é saber como eu posso chamar uma API de forma segura, pois não faço muita ideia de como fazer isso, mas gostaria muito de aprender. Agradeceria muito se alguém poder responder, ou até mesmo recomendar alguns vídeos, documentação, artigo e etc.

Obrigado por ler até aqui.

Carregando publicação patrocinada...
8
eliaseas

Você sempre vai precisar chamar APIs do front quando se trata de aplicações dinâmicas.

O que você precisa proteger são chamadas críticas, por exemplo: você tem uma API que cria anuncios no google ads. você jamais vai fazer essa chamada diretamente ao google via frontend, e sim chamar seu backend, e ele fará essa requisição.

Esse seu endpoint vai precisar provavelmente de alguma autenticação, além disso você deve impor limites ao seu uso, por exemplo um usuário só pode criar X anúncios, assim um usuário mal intencionado não consegue fazer grandes estragos com uma só conta.

De toda forma você vai precisar de uma chave de API para sua API interna, que precisa estar dentro do seu código.

Essa API deve estar protegida por CORS, evitando chamada a partir de sites de terceiros (não impede em browsers com cors desativado, mas dificulta um ataque em massa por exemplo)

1
2
caiquearaujo

Sobre isso, a resposta mais simples é utilizar um Reverse Proxy, então tem algumas opções:

  1. Você pode criar uma API em fastify, por exemplo, que irá receber requisições e redirecioná-las para o tMDB. No redirecionamento, você encaminha a sua chave de API;
  2. Você pode utilizar o nGINX para criar um Reverse Proxy que também irá redirecionar as requisições para o tMDB encaminhando a sua chave de API.

Para ambos os casos, você vai chamar, por exemplo, api.seudominio.com.br e as requisições apenas serão encaminhadas para o tMDB e retornadas. Dessa forma, você protege o acesso a sua chave.

No seu proxy você pode adicionar restrições CORS, rate-limit e outros impedimentos. Você não deve utilizar no front-end uma conexão direta com uma API que precise de uma chave secreta. Essa chave sempre será exposta, mesmo que seja uma chave da sua própria API. Um proxy de controle ajuda você a gerenciar melhor essa conexão e previnir abusos.

No caso do tMDB faz sentido, já que eles podem banir a sua conta por abuso. Assim você previne que alguém pegue a sua chave de API e faça o que quiser, além de poder controlar no proxy mais proteções de acesso, cachê e outras coisas.

Agora, lembre-se se um recurso deve ser restrito, você deve utilizar cookies, sessões e similares. Nunca use chaves de API no front.

A propósito, já fiz um proxy do tMDB com Fastify para os cursos que eu ministrava: https://github.com/caiquearaujo/tmdb-api-proxy-fastify.