AI 生成的代码怎么在前端安全预览 + 一键运行：sandbox iframe 实战 🔒

一句话:让 AI 生成的前端代码在页面里"一键运行"看效果,绝对不能直接 eval 或者塞进同源 iframe------那是把 XSS 大门给用户敞开。正确姿势是 sandbox iframe + srcdoc + 严格的 postMessage 通道。我做了个这样的预览器,把安全这块讲透。

场景

做了个 AI 写代码的小工具,用户描述需求,后端配在零代码智能体平台上的流程吐出一段 HTML/CSS/JS,前端要能立刻预览效果。问题来了:这段代码是 AI 生成的,等于不可信第三方代码,跑在我自己页面里风险极高。

第一道:sandbox 属性

iframe 的 sandbox 是核心。我给的配置:

ini 复制代码

<iframe
  sandbox="allow-scripts"
  srcdoc="<!-- 生成的代码 -->"
></iframe>

注意我只给了 allow-scripts ,死活没给 allow-same-origin。这俩一起给等于没沙箱------MDN 都警告了。只给 scripts 的话,iframe 里的代码能跑,但拿不到我主站的 cookie、localStorage、也访问不了父窗口的 DOM。它被关在一个独立的 origin 里。

代价是:iframe 里发 fetch 会因为没有 same-origin 各种受限,但预览场景本来也不该让它联网,正好。

第二道:srcdoc 而不是 src

我用 srcdoc 把代码直接当文档内容塞进去,不走 URL。这样不用起服务、不留临时文件,也避免了 blob URL 的一些泄漏问题。组装的时候把用户代码包进一个最小 HTML 骨架:

xml 复制代码

function buildDoc(html, css, js) {
  return `<!DOCTYPE html><html><head><style>${css}</style></head>
  <body>${html}<script>${js}</script></body></html>`
}

那个 </script> 的反斜杠别漏------不转义的话用户代码里如果有 </script> 字符串会提前闭合,整个文档就崩了。我第一次就栽这。

第三道:通信只走 postMessage 白名单

iframe 想把运行时的报错回传给我(显示在控制台面板),只能用 postMessage。接收端必须校验:

kotlin 复制代码

window.addEventListener('message', (e) => {
  if (e.origin !== 'null') return        // sandbox iframe 的 origin 是字符串 'null'
  if (e.data?.type !== 'console') return
  appendLog(e.data.payload)
})

sandbox 没给 same-origin 时,iframe 的 origin 是字面量 'null',这点挺反直觉,我对着 e.origin 打印了好几次才反应过来。

还有点没做好

死循环防不住。用户(或 AI)写个 while(true),iframe 直接卡死,目前只能让用户手动点"重置"重建 iframe。想上 Web Worker + 超时 kill,还没动手。
CSP 我只在主站加了,iframe 内部没强制,有进一步收紧的空间。

模型这端

代码生成质量决定体验下限。我没自己折腾推理服务,直接用讯飞 MaaS(模型即服务)的接口出码,多模型可切,生成 + 效果测评在它平台里一站配齐,我前端只管安全地把结果跑起来。

你们跑不可信代码还有别的隔离手段吗?有人上 WebContainers 或者 QuickJS-wasm 的吗?评论区交流下,那个死循环 kill 我正缺方案。