Como usar CORS com Nginx

O que é CORS

CORS, também conhecido como compartilhamento de recursos de origem cruzada, é uma técnica usada em navegadores modernos que controla o acesso a recursos hospedados em um servidor web. O CORS usa cabeçalhos adicionais, como origin, access-control-origin e muitos mais para determinar se o recurso solicitado tem permissão para ser enviado ao navegador. O objetivo principal do CORS é evitar que um aplicativo da web em execução em um navegador da web acesse recursos hospedados em uma origem diferente quando não há permissão, o que significa que o aplicativo da web não pode baixar recursos, como imagens, scripts, css como qualquer conteúdo etc. quando eles não estão hospedados na mesma origem (geralmente todos devem estar no mesmo domínio) que o aplicativo da web, a menos que o servidor esteja configurado para permitir esse comportamento. Ao ter essa implementação em um navegador da web, os usuários podem proteger seus dados de partes não autorizadas. Um hacker pode modificar secretamente uma página da web enquanto está no meio da conexão para interromper os negócios do usuário ou obter acesso a dados valiosos. No entanto, também existem vantagens do CORS, como permite que os desenvolvedores carreguem recursos de uma origem diferente devido ao custo-benefício ou simplesmente à conveniência. Nesse caso, eles têm que modificar seu servidor web para permitir tais solicitações. Este artigo demonstra como fazer isso em um servidor da web Nginx com facilidade.

O que dispara uma solicitação CORS

Nem todas as solicitações acionam uma solicitação CORS, pois geralmente os recursos são hospedados na mesma origem que o aplicativo da web. Se for diferente, o CORS é acionado. O CORS tem dois tipos de solicitações, solicitação simples e solicitação pré-veiculada do CORS.

A Solicitação Simples funciona como uma solicitação normal, o navegador da web envia uma solicitação ao servidor para baixar um recurso específico quando o usuário o inicia, o servidor da web verifica a origem da solicitação, compara-a com as regras no servidor da web, se for correspondido, o recurso é fornecido. Este tipo de solicitação usa cabeçalhos OIRIGN e ACCESS-CONTROL-ALLOW-ORIGIN para determinar se o recurso deve ser fornecido ou não. A solicitação simples só é acionada se métodos de solicitação como GET, HEAD, POST são usados, e cabeçalhos como Aceitar, Aceitar-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width são usados. Mesmo assim, nem todos os tipos de conteúdo acionam uma solicitação simples. Aqui, apenas os tipos de codificação de formulário acionam uma solicitação simples.

O tipo de solicitação pré-veiculada é bastante diferente, pois não há acesso direto aos recursos na primeira rodada. Quando as condições acima mencionadas são alteradas de alguma forma, usando um cabeçalho de solicitação diferente ou um tipo de conteúdo diferente, uma solicitação pré-veiculada é acionada. Em solicitações pré-veiculadas, o navegador da web primeiro se certifica de que pode acessar o recurso se comunicando com o navegador da web e, em seguida, quando o navegador da web responde com uma resposta ok (HTTP 200), ele envia outra solicitação para baixar o recurso. Ele utiliza o método de solicitação HTTP OPTION para iniciar a primeira solicitação, em seguida, usa os tipos de solicitação GET e POST para baixar os recursos.

Como configurar o Nginx para oferecer suporte a solicitações CORS

Esta seção demonstra como configurar um servidor da web nginx para permitir o compartilhamento de recursos de origem cruzada. Isso só pode ser feito se o desenvolvedor tiver acesso ao servidor web, pois envolve a modificação do arquivo de configuração do Nginx.

Use o seguinte snippet de código simples para permitir solicitações CORS. Isso deve ser copiado para o arquivo padrão do serviço nginx no Ubuntu ou qualquer outra plataforma.

localização \
if ($ request_method = 'OPTIONS')
add_header 'Access-Control-Allow-Origin' 'https: // localhost;
add_header 'Access-Control-Allow-Methods "POST, OPTIONS';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type "text / plain; charset = utf-8';
return 204;

if ($ request_method = 'POST')
add_header 'Access-Control-Allow-Origin "https: // localhost;
add_header 'Access-Control-Allow-Methods' 'POST';

O trecho de código básico é como acima. Ele contém diretivas como request_method, add_header para identificar o tipo de solicitação e definir o cabeçalho da resposta para o navegador ler, respectivamente. O cabeçalho Access-control-allow-origin define a que origem o recurso tem acesso, por exemplo, se um aplicativo da web hospedado no github deseja acessar uma imagem hospedada em myOwnServer.com, então a URL do github deve ser usada como o valor da diretiva Access-control-allow-origin em myOwnServer.com, então, sempre que o aplicativo da web hospedado no github enviar solicitações para myOwnServer.com para baixar o arquivo de imagem, todos estes solicitados têm permissão. O cabeçalho Access-control-allow-method define quais tipos de solicitação o aplicativo da web que envia as solicitações suporta, então o resto dos cabeçalhos são para sua idade máxima para armazenar as solicitações e o tipo de conteúdo suportado.

Conforme descrito acima, uma vez que a solicitação OPTION foi concluída, o navegador envia outra solicitação para baixar os recursos se a primeira solicitação foi bem-sucedida, seus cabeçalhos são definidos no primeiro request_method se colchetes.

Além das diretivas mencionadas, existem algumas outras diretivas importantes no Nginx que podem ser usadas em solicitações CORS. Uma das diretivas mais importantes é access-control-allow-headers, o que faz é definir o cabeçalho de resposta com nomes de cabeçalho permitidos para o navegador verificar. Um aplicativo da web pode ter seus próprios cabeçalhos para vários fins e, se tais cabeçalhos estiverem presentes nas solicitações subsequentes após a solicitação inicial OPTIONS, todos esses cabeçalhos devem ser permitidos pelo servidor da web antes que o recurso solicitado seja compartilhado.

É importante que este trecho de código esteja no lugar certo no arquivo padrão Nginx, porque o Nginx executa blocos de localização diferentes dependendo da URL correspondida, se tal bloco de localização não contiver este trecho de código, então ele não é executado, e, portanto, é importante usar isso em todos os blocos de localização para o lado seguro. Alguns dos blocos de localização importantes são Imagens, PHP (~ \.php $), CSS, etc ... blocos.

Assim que o fragmento de código mencionado acima for salvo, salve o arquivo Nginx e recarregue o serviço Nginx para que as alterações tenham efeito.

Conclusão

CORS, é conhecido como compartilhamento de recursos de origem cruzada e é uma técnica para controlar o acesso de recursos. Esses recursos podem ser qualquer arquivo de imagem a um arquivo javascript. O objetivo principal do CORS é aumentar a segurança dos aplicativos da web para evitar ataques man in the middle. No entanto, o CORS também pode ter benefícios. Nesse caso, o CORS deve ser ligado, pois não é permitido por padrão. O tipo de solicitação CORS básico é o tipo de solicitação simples, ele usa apenas as diretivas ORIGIN e ACCESS-CONTROL-ALLOW-ORIGIN, e com essa ajuda o Nginx pode conceder permissão para o navegador da web acessar o recurso solicitado dependendo da origem. De qualquer forma, o CORS é bastante útil e deve ser usado com cuidado.