postMessage：iframe（子页面） 与 父页面 通信

跨 iframe 通信通常使用 postMessage 方法，这是一种安全且标准化的方式在不同源（origin）的文档之间传递消息。

是的，跨iframe通信了都，当然父页面与子页面（iframe）可以相互通信。

基本使用

父 ✈ --- ✈ 子

父页面可以通过 contentWindow.postMessage() 方法向子页面发送消息。

1. 父页面发送消息：

   使用 postMessage 方法将消息发送到指定的窗口（iframe）。

   // 父页面发送消息到 iframe
   var iframe = document.getElementById('myIframe');
   iframe.contentWindow.postMessage('发送给iframe页面内的消息', '*');
   

2. Iframe内接收消息：

   在接收消息的一方，使用 message 事件监听并处理消息。

   // 在 iframe 中接收消息
   window.addEventListener('message', function(event) {
     // 一定要检查消息来源，确保安全，出事了咱可不管埋
     if (event.origin !== 'http://allow-origin.com') return;
     
     console.log('Received message:', event.data);
   });
   

子 ✈ --- ✈ 父

子页面可以通过 parent.postMessage() 方法向父页面发送消息。

在一个嵌套的页面中，window 对象表示当前页面，而 window.parent 则表示包含当前页面 （iframe）的父页面。通过 window.parent，iframe 可以访问父页面的属性、方法和对象，并且可以在子页面中向父页面发送消息、调用父页面的函数等。

1. iframe内发送消息：

   使用 postMessage 方法将消息发送到指定的窗口（父窗口）。

   // iframe发送消息到 父页面
   window.parent.postMessage('发送给父页面的消息', '*');
   

2. 父页面接收消息：

   在接收消息的一方，使用 message 事件监听并处理消息。

   // 在 父页面 中接收消息
   window.addEventListener('message', function(event) {
     // 一定要检查消息来源，确保安全，出事了咱可不管埋
     if (event.origin !== 'http://allow-origin.com') return;
     
     console.log('Received message:', event.data);
   });
   

安全性

为了确保通信的安全性，应当在接收消息时验证消息的来源（origin），使用通配符 * 时应谨慎，最好限制来源的范围。

还是那句话：一定要检查消息来源，确保安全，出事了咱可不管埋

// 安全的接收消息示例
window.addEventListener('message', function(event) {
  if (event.origin === 'http://allow-origin.com') {
    // 处理来自可信源的消息
    console.log('可信来源数据:', event.data);
  } else {
    console.warn('不确定来源:', event.origin);
  }
});

扩展一下

既然可以发送内容，我们就自己定义类型，来区别在 iframe 中那些不同的操作内容类型：

发送

// var message = {
//   customType: '你自定义的消息类型/来源',
//   customValue: '你自定义的消息'
// };

function addNums(a, b){
    return a + b;
}

var message = {
  operateType: 'clickBtn',
  sendValue: '点击了一下，怎么了',
  sendFunc: addNums
};
// window.location.origin   iframe的url源
window.parent.postMessage(message, window.location.origin);

监听接收消息

window.addEventListener('message', function(event) {
    
  if (event.origin === 'http://origin.com' && event.data?.operateType === 'clickBtn') {
    // 处理来自可信源和特定的类型的消息
    console.log('可信来源数据:', event.data.sendValue); // 点击了一下，怎么了
    event.data.sendFunc(520, 1); // 521
  } else {
    console.warn('不确定来源:', event.origin);
  }
});

最后

通过 postMessage 实现安全的跨 iframe 通信，确保在使用 postMessage 时，严格验证消息的来源，以防止跨站脚本攻击（XSS）。

注：跨站脚本攻击（Cross-Site Scripting，简称XSS）是一种网络安全漏洞，允许攻击者在受信任的网站上注入恶意脚本代码。这些恶意脚本通常被注入到网页中，然后在其他用户的浏览器中执行。XSS攻击可以导致敏感信息泄露、会话劫持、篡改网页内容、恶意重定向等危害