É uma dica simples mas que pode ser muito útil naquele checklist de configurações do Apache inclusive em servidores de desenvolvimento.
Atualmente a utilização de Cross-Origin nas requisições HTTP são parte da primeira rotina de testes da infra em geral.
Uma dificuldade que encontramos é que isso nem sempre está presente no ambiente de desenvolvimento e acaba causando uma sensação de um falso positivo quando a aplicação é enviada para ambiente de homologação pois até o momento anterior “na minha máquina funcionava”.
Mas o que é o Cross-Origin?
Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any other origins (domain, scheme, or port) than its own from which a browser should permit loading of resources. CORS also relies on a mechanism by which browsers make a “preflight” request to the server hosting the cross-origin resource, in order to check that the server will permit the actual request. In that preflight, the browser sends headers that indicate the HTTP method and headers that will be used in the actual request.
– Mozilla Developer Network
Isso vale para requisições do navegador (client) para qualquer outro domínio diferente da origem seja uma imagem dentro da tag <img src=”destino” /> bem como para requisições javascript com fetch ou jQuery Ajax, por exemplo.
Geralmente, o erro vem com a mensagem “Reason: CORS header ‘Access-Control-Allow-Origin’ missing”
Existem duas soluções simples e muitas vezes adotadas por desenvolvedores sendo:
- Ir no servidor web ou na requisição específica e adicionar Header Access-Control-Allow-Origin: dominio.com.br
- Ir no servidor web ou na requisição específica e adicionar Header Access-Control-Allow-Origin: *
Nem sempre funcionar quer dizer que está bom
O que muita gente não sabe é que se estiver fazendo requisições Cross-Origin e nenhum problema estiver sendo apresentado é porque esta configuração no destino está permitindo a requisição de qualquer um, o famoso header “Access-Control-Allow-Origin: *”
Isso quer dizer que qualquer um poderia requisitar recursos da sua origem por meio de um navegador em outro domínio.
E segundo boa parte dos especialistas e ferramentas de segurança: isso deveria ser evitado.
Desde a requisição até a resposta o fluxo em si passa por muitas camadas. Um servidor web tradicional, por exemplo, passaria por um servidor web Apache ou Nginx e posteriormente pelo PHP e portante qualquer um dos dois poderia incluir na resposta http um cabeçalho com as informações do Cross-Origin. E claro que estou pressupondo aqui o PHP para fazer isso com requisições dinâmicas.
Uma solução legal dentro do próprio servidor Apache
Ao fazer isso na camada do Servidor Web, como no caso do Apache, você pode deixar o fluxo mais simples e eficaz.
Contudo, tem uma coisa importante: Access-Control-Allow-Origin até aceita wildcard como *.seudominio.com mas não aceita lista.
E para isso, uma busca acertada no StackOverflow mostra uma saída com Apache bem legal.
<IfModule mod_headers.c>
SetEnvIf Origin "http(s)?://(www\.)?(google.com|staging.google.com|development.google.com|otherdomain.example|dev02.otherdomain.example)$" AccessControlAllowOrigin=$0
Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
Header merge Vary Origin
</IfModule>Caso queira fazer isso para um tipo de arquivo específico ou localização específica, ainda pode usar outra regra anteriormente:
<FilesMatch "\.(ttf|otf|eot|woff|woff2)$"> <IfModule mod_headers.c> SetEnvIf Origin "http(s)?://(www\.)?(google.com|staging.google.com|development.google.com|otherdomain.example|dev02.otherdomain.example)$" AccessControlAllowOrigin=$0 Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin Header merge Vary Origin </IfModule> </FilesMatch>
Conclusão
É possível fazer uma lista de domínios para aceitar suas requisições sem demandar muitas manobras e deixar o servidor de desenvolvimento com diretrizes que ainda que não sejam as mesmas, estejam bem alinhadas com Cross-Origin.
Se curtiu, compartilhe seu comentário nas redes sociais e marque a Vivaweb<>
