A política de mesma origem é um recurso de segurança do navegador que restringe a forma documentos e scripts de 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 em sites diferentes. Se não houver restrições nas interações entre esses e um script for comprometido por um invasor, poderá expor tudo no navegador do 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 incorporam recursos de uma origem diferente. Esta política é, principalmente, um modelo e pode expor seu site a vulnerabilidades como clickjacking usando iframes. É possível restringir a leitura de origem cruzada dessas tags usando um Guia de Segurança de Conteúdo Política.
O que é considerado de 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 de
http://www.example.com/bar
mas não https://www.example.com/bar
porque o esquema é diferente.
O que é permitido e o que é bloqueado?
Geralmente, é permitido incorporar um recurso de origem cruzada ao ler um recurso de origem cruzada está bloqueado.
| Iframes |
Em geral, a incorporação de origem cruzada é permitida (dependendo da diretiva X-Frame-Options), mas a leitura de origem cruzada (como usar JavaScript para acessar um documento em um iframe) não é.
|
| CSS |
O CSS de origem cruzada pode ser incorporado usando um elemento <link> ou um @import em um arquivo CSS. O cabeçalho Content-Type correto pode ser necessário.
|
| formas |
Os URLs de origem cruzada podem ser usados como o valor do atributo action dos elementos de formulário. Um aplicativo da Web pode gravar dados de formulário em um destino de origem cruzada.
|
| imagens | É permitido incorporar imagens de origem cruzada. No entanto, a leitura de dados de imagem de origem cruzada (como a recuperação de dados binários de uma imagem de origem cruzada usando JavaScript) está bloqueada. |
| multimídia |
Vídeo e áudio de origem cruzada podem ser incorporados usando elementos <video> e <audio>.
|
| script | Scripts de origem cruzada podem ser incorporados. No entanto, o acesso a determinadas APIs (como solicitações de busca de origem cruzada) pode ser bloqueado. |
O que fazer: DevSite - Avaliação "Pensar e verificar"
Como impedir clickjacking
Um ataque chamado "clickjacking" incorpora um site em uma iframe e sobrepõe
botões transparentes que levam a um destino diferente. Os usuários são enganados
a pensar que estão acessando seu aplicativo enquanto enviam dados
invasores.
Para impedir que outros sites incorporem seu site em um iframe, adicione um conteúdo
política de segurança com o frame-ancestors
diretiva
aos cabeçalhos HTTP.
Como alternativa, adicione X-Frame-Options aos cabeçalhos HTTP. Consulte
MDN
para conferir a lista de opções.
Resumo
Espero que você se sinta aliviado porque os navegadores trabalham duro para ser um guardião de segurança na Web. Mesmo que os navegadores tentem ficar seguros bloqueando o acesso a recursos, às vezes você quer acessar recursos de origem cruzada em seu aplicativos conteinerizados. No próximo guia, você vai aprender sobre o compartilhamento de recursos entre origens (CORS) e como informar ao navegador que o carregamento de recursos entre origens de fontes confiáveis.