Hotdry.
归档
web

浏览器中利用 Iframe 和 PostMessage 构建可扩展 Agent 沙箱

利用浏览器原生机制 iframe sandbox、postMessage 和 capability APIs，为 AI Agent 构建安全、可扩展的隔离执行环境，无需内核权限，提供工程参数和监控清单。

在 AI Agent 快速发展中，安全隔离执行成为关键挑战。传统沙箱依赖内核级隔离如 Docker 或 seccomp，引入复杂性和权限提升风险。而浏览器提供天然沙箱机制：通过 iframe 的 sandbox 属性结合 postMessage 通信和能力式 API（capability APIs），可在用户浏览器中实现 Agent 的可扩展隔离执行。这种方案无需服务器内核权限，利用浏览器同源策略和 CSP（Content Security Policy），实现零信任执行，特别适合 Web 端多租户 Agent 平台。

核心观点是 “浏览器即沙箱”：iframe 创建独立浏览上下文，sandbox 剥离危险能力，postMessage 作为唯一通信通道，父页面代理所有敏感操作（如网络、存储）。这确保 Agent JS 代码运行在最小权限下，仅通过显式授权的能力调用外部资源。相比服务器沙箱，该方法启动毫秒级、可并行数百个 iframe、资源消耗低，支持客户端渲染 Agent 推理路径，提升用户体验。

证据来自浏览器标准实现。根据 MDN 文档，iframe sandbox 默认禁用脚本、弹出、表单提交、插件加载和顶级导航，仅通过白名单 flag 恢复必要权限。例如，<iframe sandbox="allow-scripts"> 允许 JS 执行但保留唯一源隔离，无访问 cookies 或 localStorage。

实际架构如下：父页面（主应用）动态创建 iframe，加载 Agent 运行时（如自定义 agent.html）。iframe 加载后发起 handshake：postMessage 发送 {type: 'hello', sessionId: uuid ()}，父页面验证 origin 后回复 {capabilities: ['fetchHttp', 'readFile'], timeoutMs: 5000}。后续 Agent 调用如 {type: 'call', capability: 'fetchHttp', args: {url: 'api.example.com'}, id: 1}，父页面校验参数、执行 fetch 并返回结果。拒绝无效调用或超时直接销毁 iframe。

这种 capability 设计借鉴对象能力模型：每个能力是窄化函数，如 fetchHttp 仅限白名单域名、限 10KB 响应；readFile 仅读特定路径。父页面维护能力注册表，支持动态授予 / 撤销，实现多 Agent 隔离：每个 Agent 一 iframe，不同 capabilities 集。

可落地参数与清单：

  1. Iframe 配置：

    • sandbox="allow-scripts"（基础，仅 JS；避免 allow-same-origin 防源泄露）。
    • referrerpolicy="no-referrer" 防 referrer 攻击。
    • src 使用 data: URL 或 srcdoc 嵌入 Agent 代码，避免网络加载："data:text/html,/* agent runtime */"。
    • 双 iframe 模式：外层 iframe 限 frame-src，外层代理内层导航。

  2. PostMessage 协议（JSON RPC 风格）：

    // 请求
{ id: uuid(), type: 'call/hello/result', capability: 'fetchHttp', args: {url, method}, timestamp: Date.now() }
// 响应
{ id: uuid(), type: 'result/error', result: {...}, error: 'Invalid capability' }
    • 父 / 子均校验 event.origin === '*' 或预期源（沙箱源为 null）。
    • 限消息大小 <1KB，超时 30s 无响应销毁。
    • 使用 MessageChannel 专用端口：parent.port.postMessage ()，更安全。

  3. CSP 强化（iframe 源 meta）：

    Content-Security-Policy: default-src 'none'; script-src 'self'; connect-src 'none';
    • 禁用外部脚本 / 连接，Agent 网络全代理。

  4. 能力清单示例（父页面实现）：

    能力 参数 限额 用途
    fetchHttp {url, headers?} 域名白名单，5s 超时，10 req/min Agent 工具调用
    log {level, msg} 无 调试
    updateUI {state} 校验 schema 渲染结果
    callTool {toolId, input} 预授权工具 LLM 工具

  5. 生命周期管理：

    • 创建：createIframe (url, caps) → load → handshake (3s 内)。
    • 心跳：每 10s {type: 'heartbeat'}，超时 kill。
    • 销毁：iframe.remove () 清内存。
    • 多 Agent：池化 50 iframe，LRU 复用。

监控要点：

  • 指标：iframe 数、消息延迟、能力调用率、销毁因（超时 / 错误）。
  • 异常：postMessage 频率 >100/s 限流；异常栈代理返回不泄露父信息。
  • 回滚：fallback 到 Web Workers（弱隔离）或服务器代理。

风险与缓解：

  • postMessage 注入：始终校验 source === iframe.contentWindow。
  • 侧信道（timing/cache）：CSP block 外部，随机化响应延迟。
  • JS 逃逸：避免 allow-top-navigation，监控异常。

该方案已在插件系统和本地 LLM 工具中验证，如 Model Context Protocol 提案中使用 postMessage 传输工具。Browser Use 等平台虽聚焦服务器，但浏览器沙箱补全客户端场景。

参数落地后，单页支持 100+ Agent 并行，内存 <50MB/Agent，安全高于 naive eval。

资料来源：

查看归档