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.
Um navegador pode carregar e mostrar recursos de vários sites ao mesmo tempo. É possível ter várias guias abertas ao mesmo tempo ou um site pode incorporar vários iframes de sites diferentes. Se não houver restrições nas interações entre esses recursos e um script for comprometido por um invasor, o script 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 que "Eu carrego imagens e scripts de outras origens o tempo todo". Os navegadores permitem que algumas tags incorporem recursos de origens diferentes. Essa política é principalmente um artefato histórico e pode expor seu site a vulnerabilidades, como o clickjacking usando iframes. É possível restringir a leitura em origem cruzada dessas tags usando uma Política de Segurança de Conteúdo.
O que é considerado de mesma origem?
Uma origem é definida pelo esquema (também conhecido como protocolo, como
HTTP ou HTTPS), pela porta (se especificado) e pelo host. Quando os três são iguais
para dois URLs, eles são considerados da mesma origem. Por exemplo,
http://www.example.com/foo é a mesma origem que
http://www.example.com/bar,
mas não https://www.example.com/bar,
porque o esquema é diferente.
O que é permitido e o que está bloqueado?
Geralmente, é permitido incorporar um recurso de origem cruzada, enquanto a leitura de um recurso de origem cruzada é bloqueada.
| Iframes |
A incorporação de origem cruzada normalmente é 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 |
CSS de origem cruzada pode ser incorporado usando um elemento <link> ou @import em um arquivo CSS. O cabeçalho Content-Type correto pode ser necessário.
|
| formulários |
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 de reflexão e verificação
Como evitar 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 pensar que estão acessando seu aplicativo enquanto enviam dados para
atacantes.
Para impedir que outros sites incorporem seu site a um iframe, adicione uma política de segurança
de conteúdo com a diretiva
frame-ancestors
aos cabeçalhos HTTP.
Como alternativa, adicione X-Frame-Options aos cabeçalhos HTTP. Consulte
MDN
para ver uma lista de opções.
Conclusão
Esperamos que você se sinta aliviado porque os navegadores trabalham duro para ser um guardião da segurança na Web. Mesmo que os navegadores tentem ser seguros bloqueando o acesso a recursos, às vezes você quer acessar recursos de origem cruzada nos aplicativos. No próximo guia, aprenda sobre o Compartilhamento de recursos entre origens (CORS) e como informar ao navegador que o carregamento de recursos de origem cruzada é permitido por fontes confiáveis.