如何在沙箱化iFrame内监听父文档的特定Ajax请求？

结论：受浏览器安全机制限制，无法直接在沙箱化iFrame内监听或读取父文档发起的Ajax请求，核心限制原因：

• 同源策略隔离：若iFrame与父文档不同源，浏览器会完全分隔两者的执行上下文，iFrame无法访问父文档的全局对象（包括XMLHttpRequest、fetch等Ajax相关API）。
• 沙箱权限限制：即便同源，沙箱化iFrame若未配置allow-same-origin权限，会被浏览器视为跨源环境，同样无法访问父文档的全局上下文。

可行的替代方案（需父文档配合） #

所有方案都需要父文档主动传递请求信息，iFrame仅能通过postMessage接收数据：

1. 父文档发送Ajax后主动推送信息 #

父文档在完成Ajax请求后，通过postMessage将请求/响应数据发送给iFrame：

// 父文档代码
fetch('/api/target', {
  method: 'POST',
  body: JSON.stringify({ param: 'test' })
})
.then(res => res.json())
.then(data => {
  window.frames[0].postMessage({
    type: 'AJAX_NOTIFY',
    url: '/api/target',
    method: 'POST',
    requestBody: { param: 'test' },
    responseData: data
  }, 'https://父文档的具体域名'); // 生产环境务必指定具体源，避免滥用
});

iFrame内监听message事件接收数据：

// iFrame代码
window.addEventListener('message', (event) => {
  // 验证消息来源，防范恶意注入
  if (event.origin !== 'https://父文档的具体域名') return;
  
  if (event.data.type === 'AJAX_NOTIFY') {
    console.log('父文档Ajax请求信息:', event.data);
    // 此处处理业务逻辑
  }
});

2. 父文档重写Ajax API拦截请求 #

父文档通过重写XMLHttpRequest或fetch的原型方法，拦截所有Ajax请求，再将信息推送给iFrame：

// 父文档重写XMLHttpRequest示例
const originalOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url) {
  this._requestMethod = method;
  this._requestUrl = url;
  originalOpen.apply(this, arguments);

  this.addEventListener('load', () => {
    window.frames[0].postMessage({
      type: 'XHR_INTERCEPT',
      method: this._requestMethod,
      url: this._requestUrl,
      response: this.responseText
    }, 'https://父文档的具体域名');
  });
};

iFrame内同样通过message事件接收拦截到的请求数据。

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