Todo desenvolvedor Front-end já se deparou com o CORS no desenvolvimento web. Mas, afinal, o que é CORS? Em resumo, é o compartilhamento de recursos com origens diferentes. Ele é essencial para garantir a navegação segura ao usuário, evitar a ação de crackers e o acesso de websites maliciosos.
CORS é o acrônimo de Cross-origin Resource Sharing (Compartilhamento de Recursos de Origem Cruzada). Na prática, ele informa aos navegadores se um determinado recurso pode ou não ser acessado.
Basicamente, todo navegador possui um mecanismo de segurança chamado de same-origin policy. Portanto, ele é usado para garantir mais segurança e limitar como um documento ou script de uma determinada origem pode interagir com recursos de outra origem diferente.
Sendo assim, para entender melhor o que é CORS, é necessário compreender o que é origem. Vamos lá?
O que é origem?
A origem de um website é uma composição envolvendo:
- Protocolo;
- Host;
- Porta.
Desse modo, no exemplo http://meuhost.com:80 podemos identificar que “http” é o protocolo, “meuhost.com” é o host propriamente dito, e “80” é a porta utilizada.
Enfim, se você usar outros endereços, com diferenças no protocolo, no host ou na porta, o recurso CORS aparecerá e será preciso resolvê-lo para dar continuidade ao projeto.
Portanto, se você usar, por exemplo, o protocolo “https”, será necessário resolver o CORS, bem como se você estiver acessando uma API ou um subdomínio. Reforçando, será necessário fazer a configuração do CORS.
O que é same-origin policy?
A internet não é uma terra sem lei, não é verdade? Por isso, por padrão, o desenvolvedor Front-end só consegue acessar tranquilamente recursos localizados na mesma origem de uma solicitação.
Isso se deve ao same-origin policy, que é um mecanismo de segurança presente nos navegadores.
Desse modo, quando surge um erro de CORS, o desenvolvedor deve verificar qual requisição está causando o problema no console do seu navegador. Na maioria das vezes, o problema é causado por não haver headers ao lado do seu servidor.
Portanto, antes de exibir os dados necessários, o navegador solicita ao servidor a busca por esses dados. Desse modo, o cliente envia uma requisição no protocolo HTTP com os dados necessários.
Mas como se trata de um recurso com cross-origin (ou origem cruzada), com um protocolo, host ou porta diferente, é preciso fazer a validação pelo CORS.
Em síntese, a política do same-origin vem para evitar a ação de sites maliciosos quando você clica acidentalmente em um link de rede social, por exemplo.
Conclusão
Você viu o que é CORS e como ele pode conferir mais segurança à navegação ao usuário. Portanto, o desenvolvedor Front-end precisa conhecer esse recurso e as formas de resolvê-lo para dar continuidade aos projetos quando se está compartilhando dados de origens cruzadas.
Que tal agora conferir outros conteúdos como esse no Dicionário Tech da Coodesh? Aliás, a Coodesh é uma startup de validação de desenvolvedores e recrutamento tech para empresas em expansão.
Conheça melhor nossas soluções para desenvolvedores, como cadastro gratuito na plataforma, testes técnicos e comportamentais, bem como mentorias de carreira.
Acesse este link e saiba mais.
