将window.origin与postMessage一起使用是否安全？

问题描述

使用postMessage时，重要的是定义一个targetorigin，以确保我们不会将数据泄漏到其他站点。

在接收消息时检查来源也很重要，以防止其他站点触发我们的脚本。

但是，如果我们只是希望在自己的域上执行此操作，那么这有什么问题吗？

targetwindow.postMessage({message},window.origin);

-

window.addEventListener("message",e => {
  if (e.origin == window.origin){
    //Trigger something
  }
});

解决方法

我不是安全专家，但是MDN recommends to check消息的origin以及可能的source属性。因此，对它进行检查是正确的，我们可以认为它是安全的。

现在，问题开始是：

对照窗口的窗口检查消息的origin有多安全？ origin？

首先，考虑使用两种方法检查窗口的origin。您尝试使用的是WindowOrWorkerGlobalScope.origin，另一种是window.location.origin。

我不会使用WindowOrWorkerGlobalScope.origin，因为它可以在客户端被覆盖。试试看：

window.origin = 'https://www.example.com';
console.log(window.origin === 'https://www.example.com');

我不认为这是直接的安全威胁（尽管我不是如上所述的安全专家），但是在一定条件下，进行成功的攻击太容易了。

window.location.origin可能是一个更好的选择，因为它是只读的，并且不能在客户端进行修改。另外，它具有更广泛的浏览器支持。

因此，我将使用window.location.origin或对网址进行硬编码，如MDN所示。

如果由于测试而使硬编码URL看起来有问题，那么如果您的项目使用现代的构建工具，则可以使用环境变量。