跨域iframe环境下获取输入框值的解决方案求助

1. 原生window.postMessage通信（最通用合法方案） #

这是浏览器官方支持的跨域通信机制，无需修改域名，只要两个iframe的页面配合实现消息收发逻辑即可：

• 代码所在iframe发送请求：
  获取目标iframe的window引用后，发送自定义格式的消息：

  // 假设表单iframe在父页面中的id为"form-iframe"
  const formFrameWindow = parent.document.getElementById('form-iframe').contentWindow;
  // 发送获取表单数据的请求
  formFrameWindow.postMessage(
    { type: 'REQ_FORM_DATA', payload: {} },
    '*' // 生产环境建议替换为表单iframe的具体域名，提升安全性
  );
  

• 表单所在iframe接收并响应：
  添加消息监听器，处理请求后返回数据：

  window.addEventListener('message', (event) => {
    // 生产环境务必验证event.origin，只处理可信域名的请求
    if (event.data.type === 'REQ_FORM_DATA') {
      const form = document.getElementById('target-form');
      const formData = Object.fromEntries(new FormData(form));
      // 回传数据给请求方
      event.source.postMessage(
        { type: 'RES_FORM_DATA', payload: formData },
        event.origin
      );
    }
  });
  

2. 父页面中转（适用于父页面可配合的场景） #

如果父页面与其中一个iframe同源，或者可以添加简单的中转代码，可通过父页面作为消息桥梁：

• 父页面中转逻辑：

  window.addEventListener('message', (event) => {
    if (event.data.type === 'FORWARD_TO_FORM') {
      const formFrame = document.getElementById('form-iframe').contentWindow;
      formFrame.postMessage(event.data.payload, '*');
    } else if (event.data.type === 'FORWARD_TO_CODE') {
      const codeFrame = document.getElementById('code-iframe').contentWindow;
      codeFrame.postMessage(event.data.payload, event.origin);
    }
  });
  

  两个iframe只需将消息发送给父页面，由父页面转发给目标iframe即可。

3. 浏览器扩展（仅适用于自用/受控环境） #

如果是个人使用或可控场景，可借助浏览器扩展的高权限绕过跨域限制：

• Chrome扩展示例（content script中直接操作iframe）：

  // 扩展的content script可以访问页面内所有iframe的DOM
  const formFrame = document.getElementById('form-iframe');
  const input = formFrame.contentDocument.querySelector('input[name="username"]');
  input.value = 'test-value';
  

  注意：此方案仅能在扩展环境下生效，无法直接嵌入网页代码。

重要提示：不存在能绕过浏览器同源策略的非法方案（漏洞利用除外，绝对不推荐），所有可行方案均基于浏览器允许的安全机制实现。

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