Introdução ao CORS para iniciantes

Pensando no que é o CORS (compartilhamento de recursos de origem cruzada)?


Nos filmes de espionagem, os agentes de segurança têm uma maneira codificada de transmitir informações entre si. Como eles transmitem principalmente informações que podem ser usadas contra eles se cair nas mãos de seus inimigos, eles precisam garantir que aqueles que estão recebendo as informações sejam partes confiáveis. O mesmo se aplica àqueles que estão enviando essas informações. Quando o remetente e o destinatário são confiáveis, a credibilidade e a segurança das informações podem ser garantidas.

https://pt.slideshare.net/atirekgupta/selenium-workshop-34820044

Uma réplica desse cenário ocorre na comunicação entre navegadores e servidores da web e é chamada de política de mesma origem.

De acordo com a MDN:

política de mesma origem é um mecanismo de segurança crítico que restringe como um documento ou script carregado de uma origem pode interagir com um recurso de outra origem. Ajuda a isolar documentos potencialmente maliciosos, reduzindo possíveis vetores de ataque.

O que é o CORS?

Em um caso da vida real, quando os agentes de segurança estabelecem uma regra de que a comunicação só deve ocorrer entre os agentes como um meio de segurança, semelhante à política de mesma origem. No entanto, pode haver casos em que eles precisem interagir com o mundo exterior. Ou com operadores de outras roupas de segurança, para que isso aconteça, eles podem implementar outra medida de segurança para verificar aqueles agentes. Essa verificação pode ocorrer de diferentes maneiras, dependendo dos agentes envolvidos. No caso de comunicação na Internet, CORS é o mecanismo que possibilita que os navegadores acessem recursos aos quais originalmente não poderão, porque o recurso é de origem diferente.

O CORS (Cross-Origin Resource Sharing) é um mecanismo que usa cabeçalhos HTTP adicionais para instruir os navegadores a fornecerem um aplicativo Web em execução em uma origem, acesso a recursos selecionados de uma origem diferente.

Já falei sobre origem mais de uma vez e você provavelmente está se perguntando o que isso significa. Uma origem é definida pelo protocolo, domínio e porta da URL. Quando você tem sua API em uma origem como https://api.geekflare.com:3001 e seu front-end em https://geekflare.com, as origens são consideradas diferentes. Nessa situação, você precisará do CORS para acessar recursos nas duas extremidades.

Quando as solicitações são feitas para um servidor, os navegadores (cliente) e os servidores enviam solicitações e respostas, os cabeçalhos HTTP são incluídos. Entre esses cabeçalhos, cabeçalhos adicionais são incluídos para impedir que o navegador bloqueie a comunicação.

Por que o navegador bloqueará a comunicação?

Seus recursos de segurança do navegador. Isso será feito se a solicitação for proveniente de uma origem diferente da do cliente. Os cabeçalhos adicionais incluídos como resultado do CORS são uma maneira de informar ao cliente que ele pode fazer uso da resposta que recebeu.

Cabeçalhos CORS

Um dos cabeçalhos seguros que pode ser um cabeçalho de resposta ou solicitação.

Cabeçalhos de resposta

Estes são os cabeçalhos que o servidor envia de volta em sua resposta.

  • Access-Control-Allow-Origin:: É usado para especificar a origem permitida para acessar o recurso no servidor. É possível especificar que apenas solicitações de uma origem específica sejam permitidas – Access-Control-Allow-Origin: https://geekflare.com, ou que a origem não importe – Access-Control-Allow-Origin: *.
  • Access-Control-Expose-Headers:: como o nome indica, lista os cabeçalhos aos quais o navegador tem acesso.
  • Access-Control-Max-Age:: indica a duração pela qual a resposta de uma solicitação de comprovação pode ser armazenada em cache.
  • Access-Control-Allow-Credentials:: indica que o navegador pode fazer uso da resposta quando a solicitação inicial foi feita com uma credencial.
  • Métodos de controle de acesso e controle de acesso:: indica o (s) método (s) permitido (s) ao tentar acessar um recurso.
  • Access-Control-Allow-Headers:: Indica que os cabeçalhos HTTP podem ser usados ​​em uma solicitação.

Aqui está um exemplo de como será a resposta

HTTP / 1.1 204 Sem Conteúdo
Controle de acesso – permissão de origem: *
Métodos de controle de acesso e permissão: GET, HEAD, PUT, PATCH, POST, DELETE
Variar: cabeçalhos de solicitação de controle de acesso
Controle de acesso – Permitir cabeçalhos: tipo de conteúdo, aceitar
Comprimento do conteúdo: 0
Data: sábado, 16 de novembro de 2019 11:41:08 GMT + 1
Conexão: keep-alive

Cabeçalhos de solicitação

Aqui estão os cabeçalhos que a solicitação de um cliente deve conter para fazer uso do mecanismo CORS.

  • Origem: indica a origem da solicitação do cliente. Ao trabalhar com um front-end e back-end, conforme declarado anteriormente, este será o host do seu aplicativo de front-end.
  • Método de solicitação de controle de acesso:: é usado em uma solicitação de comprovação para indicar o método HTTP que será usado para fazer a solicitação.
  • Access-Control-Request-Headers:: É usado em uma solicitação de comprovação para indicar os cabeçalhos HTTP que serão usados ​​para fazer a solicitação.

Aqui está um exemplo de como será uma solicitação

curl -i -X ​​OPÇÕES host local: 3001 / api \
-H ‘Método de solicitação de controle de acesso: GET’ \
-H ‘Cabeçalhos de solicitação de controle de acesso: tipo de conteúdo, aceitação’ \
-H ‘Origem: http: // localhost: 3000’

Solicitações de comprovação

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Depois de mencionar solicitações de comprovação aqui e ali, o que isso poderia significar?

Solicitações de comprovação ocorrem quando o cliente precisa enviar uma solicitação de comprovação antes da solicitação principal. A solicitação de comprovação é mais uma sonda para determinar se o servidor suporta a solicitação principal que está prestes a ser feita. Quando a confirmação positiva é obtida, a solicitação principal é enviada.

Quando uma solicitação não é uma solicitação de comprovação, é chamada de pedido simples.

Implementando o CORS

Você principalmente deseja configurar as coisas no back-end do seu aplicativo. A implementação depende da estrutura que você está usando. Para este tutorial, veremos como fazê-lo no NodeJS e no Rails.

Trilhos

Eu recomendo que você use o rack-cors gema. Você precisará adicionar isso ao seu arquivo config / application.rb.

config.middleware.insert_before 0, Rack :: Cors do
permitir fazer
origens ‘*’
recurso ‘*’,
cabeçalhos: qualquer,
expor:% i (cliente uid do tipo de token de expiração do token de acesso),
métodos:% i (obtenha as opções de exclusão de correção pós-colocação),
credenciais: true
fim
fim

NodeJS

No Node.js, será assim.

app.all (‘*’, (req, res, próximo) => {
res.header (‘Controle de acesso-permitir-origem’, ‘*’);
res.header (“Métodos de permissão de controle de acesso”, “PUT, GET, POST, DELETE, PATCH, OPTIONS HEAD”);
res.header (‘Controle de acesso – permitir cabeçalhos’, ‘*’);
res.header (‘Controle de acesso-permitir credenciais’, verdadeiro);
Próximo();
});

No snippet de código, estamos configurando a origem, métodos, cabeçalhos e credenciais que devem ter permissão para acessar os recursos disponíveis em nosso servidor. Você também pode fazer o checkout Sqreen que fornece um módulo de cabeçalhos de segurança para ser integrado aos aplicativos Ruby, PHP, Python, Java, Go, Node.JS. E para implementar no Apache ou Nginx, consulte este guia.

Conclusão

O CORS relaxa a política para que seu navegador possa acessar os recursos que você deseja. Compreender o que é, por que é essencial e como configurá-lo ajudará a descobrir os problemas que você pode enfrentar ao criar seus aplicativos da web.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map