HTML - Mensagens na Web

Tipos de Mensagens Web

// No primeiro contexto de navegação
const channel = new MessageChannel();
const port1 = channel.port1;
const port2 = channel.port2;

// Envia port2 para o segundo contexto de navegação
window.postMessage('init', '*', [port2]);

// Escuta mensagens na port1
port1.onmessage = (event) => {
  console.log('Mensagem recebida:', event.data);
};

// No segundo contexto de navegação
window.onmessage = (event) => {
  if (event.data === 'init') {
    const port2 = event.ports[0];
    port2.onmessage = (event) => {
      console.log('Mensagem recebida:', event.data);
    };
    port2.postMessage('Olá do segundo contexto!');
  }
};

// No contexto de envio
const targetWindow = window.parent; // Ou window.opener, ou document.getElementById('myIframe').contentWindow
targetWindow.postMessage('Olá do remetente!', '*');

// No contexto de recebimento
window.addEventListener('message', (event) => {
  if (event.origin === 'http://example.com') {
    console.log('Mensagem recebida:', event.data);
  }
});

// No script principal
const worker = new Worker('worker.js');
worker.onmessage = (event) => {
  console.log('Mensagem recebida do worker:', event.data);
};
worker.postMessage('Olá do script principal!');

// Em worker.js
self.onmessage = (event) => {
  console.log('Mensagem recebida no worker:', event.data);
  self.postMessage('Olá do worker!');
};

Considerações de Segurança

Ao usar a Comunicação Web, esteja ciente dos riscos potenciais de segurança e siga as melhores práticas para uma implementação segura.

Um dos principais riscos da Comunicação Web são os ataques de script entre sites (XSS). Se você não validar e limpar os dados recebidos através de mensagens, um atacante pode enviar código malicioso que será executado em sua página. Isso permitiria que ele roubasse dados sensíveis, realizasse ações em nome do usuário ou assumisse o controle da página.

<p>This    is   a   paragraph   with    extra   spaces.</p>

Para prevenir ataques XSS, sempre valide e limpe qualquer dado recebido através de mensagens. Não assuma que os dados são seguros apenas porque vêm de outra janela ou worker que você controla. Trate todos os dados recebidos como entrada não confiável e lide com eles de acordo.

Outro risco é ao usar a Comunicação Web para comunicação entre diferentes origens. Tenha cuidado com quais origens você confia. Se você aceitar mensagens de qualquer origem sem verificar, um atacante poderia enviar mensagens de um site malicioso que enganaria sua página, fazendo-a realizar algo que não deveria. Para reduzir esse risco, sempre verifique a propriedade origin do evento de mensagem e aceite apenas mensagens de origens confiáveis.

Ao usar a Comunicação por Canais, saiba que qualquer contexto que receba uma porta de mensagem tem acesso total a esse canal. Isso significa que eles podem enviar mensagens no canal e até fechá-lo. Portanto, compartilhe portas de mensagem apenas com contextos em que você confia totalmente.

Com Web Workers, um dos principais riscos é que um worker pode travar ou usar muitos recursos se ficar preso em um loop infinito ou tentar fazer muito trabalho. Para evitar isso, use o método Worker.terminate() para parar um worker imediatamente, se necessário. Estruture seu código de worker para responder às mensagens rapidamente e evite tarefas de longa duração.

var myWorker = new Worker('worker.js');

// Encerra o worker após 5 segundos
setTimeout(function() {
    myWorker.terminate();
}, 5000);

Aqui estão algumas melhores práticas para uma Comunicação Web segura:

• Sempre valide e limpe os dados das mensagens recebidas
• Aceite apenas mensagens de origens confiáveis
• Tenha cuidado ao compartilhar portas de mensagem
• Use Worker.terminate() para parar workers com mau comportamento
• Mantenha seu código de worker focado e responsivo
• Não use a Comunicação Web para compartilhar dados sensíveis, a menos que seja necessário
• Use criptografia para dados sensíveis, se necessário
• Teste minuciosamente seu código de Comunicação Web para possíveis vulnerabilidades

Suporte do Navegador

A maioria dos navegadores web modernos suporta Web Messaging. Isso inclui Chrome, Firefox, Safari e Internet Explorer 11 e versões superiores. A API WebSocket e os Eventos Enviados pelo Servidor, usados para mensagens em tempo real, também são suportados na maioria dos navegadores.

Navegadores mais antigos podem ter suporte limitado ou nenhum suporte para alguns recursos do Web Messaging. Por exemplo:

• Internet Explorer 8 e versões anteriores não suportam o método window.postMessage() usado no Cross-Document Messaging.
• Internet Explorer 10 e versões anteriores não suportam Web Workers.
• Internet Explorer não suporta Channel Messaging.

Se você precisa dar suporte a navegadores mais antigos, pode ser necessário usar soluções alternativas ou fallbacks. Algumas opções incluem:

• Para Cross-Document Messaging em versões antigas do IE, você pode usar uma biblioteca como easyXDM que fornece um transporte alternativo usando iframes e a propriedade location.hash.

// No contexto de envio
var socket = new easyXDM.Socket({
  remote: "http://example.com/remote.html",
  onMessage: function(message, origin) {
    console.log("Mensagem recebida:", message);
  }
});
socket.postMessage("Olá do remetente!");

// No contexto de recebimento (remote.html)
var socket = new easyXDM.Socket({
  onMessage: function(message, origin) {
    console.log("Mensagem recebida:", message);
  }
});

• Para Web Workers no IE10 e versões anteriores, você pode detectar o suporte e fornecer um fallback que execute o script na thread principal.

if (typeof(Worker) !== "undefined") {
  // Web Workers suportado, use worker
  var worker = new Worker("worker.js");
} else {
  // Web Workers não suportado, execute o script na thread principal
  var workerFallbackScript = document.createElement('script');
  workerFallbackScript.src = 'worker.js';
  document.body.appendChild(workerFallbackScript);
}

Para alternativas ao Channel Messaging: Você pode usar outras técnicas de mensagem como Cross-Document Messaging ou uma solução baseada em servidor quando o Channel Messaging não estiver disponível.

É importante testar seu código de Web Messaging em todos os navegadores que você planeja suportar. Use detecção de recursos para verificar o suporte e forneça fallbacks apropriados quando necessário para dar a todos os seus usuários uma boa experiência.

O cenário dos navegadores está sempre melhorando. A maioria dos usuários agora usa navegadores modernos com muitos recursos. Então, embora fallbacks para navegadores antigos ainda possam ser necessários às vezes, eles estão se tornando menos críticos ao longo do tempo à medida que o uso de navegadores legados continua diminuindo.

Exemplos Práticos

let chatHistory = [];

self.onmessage = (event) => {
  if (event.data.type === 'newMessage') {
    chatHistory.push(event.data.message);
    self.postMessage({ type: 'updateHistory', history: chatHistory });
  } else if (event.data.type === 'getHistory') {
    self.postMessage({ type: 'updateHistory', history: chatHistory });
  }
};

const chatWorker = new Worker('chat_worker.js');
const channel = new MessageChannel();
chatWorker.postMessage({ type: 'init', port: channel.port1 }, [channel.port1]);

const messageInput = document.getElementById('messageInput');
const chatContainer = document.getElementById('chatContainer');

channel.port2.onmessage = (event) => {
  if (event.data.type === 'updateHistory') {
    const messagesHTML = event.data.history.map(message => `<p>${message}</p>`).join('');
    chatContainer.innerHTML = messagesHTML;
  }
};

messageInput.addEventListener('keypress', (event) => {
  if (event.key === 'Enter') {
    const message = messageInput.value;
    channel.port2.postMessage({ type: 'newMessage', message });
    messageInput.value = '';
  }
});

chatWorker.postMessage({ type: 'getHistory' });

<iframe id="myIframe" src="https://example.com/iframe.html"></iframe>

window.addEventListener('message', function(event) {
  if (event.origin === 'https://example.com' && event.data.type === 'userData') {
      console.log('Dados do usuário recebidos:', event.data.value);
   }
});

const iframeWindow= document.getElementById('myIframe').contentWindow;
const userData= { name:'João Silva', age :30 };

document.getElementById("myIframe").addEventListener("load", () =>{
   iframeWindow.postMessage({type :'userData ', value :userData },'https://example.com ');
});