Thiago Honorato

Posted on May 30

Entenda o que é CORS (Cross-Origin Resource Sharing)

#webdev #frontend #security #braziliandevs

Introdução

No desenvolvimento web moderno, é comum que aplicações precisem interagir com recursos hospedados em diferentes domínios. No entanto, devido a preocupações de segurança, navegadores implementam uma política de mesma origem (Same-Origin Policy), que restringe como documentos ou scripts carregados de uma origem podem interagir com recursos de outra. O CORS (Cross-Origin Resource Sharing) é um mecanismo que permite que servidores indiquem de forma segura quais origens têm permissão para acessar seus recursos.

O que é CORS?

CORS é um conjunto de cabeçalhos HTTP que permitem que um servidor indique quais origens são permitidas a acessar recursos no servidor. Quando uma aplicação cliente (como um navegador) faz uma solicitação a um recurso hospedado em um domínio diferente, o navegador envia uma solicitação de pré-verificação (preflight request) para o servidor, perguntando se a origem da aplicação tem permissão para acessar o recurso.

Funcionamento do CORS

Solicitação de Pré-Verificação (Preflight Request)

Para determinadas solicitações (especialmente aquelas que não são consideradas "simples"), o navegador primeiro envia uma solicitação de pré-verificação usando o método HTTP OPTIONS. Esta solicitação inclui cabeçalhos como:

Origin: Indica a origem do pedido.
Access-Control-Request-Method: O método HTTP que será usado na solicitação real.
Access-Control-Request-Headers: Os cabeçalhos HTTP que serão enviados na solicitação real.

Resposta à Pré-Verificação

O servidor responde à solicitação de pré-verificação com cabeçalhos que indicam se a solicitação real é permitida:

Access-Control-Allow-Origin: Indica quais origens podem acessar o recurso. Pode ser um domínio específico ou um asterisco (*) para permitir todas as origens.
Access-Control-Allow-Methods: Lista os métodos HTTP permitidos (como GET, POST, PUT, DELETE).
Access-Control-Allow-Headers: Lista os cabeçalhos que podem ser usados na solicitação real.
Access-Control-Allow-Credentials: Indica se as credenciais (como cookies) podem ser incluídas na solicitação.
Access-Control-Max-Age: Indica por quanto tempo a resposta de pré-verificação pode ser armazenada em cache pelo navegador.

Solicitações Simples

Solicitações consideradas "simples" pelo padrão CORS não exigem pré-verificação. Para uma solicitação ser simples, deve usar um dos métodos GET, POST ou HEAD e deve conter apenas cabeçalhos seguros como Accept, Content-Type (com certos valores), entre outros.

Exemplos de Cabeçalhos CORS

Configuração de um Servidor com Permissão para Uma Origem Específica

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type

Configuração de um Servidor para Permitir Todas as Origens

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type

Permissão para Credenciais

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Credentials: true

Implementação no Lado do Servidor

Exemplo em Node.js com Express

const express = require('express');
const cors = require('cors');
const app = express();

const corsOptions = {
  origin: 'https://example.com',
  methods: ['GET', 'POST'],
  allowedHeaders: ['Content-Type'],
  credentials: true
};

app.use(cors(corsOptions));

app.get('/data', (req, res) => {
  res.json({ message: 'This is CORS-enabled for https://example.com' });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Conclusão

CORS é um mecanismo essencial para permitir interações seguras entre origens diferentes na web. Entender como configurar e utilizar CORS corretamente pode melhorar a segurança e funcionalidade das suas aplicações web. Espero que este artigo tenha esclarecido os fundamentos do CORS e fornecido um ponto de partida para sua implementação.

DEV Community