Como funciona o Compartilhamento de Recursos para Domínios Cruzados

Há alguns meses atrás me deparei com um problema muito peculiar. Acredito que muitos desenvolvedores de front-end já devem tê-lo enfrentado, pois ele ocorre geralmente com chamadas ajax no javasrcipt.

O Cross-origin resource sharing(ou compartilhamento de recursos de origem cruzada), é a especificação de segurança implementada pelos browsers de um mecanismo que permite (ou impede) que javacsript busque recursos de qualquer tipo via XMLHttpRequest em um domínio ao qual ele não está inserido [1]. Exemplo:

Suponha que a MATERA deseje buscar alguns dados da pagina inicial da Wikipedia e adicioná-los em nossas paginas, o código da Listagem 1 será implementado.

$.ajax({
type : 'GET',
timeout : '60000',
scriptCharset : "utf-8",
contentType : "text/html; charset=UTF-8",
url : "htto://www.wikipedia.com.br",
success : callback, /*Função executada caso a chamada seja concluida com sucesso*/
error : function(jqXHR, textStatus, errorThrown) {
console.error("Some message of error here");
},
dataType : 'html'
});

Listagem 1 – Codigo ajax que faz uma chamada GET para a pagina inicial da Wikipedia

O código acima é um exemplo de requisição a um domínio cruzado, pois estamos trabalhando no dominio “www.matera.com” e requisitando um recurso de “wikipedia.com.br”. A chamada ajax na Listagem 1 obterá sucesso caso seus servidores estejam configurados para distribuir seus recursos a outros domínios. Caso contrário, receberemos uma mensagem de erro parecida com a da Figura 1:

no-headeer

Figura 1 – Erro indicando a ausencia da header Access-Control-Allow-Origin.

E é para evitar este tipo de erro que este post foi criado, vamos lá então!

O CORS como dito anteriormente, é uma especificação de segurança implementada pelos browsers, como ele funciona, quando uma chamada ajax é feita a um domínio fora do domínio atual, o browser espera receber um header nos Response Headers chamado: Access-Control-Allow-Origin.

O que este header armazena?

R: Ora, ele armazena todos os domínios que tem permissão de acessar aqueles recursos.

Neste momento o browser verifica se o seu domínio faz parte dos domínios contidos neste header, caso seu domínio esteja contido, o navegador “dá carta branca” e permite que o recurso buscado seja baixado, caso contrário, ele impede o recurso de ser baixado e lança um erro.

Agora já sabemos como o CORS funciona, podemos adicioná-lo ao nosso site das seguintes maneiras:

  • Em servidores NGINX, basta adicionar o pequeno trecho de código da Figura 2 nas configurações.

header nginx

Figura 2 – Código adicionado nas configurações do NGINX para adicionar a header

  • A partir da versão 7.0.41 do Apache Tomcat, é possível também configurar este header, para isso basta adicionar um filter no arquivo $CATALINA_BASE/conf/web.xmlcomo mostrado na Listagem 2.
<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern><!-- DOMINIOS AQUI --></url-pattern>
</filter-mapping>

Listagem 2 – Configuração do CORS no Apache Tomcat

Pronto! Agora você desenvolvedor, principalmente os de front-end, sabe como funciona e também como habilitar este recurso de segurança.

Você pode encontrar nos links com as referências algumas outras maneiras de configurar este header.

Referências

[1] http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Links Externos

[1] Enable CORS

[2] Tomcat CORS Configuration

Por LUIS BELIGANTE

Postado em: 22 de abril de 2014

Confira outros artigos do nosso blog

REST não é JSON

21 de agosto de 2017

Bruno Sofiato

[Webinar] Profile de aplicações Java com Oracle Mission Control e Flight Recorder

24 de julho de 2017

Danival Calegari

Criando Mocks de serviços REST com SoapUI

27 de junho de 2017

Monise Costa

JavaScript 6: diferença entre var, let e const

09 de maio de 2017

Otávio Felipe do Prado

Deixe seu comentário