O que é Origem web?

A identificação usada para isolar páginas

Para URLs HTTP e HTTPS, origem web é a combinação de esquema, host e porta. O navegador usa essa identificação para aplicar restrições entre documentos e serviços. Caminho, consulta e fragmento não fazem parte dessa combinação.

Duas páginas em https://example.com podem ter caminhos diferentes e continuar na mesma origem. Já https://app.example.com usa outro host e, portanto, outra origem. Compartilhar o mesmo domínio principal não torna os endereços equivalentes para essa comparação.

No desenvolvimento local, as portas também importam. Uma interface em http://localhost:3000 e uma API em http://localhost:8000 pertencem a origens diferentes. Isso explica por que uma chamada local pode exigir configuração de CORS.

Como comparar duas URLs

https://example.com/contatos     → mesma origem
https://example.com:443/contatos → mesma origem
http://example.com/contatos      → esquema diferente
https://api.example.com/contatos → host diferente
https://example.com:8443/contatos → porta diferente

Como 443 é a porta padrão de HTTPS, os dois primeiros endereços do exemplo têm a mesma origem. O navegador normaliza essa informação ao calcular location.origin, que você pode consultar na página aberta para conferir o valor utilizado.

A comparação considera o host completo, portanto acrescentar www também muda a origem. Um site pode redirecionar entre o endereço com esse prefixo e o endereço sem ele. Nesse caso, confira a URL final para identificar a origem da página efetivamente carregada.

O que a política de mesma origem restringe

A política limita como um documento ou script pode interagir com recursos de outra origem. Uma página não recebe acesso irrestrito ao conteúdo de outra apenas por conhecer seu endereço. Para leitura de respostas de APIs por JavaScript, CORS permite ao servidor declarar autorizações específicas.

Isso não impede toda comunicação entre origens. Você pode seguir um link para outro site sem conceder ao script da página anterior acesso irrestrito ao conteúdo do destino. Da mesma forma, conseguir enviar uma requisição não equivale a poder ler sua resposta pelo código da página.

Origem e site não são sinônimos

Na comparação de site usada por SameSite, o navegador considera o esquema e o domínio registrável. Por exemplo, https://app.example.com e https://api.example.com pertencem ao mesmo site, mas têm origens diferentes porque seus hosts diferem. A explicação de site na MDN detalha essa distinção.

Pertencer ao mesmo site não faz todo cookie circular entre os subdomínios. Um cookie definido por app.example.com sem o atributo Domain fica restrito a esse host. Ele não é enviado a api.example.com apenas porque ambos pertencem a example.com. Confira o escopo definido por Set-Cookie, além de SameSite.

Cookies também não são isolados por porta da mesma forma que a origem. Por isso, verificar somente location.origin não explica todos os casos de envio ou ausência de cookies. Você precisa conferir os atributos e as políticas aplicadas pelo navegador.

Como investigar uma diferença

Compare o esquema, o host e a porta efetiva da página com os do serviço. Confira também redirecionamentos e o endereço final. Em seguida, examine a requisição na aba Network para identificar as origens envolvidas.

Quando a leitura da resposta for recusada, consulte CORS para entender os cabeçalhos exigidos. Para problemas de sessão, examine também os atributos do cookie, pois a origem é apenas uma parte da análise.

Aplicação na formação

Vibe Coding: Do Zero ao MVP

A origem identifica o esquema, o host e a porta considerados pelo navegador ao isolar o acesso entre páginas.

Conhecer a formação →