Introdução:

Nesta página irei explicar o conceito de Same-Origin Policy que é um mecanismo muito importante para web que nos ajuda a manter a segurança em diversos casos, como solicitar um recurso de uma origem diferente, por exemplo. Sem mais delongas.

O que é Same-Origin Policy?

Same-Origin Policy é um mecanismo que restrige o acesso de um script ou documento carregado de uma origem se comporta em relação a recursos de outra origem.

Uma origem é definida combinando o URL scheme, port e host name. Duas URL são as mesmas se o protocolo, port (se definida) e o host forem os mesmo. Isso é referido como "scheme/host/port tuple" ou simplesmente "tuple"

Esse mecanismo é implementado pelo os navegadores para prevenir scripts maliciosos ao pedir/requisitar recursos de uma outra página web usando Document Object Model (DOM)

Definição de uma origem:

Vamos agora comparar uma origem com outras para ficar mais claro a diferença entre elas. Vamos supor que a nossa origem é: http://store.company.com/dir/page.html:

URL	Resposta	Reação
http://store.company.com/dir2/other.html	mesma origem	apenas caminhos diferentes
http://store.company.com/dir/inner/another.html	mesma origem	apenas caminhos diferentes
https://store.company.com/page.html	falha	protocolo diferente
http://store.company.com:81/dir/page.html	falha	porta diferente, o padrão é 80
http://news.company.com/dir/page.htm	falha	Host diferente

E com isso espero ter clareado mais sobre esse tópico. Esses links e exemplos foram tirados direto da documentação.

Origens herdas:

É muito comum de acontecer que uma origem seja herdada pois possui o mesmo protocolo, o mesmo host e etc. Páginas com um about:blank ou javascript: URL herdam a origem pois eles são vazias e não tem informações de si próprias. about:blank e javascript: são um tipo especial de URL que não entrei a fundo.

File origins:

Esse tópico se encaixa em casos onde utilizamos o esquema file:/// para buscar um arquivo. Esse método é extremamente inconsistente pode ocasionar diversos problemas. Isso porque mesmo que um arquivo seja de uma mesma origem, ele pode ser tratado como de uma origem diferente pois os arquivos buscados com o esquema file:/// é considerado "opaque origin"

Mas, esse comportamente vario de navegador para navegador... uns considera com mesma origem, e outros não... Levando a diversos problemas e complicações de compatibilidade. Esse esquema é útil em casos muito específicos que não entrarei a fundo.

Cross-origin Network access:

Same-origin Permite o acesso de entre origens diferentes nesses quando utilizamos fetch e <img> e essas interações são separadas em três categorias:

• Cross-oring escritas são tipicamente permitidas. Exemplos são links, redirects e submissões de formulário.
• Cross-origin incorporado são permitadas e mais exemplos sobre será demostrado abaixo.
• Leitura de Cross-Origin geralmente não são permitidas, pois isso pode gerar vazamento de memoria.

Alguns exemplos sobre Cross-origin incorporado.

• Incorparação com a tag script no HTML são permitidas, entretanto, erros de sintaxes detalhados estão apenas disponíveis para a mesma origem do script.
• Incorporação de um arquivo CSS utilizando: <link rel="stylesheet" href="…"> são permitidas, porém devida a sintaxe relaxada do CSS, requer um Content Type header. Navegadores bloqueiam o stylesheet onde o MIME type é incorreto é bloqueado.
• Imagens disponibilizadas com <img> são permitidos
• Medias disponíveis com <videos> e <audio>
• Recursos externos incorporados com: <object> e <embed>.
• Fontes aplicadas com @font-face. Alguns navegadores permite cross-origens, outros same-origen
• Qualquer <Iframe> incorporado. Sites pode usar X-Frame-Options para prevenir cross-origin frame

Cross-origin Shared (CORS)

Esse tópico é mais detalhado em uma página que fiz aqui: O que é CORS

Conclusão

Gostaram do conteúdo? Teve alguma dúvida? Cometi algum equívoco? Comentem!