Por questões de segurança e privacidade, os navegadores impedem que haja comunicação entre os conteúdo de diferentes domínios. Ou seja, scripts em diferentes dominios (cross-domain) não podem se interagir.

Na prática seria assim… Já imaginou, se um simples anúncio do google adsense, pudesse controlar a página em que ele foi colocado ? Ele iria alterar o background, trocar titulos na página e bagunçar tudo.

Por isso essa é uma importante funcionalidade nos navegadores, pois evita com que páginas desconhecidas (em domínio diferente) de controlar a página atual em que está visitando.

Com o HTML5, podemos contornar esse problema facilmente. Utilizando o Cross-document messaging, podemos estabelecer comunicação entre páginas e documentos no html, sem se procupar com a origem do domínio. Foi desenvolvido justamente para permitir essa comunicação, sem colocar em risco a segurança da página. (cross-site scripting attacks).

Cross-site messaging funciona apenas no HTML5, e está disponível nas seguintes versões de navegadores:

• Internet Explorer 8.0+
• Firefox 3.0+
• Safari 4.0+
• Google Chrome 1.0+
• Opera 9.5+

Vejamos então um exemplo prático:

Digamos que em sua página inicial, você tem o seguinte iframe.

1

<iframe id="exemplo-iframe" src="http://www.exemplo.com/teste.html"></iframe>

Se você quiser mandar o titulo do seu site para o iframe, você precisa usar o cross-document messaging pois ele está em um outro domínio. Veja abaixo como você faria para disparar essa mensagem:

1
2
3
4

<script language="javascript">
var iframe = document.getElementById("exemplo-iframe").contentWindow;
iframe.postMessage("Titulo do Site", "*"); 
</script>

Na linha 2 é onde obtemos o controle do iframe. Na linha 3 é onde disparamos a mensagem. Note que estamos passando um “*” como segundo argumento do postMessage, o que significa que a mensagem é enviada para todos os domínios. Poderiamos ser mais específicos e disparar apenas para o domínio do iframe (exemplo.com).

Agora, no lado do iframe, só falta receber essa mensagem. Veja abaixo o exemplo do código que o iframe deve carregar:

1
2
3
4
5
6
7
8

<script language="javascript">
function displayMessage(event) {
    var message = event.data;
    alert(message);
    event.source.postMessage("Recebido com sucesso!",  "*");
}
window.addEventListener("message", displayMessage, false);
</script>

Vou começar explicando pela linha 7,  onde é estabelecido o listener, que é responsável por “escutar” as mensagens recebidas e chamar a função displayMessage. Na linha 3, recebemos a mensagem numa variável. Na linha 4 exibimos ela no alert do javascript. Na linha 5, é disparado uma mensagem para o “remetente”, ou seja, podemos enviar uma mensagem para confirmar o recebimento por exemplo.

Lembrando que para que a mensagem enviada na linha 5 seja recebida corretamente pela sua página inicial, você tem que adicionar um listener, da mesma forma que foi feito no iframe. Fazendo assim, é possível fazer trocas de informações entre as páginas de diferentes domínios.

No exemplo acima, qualquer site estaria habilitado em trocar informações com aquela página do iframe (http://www.exemplo.com/teste.html) e dependendo do contexto e de como foi implementado, pode vir a ser uma falha de segurança, portanto, utilize com cuidado.