JavaScript同源postMessage调用与监听器安全校验是否足够？

你的监听函数校验规则同时存在冗余校验和安全遗漏问题，具体分析如下：

冗余校验部分 #

• 三重origin判断完全重复：你当前是父子iframe同域场景，合法消息的event.origin、event.source.location.origin、window.location.origin三者值完全一致，无需重复判断三次，仅保留1次origin校验即可。
• 访问event.source.location属于不规范写法：如果后续业务调整为跨域通信，跨域场景下浏览器会禁止访问其他源窗口的location属性，会直接抛出JS异常导致监听逻辑中断，哪怕是同域场景该判断也没有额外安全增益。

安全校验不足部分 #

你只完成了发送方身份校验，还缺少MDN文档提到的消息语法校验环节：

• 没有校验消息体结构：当前逻辑拿到event.data后直接使用，哪怕发送方是可信站点，一旦可信站点存在安全漏洞被注入恶意内容，你的页面直接使用未校验的数据可能触发XSS漏洞。
• 没有校验字段合法性：没有验证消息中的type、action等字段是否属于你业务允许的枚举值，可能收到异常的无效请求。

优化后的参考代码 #

父页面监听逻辑优化如下：

const ALLOWED_ORIGIN = 'https://www.somedomain.com';
// 提前定义业务允许的消息类型、操作枚举
const ALLOWED_MESSAGE_TYPES = ['sometype'];
const ALLOWED_ACTIONS = ['someaction'];

window.addEventListener("message", function(event) {
    // 校验发送方来源，仅保留这一条origin判断即可
    if (event.origin !== ALLOWED_ORIGIN) return;
    
    const msgData = event.data;
    // 校验消息体基础结构
    if (typeof msgData !== 'object' || !msgData.type || !msgData.action || !msgData.id) return;
    // 校验字段值是否在允许范围内
    if (!ALLOWED_MESSAGE_TYPES.includes(msgData.type) || !ALLOWED_ACTIONS.includes(msgData.action)) return;
    
    // 所有校验通过后再执行业务逻辑
    console.log(msgData);
});

内容的提问来源于stack exchange，提问作者user964491