保护 Javascript 同源 postMessage 调用和消息监听器，这就够了吗？

Posted 2023-05-09

【中文标题】保护 Javascript 同源 postMessage 调用和消息监听器，这就够了吗？

【英文标题】：Securing Javascript same-origin postMessage call and message listener, is this enough?

【发布时间】：2021-11-16 02:22:17

【问题描述】：

这是我第一次尝试使用 postMessage。想要确保子 iframe 和父 iframe 之间的通信是安全的。

每页：https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

“如果您确实希望收到来自其他站点的消息，请始终验证 使用源属性和可能的​​源属性的发件人身份。 任何窗口（包括例如http://evil.example.com）都可以发送 向任何其他窗口发送消息，并且您无法保证 未知发件人不会发送恶意邮件。经核实 身份，但是，您仍然应该始终验证 收到的消息。否则，您信任的站点中存在安全漏洞 仅发送受信任的消息然后可以打开跨站点脚本 在您的网站上存在漏洞。”

家长的消息监听函数如下所示：

uri = 'https://www.somedomain.com/';
window.addEventListener("message", function(event) 
    if (event.origin !== uri.base.slice(0, -1)) return;
    if (event.source.location.origin !== uri.base.slice(0, -1)) return;
    if (event.source.location.origin !== window.location.origin) return;

    console.log(event.data);
);

子 iframe 的 postMessage 调用：

uri = 'https://www.somedomain.com/';
eventData = 'type':'sometype','action':'someaction','id':'q12wucxdfgbvgfcvt';
parent.postMessage(eventData, uri.slice(0, -1));

监听功能中的检查是否足够？还是太多了？

谢谢

【参考方案1】：

太多了。如果同步检查，event.source.location.origin == event.origin 将始终为真。这意味着前两个条件是错误的。对于第三个条件，它实际上是说“我只处理同源消息，并且该源必须是 'https://www.somedomain.com'”。

因此可以简化为： event.origin == window.location.origin && event.origin == "https://www.somedomain.com"

现在我对你的真实意图有点困惑。 ?

如果您事先知道您的页面确实托管在"https://www.somedomain.com"，那么您根本不需要检查它，您只需检查event.origin == window.location.origin。

如果你事先知道来源不是，那么检查永远不会通过。

逐字检查"https://www.somedomain.com" 有意义的唯一情况是，当您将相同的脚本部署到两个不同的源时，并且您希望条件一方面为真，另一方面为假。但我怀疑这是你真正想要的。

【讨论】：

谢谢。我担心另一个 iframe 是否能够向侦听器发送消息。此“事件侦听器”javascript 将在第三方域上运行。 event.origin == "domainname.com" 对我有用。由于我知道第三方域并将从我拥有的 iframe js 向它发布消息。即使它在另一个域上。

那么它应该是event.origin == window.location.origin || event.origin == "https://www.somedomain.com"，而不是AND。