Este post de blog foca nos problemas de Compartilhamento de Recursos entre Origens (CORS) que desenvolvedores web frequentemente encontram. Começa explicando o que é CORS, seus princípios básicos e por que ele é importante. Em seguida, analisa como os erros de CORS ocorrem e como resolvê-los. Também destaca as melhores práticas e considerações importantes para uma implementação de CORS segura e eficaz. Este guia tem como objetivo ajudar você a entender e resolver problemas relacionados a CORS em seus aplicativos web.

O que é CORS? Informações básicas e sua importância

Compartilhamento de Recursos de Origem Cruzada (CORS), Um mecanismo de segurança que permite que navegadores da web autorizem uma página da web a acessar recursos de um domínio diferente. Essencialmente, ele regula o acesso de uma aplicação web a recursos (por exemplo, APIs, fontes, imagens) fora de seu próprio domínio. Por padrão, os navegadores bloqueiam solicitações de um domínio para outro, devido à Política de Mesma Origem. O CORS oferece uma maneira de contornar essa restrição com segurança.

A importância do CORS advém da complexidade das aplicações web modernas e da necessidade de extrair dados de múltiplas fontes. Muitas aplicações web dependem de APIs, CDNs ou outras fontes externas hospedadas em diferentes servidores. Sem o CORS, o acesso a esses recursos seria impossível, limitando severamente a funcionalidade das aplicações web. CORS, Ele dá aos desenvolvedores a flexibilidade de extrair dados de diferentes fontes, mantendo a segurança de seus aplicativos web.

Na tabela abaixo, CORS‘Os conceitos básicos e a operação são resumidos:

Conceito	Explicação	Importância
Política de Mesma Origem	Ele impede que navegadores acessem recursos de uma fonte diferente por meio de scripts carregados de uma fonte.	Ele garante a segurança e impede que scripts maliciosos acessem dados confidenciais.
Solicitação de origem cruzada	Uma solicitação HTTP feita a um domínio diferente do domínio de uma página da web.	Ele permite que aplicativos web modernos acessem diferentes APIs e recursos.
CORS Títulos (CORS Cabeçalhos)	Cabeçalhos especiais que o servidor adiciona aos cabeçalhos de resposta para permitir solicitações de origem cruzada.	Ele informa ao navegador quais domínios podem acessar recursos.
Solicitação de pré-voo	Uma solicitação que o navegador envia ao servidor por meio do método OPTIONS antes de fazer solicitações complexas de origem cruzada.	Ele permite que o servidor verifique se aceita ou não a solicitação.

CORS‘O funcionamento básico do é baseado no servidor web informando ao navegador quais recursos ele permite acesso por meio de cabeçalhos de resposta HTTP. O servidor especifica quais domínios podem acessar seus recursos com o cabeçalho Access-Control-Allow-Origin. Se o domínio solicitante estiver incluído neste cabeçalho ou se * (todos) for especificado, o navegador aceita a solicitação. Caso contrário, o navegador bloqueia a solicitação e envia um CORS ocorre um erro.

Elementos principais do CORS
• Acesso-Controle-Permitir-Origem: Especifica quais domínios podem acessar o recurso.
• Métodos de permissão de controle de acesso: Especifica quais métodos HTTP (GET, POST, PUT, DELETE, etc.) podem ser usados.
• Acesso-Controle-Permitir-Cabeçalhos: Especifica quaisquer cabeçalhos especiais que podem ser incluídos na solicitação.
• Acesso-Controle-Permissão-Credenciais: Especifica se informações de identificação (cookies, cabeçalhos de autorização) podem ser incluídas.
• Controle de acesso-Idade máxima: Especifica por quanto tempo os resultados de uma solicitação de pré-voo podem ser armazenados em cache.

CORS Os erros são frequentemente causados por configurações incorretas do lado do servidor. É importante que os desenvolvedores configurem seus servidores corretamente para permitir que apenas domínios confiáveis acessem os recursos. Além disso, CORS Seguir as melhores práticas ajuda a minimizar vulnerabilidades de segurança.

CORS, É parte integrante dos aplicativos web modernos, proporcionando flexibilidade para extrair dados de diferentes fontes, mantendo a segurança. Quando configurado corretamente, ele amplia a funcionalidade dos aplicativos web e melhora a experiência do usuário.

Princípio de funcionamento do compartilhamento de recursos entre origens

Recurso de origem cruzada CORS é um mecanismo que permite que navegadores da web autorizem páginas de uma origem a acessar recursos de uma origem diferente. Os navegadores normalmente implementam a política de mesma origem, o que significa que uma página da web só pode acessar recursos de uma fonte com o mesmo protocolo, host e porta. O CORS foi desenvolvido para superar essa restrição e permitir o compartilhamento seguro de dados entre diferentes origens.

O objetivo principal do CORS é proteger aplicações web. O princípio da mesma origem impede que sites maliciosos acessem dados confidenciais dos usuários. No entanto, em alguns casos, o compartilhamento de dados entre diferentes fontes é necessário. Por exemplo, uma aplicação web pode precisar acessar uma API em um servidor diferente. O CORS oferece uma solução segura para esses cenários.

Área	Explicação	Exemplo
Origem	O endereço do recurso que iniciou a solicitação.	http://example.com
Acesso-Controle-Permitir-Origem	Especifica quais recursos o servidor permite.	http://example.com, *
Método de solicitação de controle de acesso	Especifica qual método HTTP o cliente deseja usar.	POSTAR, RECEBER
Métodos de permissão de controle de acesso	Especifica quais métodos HTTP o servidor permite.	POSTAR, OBTER, OPÇÕES

O CORS funciona por meio de uma série de cabeçalhos HTTP entre o cliente (navegador) e o servidor. Quando um cliente faz uma solicitação entre origens, o navegador adiciona automaticamente o cabeçalho Origin à solicitação. O servidor examina esse cabeçalho para decidir se permite ou não a solicitação. Se o servidor permitir a solicitação, ele responde com um cabeçalho Access-Control-Allow-Origin. Esse cabeçalho especifica quais recursos podem acessar a solicitação.

Processo CORS
1. O navegador solicita recursos de uma fonte diferente.
2. O navegador adiciona o cabeçalho Origin à solicitação.
3. O servidor avalia o cabeçalho Origin.
4. O servidor responde com um cabeçalho Access-Control-Allow-Origin.
5. O navegador verifica a resposta e permite ou bloqueia a solicitação.

Entender como o CORS funciona é fundamental para desenvolvedores web. Configurações CORS mal configuradas podem levar a vulnerabilidades de segurança em aplicações web. Portanto, entender como o CORS funciona e como configurá-lo corretamente é essencial para o desenvolvimento de aplicações web seguras e eficazes.

Processos de Concessão de Permissão

No CORS, os processos de permissão são usados para determinar quais recursos o servidor tem permissão para acessar. O servidor, Acesso-Controle-Permitir-Origem Você pode permitir recursos específicos por meio do cabeçalho ou permitir todos os recursos * pode usar o personagem. No entanto, * O uso do caractere pode representar riscos à segurança, portanto, é preciso ter cautela. É uma abordagem mais segura para conceder permissões a recursos específicos, especialmente quando se trata de dados confidenciais.

Erros e Soluções

Erros CORS são frequentemente causados por configurações de servidor mal configuradas. Um dos erros mais comuns é, Acesso-Controle-Permitir-Origem O cabeçalho está ausente ou configurado incorretamente. Nesse caso, o navegador bloqueia a solicitação e exibe um erro CORS. Para resolver esses erros, você precisa verificar as configurações do servidor e Acesso-Controle-Permitir-Origem É importante garantir que o cabeçalho esteja configurado corretamente. Também é importante garantir que as solicitações OPTIONS, também conhecidas como solicitações de pré-voo, sejam tratadas corretamente.

Como entender e corrigir erros CORS

Recurso de origem cruzada Erros de CORS são um problema comum e demorado para desenvolvedores web. Esses erros ocorrem quando uma página web tenta solicitar um recurso de uma fonte diferente (domínio, protocolo ou porta) e o navegador bloqueia a solicitação por motivos de segurança. Entender e resolver erros de CORS é fundamental para o bom funcionamento de aplicações web modernas.

Diagnosticar erros de CORS é o primeiro passo para identificar a origem do problema. Analisar mensagens de erro nas ferramentas de desenvolvedor do navegador (geralmente na aba Console) pode ajudar a entender qual recurso está sendo bloqueado e o porquê. Mensagens de erro geralmente contêm dicas para resolver o problema. Por exemplo, uma mensagem como "Nenhum cabeçalho 'Access-Control-Allow-Origin' está presente no recurso solicitado" indica um cabeçalho CORS ausente no servidor.

Código de erro	Explicação	Soluções Possíveis
403 Proibido	O servidor entendeu a solicitação, mas a rejeitou.	Verifique a configuração do CORS no lado do servidor. Configure os recursos permitidos corretamente.
Erro interno do servidor 500	Ocorreu um erro inesperado no servidor.	Revise os logs do servidor e identifique a origem do erro. Pode haver um problema com a configuração do CORS.
Erro CORS (Console do navegador)	O navegador bloqueou a solicitação porque a política CORS foi violada.	Defina o cabeçalho 'Access-Control-Allow-Origin' corretamente no lado do servidor.
ERR_CORS_PEDIDO_NÃO_HTTP	As solicitações CORS não são feitas por meio dos protocolos HTTP ou HTTPS.	Certifique-se de que a solicitação seja feita pelo protocolo correto.

Existem vários métodos para resolver erros CORS. O método mais comum é adicionar os cabeçalhos CORS necessários no lado do servidor. ‘'Acesso-Controle-Permitir-Origem'’ O cabeçalho especifica quais recursos têm permissão para acessar o servidor. Definir este cabeçalho como '*' significa permitir todos os recursos, mas, por motivos de segurança, essa abordagem geralmente não é recomendada. Em vez disso, é mais seguro permitir apenas determinados recursos. Por exemplo, 'Access-Control-Allow-Origin: https://example.com' permitirá apenas solicitações de 'https://example.com'.

Aqui estão alguns outros pontos importantes para prevenir e solucionar erros de CORS:

Tipos de Erros
• ‘O cabeçalho 'Access-Control-Allow-Origin' está ausente ou configurado incorretamente: Não definir os cabeçalhos corretos no lado do servidor.
• Problemas de pré-voo: ‘A solicitação 'OPTIONS' não foi tratada corretamente pelo servidor.
• Problemas de credenciais: Cookies ou informações de autenticação não estão sendo enviados corretamente.
• Problemas de roteamento entre recursos: Redirecionamentos que não estão em conformidade com as políticas do CORS.
• Problemas com o servidor proxy: Servidores proxy não encaminham cabeçalhos CORS corretamente.
• Requisito do protocolo HTTPS: Bloqueio de solicitações feitas por meio de conexões HTTP inseguras.

Além das alterações no lado do servidor, alguns ajustes no lado do cliente podem ser feitos para resolver erros de CORS. Por exemplo, pode ser possível redirecionar solicitações usando um servidor proxy ou usar métodos alternativos de troca de dados, como JSONP. No entanto, é importante lembrar que esses métodos podem criar vulnerabilidades de segurança. Portanto, a melhor solução Geralmente, é uma questão de garantir a configuração correta do CORS no lado do servidor.

Melhores práticas do CORS

Recurso de origem cruzada Configurar o CORS corretamente é fundamental para garantir a segurança e a funcionalidade dos seus aplicativos web. Uma política CORS configurada incorretamente pode levar a vulnerabilidades de segurança e permitir acesso não autorizado. Portanto, é importante ter cuidado e seguir as melhores práticas ao implementar o CORS.

Melhores práticas	Explicação	Importância
Limite de origens permitidas	Acesso-Controle-Permitir-Origem Indique apenas domínios confiáveis no cabeçalho. * Evite o uso.	Aumenta a segurança e previne acesso não autorizado.
Use informações de identidade quando necessário	Para enviar informações de identificação pessoal, como cookies ou cabeçalhos de autorização Acesso-Controle-Permitir-Credenciais: verdadeiro usar.	Fornece acesso a recursos que exigem autenticação.
Gerencie solicitações de comprovação adequadamente	OPÇÕES processar solicitações corretamente e incluir os cabeçalhos necessários (Métodos de permissão de controle de acesso, Acesso-Controle-Permitir-Cabeçalhos) fornecer.	Solicitações complexas (por exemplo, ÍDOLO, EXCLUIR) garante que isso seja feito com segurança.
Lide com mensagens de erro com cuidado	Relate erros CORS ao usuário de forma significativa e evite expor potenciais vulnerabilidades de segurança.	Melhora a experiência do usuário e reduz riscos de segurança.

Para aumentar sua segurança, Acesso-Controle-Permitir-Origem Evite usar curingas (*) no título. Isso permite que qualquer domínio acesse seus recursos e, potencialmente, permite que sites maliciosos roubem ou manipulem seus dados. Em vez disso, liste apenas domínios específicos nos quais você confia e aos quais deseja permitir acesso.

Etapas da aplicação
1. Determine suas necessidades: esclareça quais domínios precisam de acesso aos seus recursos.
2. Acesso-Controle-Permitir-Origem Configurar cabeçalho: no lado do servidor, liste apenas os domínios permitidos.
3. Gerenciar credenciais: se forem necessários cookies ou cabeçalhos de autorização, Acesso-Controle-Permitir-Credenciais Defina o título corretamente.
4. Processar solicitações de pré-voo: OPÇÕES responder adequadamente às suas solicitações.
5. Crie um mecanismo de tratamento de erros: relate erros CORS ao usuário de maneira descritiva.
6. Teste e monitore: teste regularmente sua configuração CORS e monitore possíveis vulnerabilidades.

Além disso, solicitações de pré-voo Também é importante gerenciá-lo corretamente. Os navegadores podem lidar com algumas solicitações complexas (por exemplo, ÍDOLO ou EXCLUIR (como) antes de enviar para o servidor OPÇÕES envia a solicitação. Seu servidor deve responder corretamente a esta solicitação e Métodos de permissão de controle de acesso E Acesso-Controle-Permitir-Cabeçalhos cabeçalhos. Isso permite que o navegador envie a solicitação real.

É importante testar e monitorar regularmente a configuração do CORS. Experimente diferentes cenários para identificar comportamentos inesperados ou potenciais vulnerabilidades. Você também pode identificar tentativas de acesso não autorizado monitorando os logs do seu servidor. Lembre-se de que criar um aplicativo web seguro é um processo contínuo e requer atualizações e melhorias regulares. Recurso de origem cruzada Ao configurar seus compartilhamentos com essas práticas recomendadas, você pode aumentar significativamente a segurança de seus aplicativos web.

Coisas a considerar ao usar CORS

Recurso de origem cruzada Ao usar o CORS, há várias considerações importantes para garantir a segurança e o funcionamento adequado do seu aplicativo. O CORS é um mecanismo que permite que aplicativos web troquem dados de diferentes fontes, mas, quando configurado incorretamente, pode levar a sérias vulnerabilidades de segurança. Portanto, é importante configurar cuidadosamente as políticas do CORS e seguir etapas específicas para evitar possíveis problemas.

Erros na configuração do CORS podem permitir que dados confidenciais sejam expostos a acessos não autorizados ou que ataques maliciosos sejam realizados. Por exemplo, Acesso-Controle-Permitir-Origem A configuração incorreta do cabeçalho CORS pode resultar na permissão de solicitações de todas as fontes. Isso representa um sério risco de segurança quando apenas solicitações de fontes específicas devem ser permitidas. A tabela a seguir resume erros comuns na configuração do CORS e suas possíveis consequências.

Erro	Explicação	Conclusão
Acesso-Controle-Permitir-Origem: * usar	Permitindo solicitações de todas as fontes.	A vulnerabilidade é que sites maliciosos podem acessar dados.
Acesso-Controle-Permitir-Credenciais: verdadeiro com Acesso-Controle-Permitir-Origem: * usar	Permitindo o envio de credenciais para todos os recursos (bloqueado pelos navegadores).	Comportamento inesperado, autenticação incorreta.
Permitindo métodos HTTP errados	Permitir todos os métodos, enquanto apenas certos métodos como GET ou POST devem ser permitidos.	Vulnerabilidades potenciais, manipulação de dados.
Aceitando títulos desnecessários	Aceitar todos os títulos, desde que sejam aceitos apenas os títulos necessários.	Vulnerabilidades de segurança, transferência desnecessária de dados.

Outro ponto importante a considerar ao usar o CORS é a configuração correta do mecanismo de solicitação de pré-voo. As solicitações de pré-voo são solicitações OPTIONS que os navegadores enviam para verificar as políticas CORS do servidor antes de enviar a solicitação real ao servidor. Se o servidor não responder corretamente a essas solicitações, a solicitação real será bloqueada. Portanto, você deve garantir que seu servidor responda corretamente às solicitações OPTIONS.

Pontos a considerar

• Acesso-Controle-Permitir-Origem Configure o título corretamente. Permita apenas fontes confiáveis.
• Acesso-Controle-Permitir-Credenciais Tenha cuidado ao usar o cabeçalho. Evite usá-lo, a menos que seja necessário.
• Configure corretamente o mecanismo de solicitação de pré-voo. Forneça respostas corretas às solicitações OPTIONS.
• Permita apenas métodos e cabeçalhos HTTP necessários. Bloqueie os desnecessários.
• Atualize regularmente sua configuração do CORS e teste-a em busca de vulnerabilidades.
• Detecte e corrija erros CORS usando ferramentas de depuração.

Usar ferramentas de desenvolvedor de navegador para solucionar erros de CORS é bastante útil. Essas ferramentas podem ajudar a identificar a origem do problema, exibindo erros e avisos relacionados ao CORS. Você também pode verificar os logs do lado do servidor para garantir que suas políticas de CORS estejam sendo implementadas corretamente. Lembre-se de que uma política de CORS configurada corretamente é essencial para fortalecer a segurança do seu aplicativo web e melhorar a experiência do usuário.

Perguntas frequentes

Por que o CORS é importante e como ele impacta o processo de desenvolvimento web?

O CORS aprimora a segurança de sites, impedindo que fontes maliciosas acessem dados confidenciais. Isso ajuda a proteger as informações do usuário e a integridade da aplicação. No desenvolvimento web, ele garante uma experiência segura e estável, garantindo o compartilhamento controlado de recursos entre diferentes domínios. Entender esse mecanismo é fundamental para que os desenvolvedores possam lidar com potenciais vulnerabilidades de segurança e garantir o desenvolvimento tranquilo da aplicação.

Como os navegadores implementam políticas CORS e quais cabeçalhos HTTP são usados nesse processo?

Os navegadores realizam verificações CORS automaticamente quando uma página da web solicita um recurso de outro domínio. Nesse processo, o navegador envia um cabeçalho "Origin" ao servidor. O servidor responde com um cabeçalho "Access-Control-Allow-Origin". O navegador determina se a solicitação é segura comparando os valores desses cabeçalhos. Além disso, cabeçalhos como "Access-Control-Allow-Methods", "Access-Control-Allow-Headers" e "Access-Control-Allow-Credentials" são usados para especificar os métodos, cabeçalhos e credenciais solicitados. A configuração adequada desses cabeçalhos é crucial para evitar problemas de CORS.

Quais são as causas mais comuns de erros CORS e como posso detectá-los?

As causas mais comuns de erros de CORS incluem a configuração incorreta do cabeçalho "Access-Control-Allow-Origin" do servidor, solicitações originadas de portas ou protocolos diferentes, erros de solicitação de pré-voo e processamento incorreto de credenciais. Você pode usar ferramentas de desenvolvedor do navegador para identificar esses erros. As mensagens de erro exibidas na guia Console geralmente indicam a origem do problema de CORS. Você também pode verificar as respostas do servidor relacionadas ao CORS examinando os cabeçalhos HTTP na guia Rede.

'O que é uma "solicitação de pré-voo" e quando ela é acionada?

'Uma solicitação de pré-voo é uma solicitação OPTIONS que o navegador envia ao servidor para perguntar quais métodos e cabeçalhos HTTP usar antes de enviar a solicitação propriamente dita. Essa solicitação é acionada especificamente quando métodos HTTP diferentes de GET e POST (como PUT, DELETE, etc.) são usados ou quando cabeçalhos personalizados são adicionados. O servidor deve fornecer uma resposta CORS correta a essa solicitação de pré-voo, ou a solicitação propriamente dita será bloqueada.

É possível desabilitar ou contornar o CORS e quais são os riscos potenciais?

CORS é um mecanismo de segurança implementado no navegador. Ao configurar os cabeçalhos CORS no servidor, você controla quais recursos podem ser acessados. Desabilitar completamente o CORS geralmente não é recomendado, pois pode deixar seu site vulnerável a diversas vulnerabilidades de segurança. No entanto, durante o desenvolvimento ou em certos cenários de teste, o CORS pode ser temporariamente contornado por meio de plugins do navegador ou servidores proxy. É importante não usar essas soluções alternativas em um ambiente de produção.

Quais são as vulnerabilidades relacionadas ao CORS e quais medidas devemos tomar para preveni-las?

As vulnerabilidades CORS mais comuns incluem a configuração do cabeçalho "Access-Control-Allow-Origin" como "*" (concedendo acesso a todos), permitindo que sites maliciosos acessem as credenciais. Para evitar essas vulnerabilidades, você deve restringir o cabeçalho "Access-Control-Allow-Origin" apenas aos domínios permitidos, usar o cabeçalho "Access-Control-Allow-Credentials" com cautela e implementar medidas de segurança adicionais no lado do servidor (por exemplo, proteção contra CSRF).

Quais abordagens estão disponíveis para configuração do CORS no lado do servidor e como posso escolher a abordagem mais apropriada?

Existem diferentes abordagens para configurar o CORS no lado do servidor. Elas incluem a configuração manual de cabeçalhos HTTP, o uso de middleware CORS ou a configuração de um servidor web (por exemplo, Nginx ou Apache). A abordagem mais adequada depende das necessidades da sua aplicação, da tecnologia utilizada e da infraestrutura do seu servidor. Embora o uso de middleware normalmente ofereça uma solução mais flexível e gerenciável, a configuração manual de cabeçalhos pode ser suficiente para aplicações simples.

Como devo gerenciar as configurações do CORS em diferentes ambientes (desenvolvimento, teste, produção)?

Você pode usar variáveis de ambiente ou arquivos de configuração para gerenciar as configurações do CORS em diferentes ambientes. Em um ambiente de desenvolvimento, você pode usar configurações mais flexíveis (por exemplo, "Access-Control-Allow-Origin: *") para reduzir erros do CORS, mas nunca deve usar essas configurações em um ambiente de produção. Em um ambiente de teste, você deve usar configurações do CORS mais rígidas que imitem o ambiente de produção. Em um ambiente de produção, você deve usar a configuração mais segura, restringindo o cabeçalho "Access-Control-Allow-Origin" apenas aos domínios permitidos. Isso pode ser feito criando arquivos de configuração separados para cada ambiente ou usando variáveis de ambiente.

Mais informações: Saiba mais sobre o CORS