如何捕获本页面内加载的跨域第三方站点窗口中的用户交互事件

纯前端无额外依赖的实现方式不存在，浏览器同源策略的安全限制专门用于阻止未授权的跨域页面数据读取、操作行为，无法通过常规JS手段突破。以下是3种合规可落地的技术方案：

• 浏览器扩展方案 #

  该方案与Selenium IDE的实现逻辑完全一致。你可以开发专属浏览器扩展，申请跨域页面访问权限后，即可向任意跨域iframe注入内容脚本（content script）。在内容脚本中绑定全局事件监听器，就可以捕获目标第三方站点内所有点击、输入、滚动等用户交互行为，再通过扩展的消息通信能力将事件数据回传给你的主站点。
  适用场景：可引导用户安装扩展的场景，比如企业内部工具、定向用户群体的产品，实现成本最低，用户体验几乎无损耗。

• 反向代理托管方案 #

  在你的站点服务层搭建反向代理服务，将https://www.mysite.com/proxy/路径下的请求全部转发到目标第三方站点https://www.othersite.com，代理层同步做以下处理：
  1. 替换第三方站点返回内容中所有的资源路径、跳转链接为你的代理域名路径，保证页面资源正常加载
  2. 移除响应头中X-Frame-Options、Content-Security-Policy等限制嵌入、脚本注入的安全规则
  3. 适配Cookie的作用域，保证第三方站点的登录、提交等功能正常运行
     经代理处理后，第三方站点等价于在你的自有域名下加载，不存在跨域限制，你可以直接注入监听脚本捕获所有用户交互。
     注意：需确保代理、展示第三方站点的行为符合相关法律法规以及对方的服务条款，避免产生侵权风险。

• 服务端无头浏览器中转方案 #

  服务端部署Puppeteer、Playwright等无头浏览器运行环境，用户访问你的站点时，服务端启动无头浏览器加载目标第三方站点，将渲染后的页面画面以视频流、Canvas同步的方式推送到前端展示。前端捕获用户的鼠标、键盘操作后同步传给服务端无头浏览器执行，再将页面更新结果同步回前端。
  该方案所有交互都经过你的服务端中转，可完整捕获所有用户操作，不需要用户侧做任何额外配置。缺点是服务端资源消耗较高，页面交互延迟相对明显，适合对实时性要求不高的场景。

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