如何拦截代理window.postMessage 阻止第三方库向父窗口发送敏感数据

• 代理/重写postMessage的方案完全可行，针对你提到的「阻止当前页面内的第三方分析库向父窗口发送敏感消息」的场景，不需要修改父窗口的方法，直接在当前页面全局拦截postMessage调用即可实现需求。
• 同源场景下你可以重写parent.postMessage和childWindow.postMessage，跨域场景下无权限修改其他窗口的任何属性，包括postMessage方法。

约束说明 #

• 只有当两个窗口满足同源规则（协议、域名、端口三者完全一致）时，你才有权限修改另一个窗口（父窗口、子窗口、iframe窗口）的属性，重写其postMessage方法。
• 如果你只需要拦截当前页面内部代码向外发送的postMessage，不需要依赖跨域权限，不管目标窗口是否跨域都可以正常实现拦截逻辑。

具体实现方式 #

直接重写当前页面Window原型上的postMessage方法即可，所有当前页面内触发的postMessage调用（包括window.postMessage、parent.postMessage、opener.postMessage等）都会被拦截，示例代码如下：

// 保存原始postMessage方法
const originalPostMessage = Window.prototype.postMessage;

Window.prototype.postMessage = new Proxy(originalPostMessage, {
  apply(target, thisArg, args) {
    const [message, targetOrigin] = args;
    // 自定义过滤规则
    // 示例：拦截发送给父窗口的第三方分析库敏感消息
    if (thisArg === window.parent) {
      // 可自行调整匹配规则，比如匹配消息类型、内容字段等
      const isSensitiveMsg = typeof message === 'object' && message.eventSource === 'third_analytics';
      if (isSensitiveMsg) {
        console.log('已拦截敏感postMessage', message);
        // 拦截后直接返回，不执行原始发送逻辑
        return;
      }
    }
    // 非敏感消息正常发送
    return Reflect.apply(target, thisArg, args);
  }
});

测试逻辑补充 #

你之前测试的「窗口A重写窗口B的postMessage可拦截调用」的逻辑，对父窗口同样生效，前提是两个窗口同源。但该方案适用场景和你的需求有差异：你不需要修改其他窗口的属性，直接在当前页面全局拦截postMessage调用更稳定，也没有同源限制。

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