Banco de dúvidas
O que é o CORS?
Adaptado de: https://developer.mozilla.org/pt-BR/docs/Web/HTTP/CORS
CORS, ou Cross-Origin Resource Sharing (compartilhamento de recursos com origens diferentes), é um mecanismo que usa cabeçalhos HTTP adicionais para permitir que um aplicativo da web seja executado em um domínio e acesse recursos de um servidor em um domínio diferente. Um aplicativo Web executa uma requisição HTTP cross-origin ao solicitar um recurso que tenha uma origem diferente (domínio, protocolo ou porta) da sua própria origem.
Um exemplo de requisição cross-origin: o código JavaScript frontend de um aplicativo web disponível em https://dominio-a.com.br usa a API XMLHttpRequest para fazer uma requisição para https://api.dominio-b.com.br/data.json.
Por motivos de segurança, navegadores restringem requisições HTTP cross-origin iniciadas por scripts. Por exemplo, as APIs XMLHttpRequest e Fetch seguem a política de mesma origem (same-origin policy). Isso significa que um aplicativo web que faz uso dessas APIs só poderá fazer solicitações para recursos da mesma origem de onde o aplicativo foi carregado, a menos que a resposta da outra origem inclua os cabeçalhos CORS corretos.
O mecanismo CORS ajuda a combater:
- Ataques de Cross-Site Request Forgery (CSRF): definindo quais as origens de acesso permitidas evita que conteúdo malicioso engane o browser a realizar ações não autorizadas em outros sites;
- Ataques de Cross-Site Scripting (XSS): scripts maliciosos injetados em sites que interagem com recursos em domínios diferentes têm suas solicitações bloqueadas;
- Vazamento de dados confidenciais: sem o CORS, um site malicioso poderia acessar dados confidenciais como cookies de outros domínios, o que é uma séria preocupação de segurança. O CORS impede que solicitações cruzadas acessem tais informações;
- Roubo de conteúdo: impede que sites não autorizados acessem e incorporem recursos, como imagens, vídeos e scripts, de outros domínios. Isso evita o roubo de conteúdo protegido por direitos autorais.
Como definir os cabeçalhos em seu site
É importante notar que a configuração do CORS deve ser feita no lado do servidor. Porém, geralmente não é necessário definir cabeçalhos CORS em seu site, a não ser que você queira que scripts ou outros recursos protegidos pela política de mesma origem venham a ser usados em outros sites.
Dito isso, a maioria das linguagens de programação e hospedagens web oferece suporte para a configuração dos cabeçalhos necessários. Por exemplo, através do arquivo .htaccess você pode configurar o cabeçalho Access-Control-Allow-Origin e, opcionalmente, o Access-Control-Allow-Methods e Access-Contro-Allow-Headers para definir as restrições.
Header set Access-Control-Allow-Origin "https://dominio-permitido.com.br, https://outro-dominio.com" Header set Access-Control-Allow-Methods "GET, POST, OPTIONS" Header set Access-Control-Allow-Headers "X-Requested-With, Content-Type"
Onde "https://dominio-permitido.com.br, https://outro-dominio.com" seria a lista das origens de confiança para suas imagens, recursos e scripts do seu site.
Num script PHP, a função header() no início do script pode ser usada para definir esses cabeçalhos:
<?php // Definindo os cabeçalhos do CORS para permitir acesso de origens específicas header("Access-Control-Allow-Origin: https://dominio-permitido.com.br, https://outro-dominio.com"); header("Access-Control-Allow-Methods: GET, POST, OPTIONS"); header("Access-Control-Allow-Headers: X-Requested-With, Content-Type"); // Verificando a solicitação HTTP if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') { // Responder a solicitações de preflight (verificação prévia) com um status 200 OK header("HTTP/1.1 200 OK"); exit; } // Restante do código …
O código acima também verifica se a solicitação é do tipo OPTIONS e responde com um status 200 OK, como parte do processo CORS. O restante do código pode ser colocado abaixo desses cabeçalhos, permitindo que sua aplicação responda a solicitações CORS de forma correta.