12.02.2025

Troca de Dados Entre iframe e Página Pai

Resposta Rápida

Para conseguir uma comunicação segura de duas vias entre um iframe e sua página pai, utilize o método window.postMessage(). A troca de dados do iframe pode ser iniciada via parent.postMessage(mensagem, targetOrigin) e da janela pai através de iframe.contentWindow.postMessage(mensagem, targetOrigin). É necessário configurar um manipulador de eventos para filtrar as mensagens recebidas, verificar o event.origin e processar o event.data.

Exemplo de configuração para a comunicação:

// Da janela pai para o iframe
document.getElementById('myIframe').contentWindow.postMessage('Olá, iframe!', '*');

// Se o iframe estiver configurado para ouvir
window.addEventListener('message', event => {
    if (event.origin !== window.location.origin) return;
    alert(`Minha janela pai diz: ${event.data}`);
}, false);

Para maior segurança, utilize um targetOrigin específico em vez do curinga '*'.

Guia Detalhado: Garantindo Interações Seguras Entre iframe e Página Pai

Origem de Destino: Não é Seguro Usar * para Tudo!

Usar '*' em postMessage() é como deixar todas as portas da sua casa abertas: qualquer um pode entrar. É mais seguro usar uma URL específica para identificar o destinatário:

iframe.contentWindow.postMessage('Olá, iframe!', 'https://exemplo.com');

Configurando a Comunicação do iframe para a Página Pai

Em navegadores modernos, você pode usar CustomEvent para estabelecer feedback. O envio de mensagens do iframe é feito assim:

var customEvent = new CustomEvent('owlPost', { detail: 'Mensagem' });
parent.document.dispatchEvent(customEvent);

A página pai deve estar preparada para receber e lidar com esse evento:

window.addEventListener('owlPost', function(e) {
    console.log('Mensagem do iframe:', e.detail);
});

Estruturando Mensagens Usando Classes

Defina classes para mensagens, adicionando propriedades tipo e corpo para simplificar e estruturar a interação:

class OwlPost {
    constructor(tipo, corpo) {
        this.tipo = tipo;
        this.corpo = corpo;
    }
}

Validando Dados em event.data

Receber uma mensagem é apenas o primeiro passo. É importante verificar a origem e o conteúdo da mensagem:

window.addEventListener('message', event => {
    if (event.origin !== 'https://hogwarts.com') return;
    if (!event.data.tipo || !event.data.corpo) return;
    handleOwlPost(event.data);
});

Função sendMessage para Padronizar o Envio de Mensagens

Utilize a função sendMessage para padronizar o envio de mensagens entre diferentes objetos:

function sendMessage(owl, mensagem, targetOrigin) {
    owl.contentWindow.postMessage(mensagem, targetOrigin);
}

Manipuladores de Eventos Separados para Diferentes Mensagens

Manipule diferentes tipos de mensagens em funções separadas:

const owlHandlers = {
    'Hedwig': handleHedwigPost,
    'Errol': handleErrolPost,
};

function handleOwlPost(mensagem) {
    if (owlHandlers[mensagem.tipo]) {
        owlHandlers[mensagem.tipo](mensagem.corpo);
    }
}

Visualização

Emojis em diagramas adicionam um toque de leveza à explicação, sem comprometer a clareza.

Ilha Pai (🏝️): Envia 💌 com uma mensagem através do oceano
Oceano de iframe (🌊): Transporta 💌 para o destinatário designado
Ilha de iframe (🏖️): Recebe 💌, lê e segue as instruções 

Ilha de iframe (🏖️): Envia 💌 de volta
Ilha Pai (🏝️): Aguardando e reagindo à resposta

Coisas a Lascar: Melhores Práticas e Ferramentas

Compatibilidade com Navegadores

Antes de usar postMessage, verifique se os navegadores que você precisa suportam essa funcionalidade. O IE8 e versões mais recentes suportam essa API, mas é sempre melhor conferir no site Can I use.

Interação Entre Domínios

Para comunicar entre iframes em diferentes domínios, pode ser necessário configurar ajustes adicionais e, possivelmente, o uso de um arquivo JS especial hospedado em um CDN, especialmente quando envolve subdomínios.

Classificação de Mensagens

Estruture suas mensagens categorizando-as por tipo, origem e propósito para melhorar a interação.

{
    tipo: 'notificação',
    origem: 'iframe',
    propósito: {
        mensagem: 'Usuário concordou com os termos.'
    }
}

Segurança da Troca de Mensagens

Para maior segurança, você pode verificar event.source e usar métodos criptográficos para manter a confidencialidade das informações conforme necessário.

Transmitindo Dados Complexos

Quando precisar transmitir dados complexos, utilize a codificação JSON e certifique-se de lidar com possíveis erros de análise:

window.addEventListener('message', event => {
    try {
        const dados = JSON.parse(event.data);
        // Manipular dados...
    } catch (error) {
        console.error('Erro ao analisar dados', error);
    }
});

Interação em Tempo Real e Mensagens Frequentes

Para interações dinâmicas que exigem múltiplas transmissões de dados, otimize o processo, por exemplo, usando requestAnimationFrame.

Recursos Úteis

1. Política de Same-Origin - Segurança na Web | MDN — Um guia detalhado sobre a interação entre diferentes domínios, incluindo iframes.
2. iframes HTML — O básico sobre o uso de iframes em HTML.
3. RFC 6454 - O Conceito de Origem na Arquitetura da Web — Um conceito central de segurança na web e política de interação entre domínios.
4. Padrão HTML — Documentação oficial dos padrões HTML cobrindo mensagens na web.
5. Cross-Domain XMLHttpRequest com CORS - Mozilla Hacks — Sobre o Compartilhamento de Recursos de Origem Cruzada (CORS) e simplificação de solicitações entre domínios.
6. Can I use... Tabelas de suporte para HTML5, CSS3 e outras tecnologias — Tabelas de compatibilidade para a API postMessage.
7. Entendendo e Usando a API postMessage — Uma explicação completa e aplicação prática da API postMessage.

Video

Navigation