Mesma política de origem e iframe

Mariko Kosaka

Neste codelab, saiba como a política de mesma origem funciona ao acessar dados dentro de um iframe.

Configuração: página com um iframe de mesma origem

Esta página incorpora um iframe, chamado iframe.html, na mesma origem. Como o host e o iframe compartilham a mesma origem, o site do host pode acessar os dados dentro do iframe e expor a mensagem secreta, como no exemplo abaixo.

const iframe = document.getElementById('iframe');
const message = iframe.contentDocument.getElementById('message').innerText;

Mudar para iframe entre origens

Tente mudar o src do iframe para https://other-iframe.glitch.me/. A página de destino ainda pode acessar a mensagem secreta?

Como o host e o iframe incorporado não têm a mesma origem, o acesso aos dados é restrito.