A política de mesma origem é um recurso de segurança do navegador que restringe como documentos e scripts em uma origem podem interagir com recursos em outra origem.
Um navegador pode carregar e exibir recursos de vários sites ao mesmo tempo. Você pode ter várias guias abertas ao mesmo tempo, ou um site pode incorporar vários iframes de sites diferentes. Se não houver restrição nas interações entre esses recursos e um script for comprometido por um invasor, ele poderá expor tudo no navegador de um usuário.
A política de mesma origem impede que isso aconteça bloqueando o acesso de leitura a recursos carregados de uma origem diferente. "Mas espere", você diz, "eu carrego imagens e scripts de outras origens o tempo todo". Os navegadores permitem que algumas tags incorporem recursos de uma origem diferente. Essa política é, em grande parte, um artefato histórico e pode expor seu site a vulnerabilidades, como clickjacking usando iframes. É possível restringir a leitura entre origens dessas tags usando uma Política de Segurança de Conteúdo.
O que é considerado mesma origem?
Uma origem é definida pelo esquema (também conhecido como protocolo, por exemplo,
HTTP ou HTTPS), porta (se especificada) e host. Quando os três são iguais
para dois URLs, eles são considerados de mesma origem. Por exemplo,
http://www.example.com/foo tem a mesma origem que
http://www.example.com/bar,
mas não que https://www.example.com/bar,
porque o esquema é diferente.
O que é permitido e o que é bloqueado?
Em geral, é permitido incorporar um recurso entre origens, mas a leitura de um recurso entre origens é bloqueada.
| iframes |
A incorporação entre origens geralmente é permitida (dependendo da diretiva X-Frame-Options), mas a leitura entre origens (como usar JavaScript para acessar um documento em um iframe) não é.
|
| CSS |
O CSS entre origens pode ser incorporado usando um elemento <link> ou um @import em um arquivo CSS. O cabeçalho Content-Type correto pode ser necessário.
|
| formulários |
Os URLs entre origens podem ser usados como o valor do atributo action de elementos de formulário. Um aplicativo da Web pode gravar dados de formulário em um destino entre origens.
|
| imagens | É permitido incorporar imagens de origem cruzada. No entanto, a leitura de dados de imagem entre origens (como a recuperação de dados binários de uma imagem entre origens usando JavaScript) é bloqueada. |
| multimídia |
Vídeos e áudios entre origens podem ser incorporados usando os elementos <video> e <audio>.
|
| script | Scripts entre origens podem ser incorporados, mas o acesso a determinadas APIs (como solicitações de busca entre origens) pode ser bloqueado. |
TODO: DevSite - Think and Check assessment
Como evitar o clickjacking
Um ataque chamado "clickjacking" incorpora um site em um iframe e sobrepõe
botões transparentes que levam a um destino diferente. Os usuários são levados a acreditar que estão acessando seu aplicativo enquanto enviam dados para invasores.
Para impedir que outros sites incorporem o seu em um iframe, adicione uma política de segurança de conteúdo com a diretiva frame-ancestors aos cabeçalhos HTTP.
Como alternativa, é possível adicionar X-Frame-Options aos cabeçalhos HTTP. Consulte
MDN
para ver uma lista de opções.
Conclusão
Esperamos que você se sinta um pouco mais aliviado ao saber que os navegadores trabalham duro para serem os guardiões da segurança na Web. Embora os navegadores tentem ser seguros bloqueando o acesso a recursos, às vezes você quer acessar recursos de origem cruzada nos seus aplicativos. No próximo guia, saiba mais sobre o Compartilhamento de recursos entre origens (CORS) e como informar ao navegador que o carregamento de recursos entre origens é permitido de fontes confiáveis.