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.

Este artigo foi útil para você?