利用BroadcastChannel与postMessage，实现前端多页面间实时数据通信

BroadcastChannel与postMessage

它们都是HTML5的新特性
	区别：	
		BroadcastChannel 提供了一种简单的跨页面通信方式，即可以在同一个页面中的不同 iframe，也可以在不同的页面之间进行通信。最重要的是只能在同源页面之间进行通信，即协议、域名和端口都相同的页面之间
			备注：
				1.如果在同一个页面中创建多个相同名称的通道，它们之间不会进行通信。
				2.在关闭通道之前，一定要确保所有的消息都已经接收完成，否则可能会导致消息丢失。
		postMessage 可以在同一域名下的不同窗口或 iframe 之间进行通信，也可以在不同域名下的窗口或 iframe 之间进行跨域通信
			备注：
				1.在使用 postMessage() 进行跨域通信时，应该确保消息接收方窗口的源地址是可信的，并且只接受预期的消息类型和格式。
				2.如果发送方和接收方在同一页面中，可以通过 window.postMessage() 方法来进行通信。

1.BroadcastChannel的具体使用

适用场景：同源的不同浏览器窗口，Tab 页，frame 或者 iframe 下的不同文档之间相互通信

1.1创建通道

要创建一个 BroadcastChannel，可以通过构造函数来创建，传递一个名称参数即可：

const channel = new BroadcastChannel('myChannel');

1.2发送消息

要发送消息，可以通过调用通道的 postMessage() 方法来发送，传递一个消息对象作为参数：

channel.postMessage({ type: 'message', text: 'Hello!' });

1.3接收消息

要接收消息，可以通过注册通道的 onmessage 事件来接收，当有消息到达时会触发该事件：

channel.onmessage = event => {
  console.log('Received message:', event.data);
};

1.4关闭通道

当不需要使用通道时，可以通过调用通道的 close() 方法来关闭通道：

channel.close();

最终的效果

2023-05-18 15 53 52

2.postMessage的具体使用

2.1发送消息

在发送消息的窗口或 iframe 中，可以调用 postMessage() 方法来发送消息。该方法接收两个参数：
	message：要发送的消息，可以是字符串、数字、布尔值、对象、数组或 null。
	targetOrigin：消息接收方窗口的源地址，可以是字符串（指定具体的源）或 *（表示所有源）。如果不知道消息接收方窗口的源地址，可以传递 window.parent（父窗口）、window.opener（打开当前窗口的窗口）或 window.top（最上层窗口）。

const message = { type: 'greeting', text: 'Hello, world!' };
const targetOrigin = 'https://example.com';
window.parent.postMessage(message, targetOrigin);

2.2接收消息

在接收消息的窗口或 iframe 中，可以注册 message 事件来接收消息。该事件会在接收到消息时自动触发，事件对象的 data 属性中包含了接收到的消息。

window.addEventListener('message', event => {
  if (event.origin !== 'https://example.com') {
    return;
  }

  const message = event.data;
  console.log(`Received message: ${message.text}`);
});

在接收消息时，可以通过检查 event.origin 属性来确保消息来自可信的源。如果接收到的源地址与预期的源地址不一致，应该忽略该消息。

2.3安全性

使用 postMessage() 进行跨域通信时，需要注意安全性问题，以避免被恶意攻击者利用漏洞进行攻击。以下是一些常见的安全性问题和对策：

2.3.1消息源验证：

在接收到消息时，需要检查消息来源是否可信。可以通过检查 event.origin 属性来确保消息来自预期的源，如果不是预期的源，则应该忽略该消息。

2.3.2消息内容验证：

在接收到消息时，需要检查消息内容是否合法。可以通过定义消息格式和类型来限制消息内容，例如只接受特定类型和格式的消息，忽略其他类型和格式的消息。

2.3.3防止 XSS 攻击：

在发送消息时，需要对消息内容进行转义，以避免被恶意攻击者利用跨站脚本（XSS）漏洞注入恶意代码。

2.3.4防止 CSRF 攻击：

在接收消息时，需要检查是否存在跨站请求伪造（CSRF）漏洞。可以通过添加 CSRF token 或检查 Referer 头来防止 CSRF 攻击。

2.3.5防止 DoS 攻击：

在接收消息时，需要限制消息的频率和大小，以避免被攻击者利用 DoS（拒绝服务）漏洞进行攻击。

总之，在使用 postMessage() 进行跨域通信时，需要谨慎处理安全性问题，以保护自己和用户的利益。

利用BroadcastChannel与postMessage， 实现前端多页面间实时数据通信