如何在用户脚本/JS控制台中跨域访问iframe内的JS函数？

同源策略与跨域错误的原因 #

浏览器的同源策略是核心安全机制，它限制不同源的页面之间互相访问敏感数据。两个页面必须满足协议、域名、端口完全一致才属于同源。当你从父页面尝试调用跨域iframe的contentWindow.somerandomfunction()时，浏览器判定这是跨域访问行为，直接拦截并抛出Uncaught DOMException: Permission denied错误，这是正常的安全防护。

为什么检查元素后控制台能调用函数？ #

当你在开发者工具中选中iframe元素时，控制台的执行上下文会自动切换到该iframe的页面环境。此时你输入的代码是在iframe自身的全局作用域内执行，相当于直接在iframe页面的控制台里写代码，完全符合同源规则，自然不会触发跨域限制。而直接在父页面控制台或用户脚本里调用，是从父页面的跨域环境发起访问，必然被拦截。

程序化调用的可行方案 #

如果要合法实现跨域调用，只有以下几种途径：

• 同源化：如果是自有站点，将iframe页面部署到与父页面相同的域名下，消除跨域场景。
• 使用postMessage通信：这是跨域交互的标准方案，通过消息传递间接调用函数：
  父页面代码：

  // 向iframe发送调用指令
  const targetIframe = document.querySelector('iframe');
  targetIframe.contentWindow.postMessage('invoke-somerandomfunction', 'https://iframe-target-domain.com');
  
  // 监听iframe返回的执行结果
  window.addEventListener('message', (event) => {
    if (event.origin !== 'https://iframe-target-domain.com') return;
    console.log('函数执行结果:', event.data);
  });
  

  iframe页面代码：

  window.addEventListener('message', (event) => {
    // 验证消息来源和指令
    if (event.origin !== 'https://parent-domain.com' || event.data !== 'invoke-somerandomfunction') return;
    // 调用目标函数并返回结果
    const result = somerandomfunction();
    event.source.postMessage(result, event.origin);
  });
  

• 用户脚本特殊配置：如果使用油猴类脚本，可在脚本元信息中同时匹配父页面和iframe的域名，并设置@grant none，部分场景下脚本能在统一上下文运行（但受浏览器安全限制，不保证所有情况有效）。

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