diff --git a/CHANGELOG.md b/CHANGELOG.md
index b0c6077..22db6b2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,10 @@
 > 所以不是每个版本号都有条目。条目格式 `## <版本> — <日期>`,新条目加在最上面。
 > 工程口径的完整记录见 `PROGRESS.md` / git log。
 
+## 0.60.25 — 2026-08-03
+
+- HTML 产物现在可以在对话中直接显示，进入可视区域后自动加载交互内容，也可放大到弹窗查看；HTML 与 Markdown 预览均可在渲染结果和源文件之间切换，常见 HTTPS 图表、地图及网页资源可正常加载。
+
 ## 0.60.24 — 2026-08-03
 
 - 对话中的 Mermaid 流程图、柱状图和折线图现在可以直接显示；图表语法有误时会保留源码并给出提示。另修复嵌套代码块格式异常时后续正文整段变成代码的问题。
diff --git a/PROGRESS.md b/PROGRESS.md
index e80bf3d..54100cd 100644
--- a/PROGRESS.md
+++ b/PROGRESS.md
@@ -2,7 +2,7 @@
 
 > 配合 `DESIGN.md`。本文件只记 phase 状态、决策偏差、文件量、下一步。每条 1-2 句:做了啥 + 关键判断;细节查 `git log` / `git diff` / `DESIGN §7.9`。
 
-最后更新:2026-08-03(Web Mermaid 直出 + Markdown 围栏容错,bump 0.60.24)
+最后更新:2026-08-03(交互式 HTML 预览 + 对话内嵌,bump 0.60.25)
 
 ---
 
@@ -23,6 +23,7 @@
 
 ### 2026-08-03
 
+- **08-03 / 0.60.25 / 交互式 HTML 预览 + 对话内嵌**:文件预览将 HTML 从普通源码提升为可切换“预览 / 源文件”的 sandbox iframe，允许脚本与 HTTPS CDN/接口但保持 opaque origin，禁止宿主权限、表单和顶层跳转；助手最终答复中的 HTML 产物改为进入可视区才加载的内嵌卡片，并可放大复用完整预览，Markdown 同步补源文件切换。Node 14 项、Python 27 项、JavaScript 语法及 diff 检查通过；当前环境无可用浏览器实例，真实页面点击/截图留部署后冒烟；无 schema、migration、HTTP API 或依赖变化。
 - **08-03 / 0.60.24 / Web Mermaid 直出 + Markdown 围栏容错**:模型偶发用同长度围栏嵌套 Markdown/Mermaid 示例，CommonMark 会把后续正文吞进未闭合代码块；新增仅针对该明确形态的前后端确定性修复，提示词统一要求外层使用更长异类围栏，历史上下文加载时同样修正且不批量回写生产数据。聊天页本地 vendoring Mermaid 11.16.0，仅在助手文字段定稿后顺序渲染 `language-mermaid`，采用 strict 安全级别、文本/边数上限，语法错误或组件不可用时保留源码并提示；真实 Edge 冒烟确认中文流程图与 XYChart 柱线组合图可生成 SVG。Python 27 项、Node 9 项、Ruff、JS/Python 语法及 diff 检查通过；无 schema、migration、HTTP API 或 Python 依赖变化。
 - **08-03 / 0.60.23 / Office→PDF 组件感知 + 展示路径兼容**:生产 task `92ac20cf` 暴露两层问题：上传消息给出 user-root 相对的 `测试pdf/x.doc`，host tool 又按 task_dir 拼接导致首次找不到；改用裸文件名后，host 仅安装 `libreoffice-impress` 却因只检测 `soffice` 而错误宣称支持 DOC，最终 Writer 导入返回 `source file could not be loaded`。现 `office_to_pdf` 同时解析 task 相对、user-root 展示路径与 `/workspace` 路径；Debian/Ubuntu 按 Writer/Calc/Impress 实际安装包缓存支持后缀，工具 schema 只声明可用格式，缺组件在启动转换前给出明确管理员提示。RUN bootstrap 与故障表同步要求 host 安装三组件；相关 30 项 unittest、Python 编译及 diff 格式检查通过，本机无 LibreOffice，真实 `.doc/.xlsx/.pptx` 冒烟留部署 host；无 schema、migration、HTTP API 或 Python 依赖变化，无需重建沙箱镜像。
 - **08-03 / 0.60.22 / 通用 PDF 路由修复 + host Office 转换**:复盘生产 task 发现通用 system prompt 只展示 `report --format docx`，模型遂误判平台渲染器只能出 Word，进而在 Docker 内探测 LibreOffice、临时安装 WeasyPrint 并手写转换脚本；现补齐 `report --format pdf` 唯一入口，新写 Markdown 报告直接由沙盒 Chromium 出 PDF。新增按 host `soffice` 实际可用性注册的 `office_to_pdf` typed tool，已有 DOCX/PPTX/XLSX/ODF 文件通过 backend host LibreOffice 转换，复用 `/workspace`→user_root 路径翻译并强制用户目录边界，Docker 内不再探测宿主命令。相关 34 项 unittest、Python 编译及 diff 格式检查通过；本机未安装 LibreOffice，真实 soffice 冒烟留部署 host 执行；无 schema、migration、HTTP API 或依赖变化，新增 host 工具无需重建沙箱镜像。
diff --git a/core/__init__.py b/core/__init__.py
index 682cd5c..4cb7cbb 100644
--- a/core/__init__.py
+++ b/core/__init__.py
@@ -1,3 +1,3 @@
 # zcbot 版本号单一事实源:web/app.py 的 FastAPI version、/healthz 返回、前端展示都引这里。
 # 改版本只动这一行。
-__version__ = "0.60.24"
+__version__ = "0.60.25"
diff --git a/tests/frontend_preview.test.mjs b/tests/frontend_preview.test.mjs
index f3de931..47beb23 100644
--- a/tests/frontend_preview.test.mjs
+++ b/tests/frontend_preview.test.mjs
@@ -2,27 +2,37 @@ import assert from "node:assert/strict";
 import { readFileSync } from "node:fs";
 import test from "node:test";
 
-import { htmlPreviewDocument } from "../web/static/js/preview_content.js";
+import {
+  HTML_PREVIEW_CSP,
+  configureHtmlPreviewFrame,
+  htmlPreviewDocument,
+} from "../web/static/js/preview_content.js";
 
 // preview.js has browser-only top-level bindings, so exercise the integration contract
 // through its shipped source and markup while keeping this test dependency-free.
 const previewJs = readFileSync(new URL("../web/static/js/preview.js", import.meta.url), "utf8");
 const pageHtml = readFileSync(new URL("../web/static/dev.html", import.meta.url), "utf8");
+const chatJs = readFileSync(new URL("../web/static/js/chat.js", import.meta.url), "utf8");
 
 test("HTML is a renderable category rather than plain text", () => {
   assert.match(previewJs, /html:\s+new Set\(\["html","htm"\]\)/);
-  assert.match(previewJs, /frame\.setAttribute\("sandbox", ""\)/);
-  assert.match(previewJs, /frame\.srcdoc = htmlPreviewDocument\(text\)/);
+  assert.match(previewJs, /configureHtmlPreviewFrame\(frame, text\)/);
 });
 
-test("HTML preview blocks scripts, navigation, and external resources", () => {
+test("HTML preview allows HTTPS scripts while blocking host privileges and navigation", () => {
   const document = htmlPreviewDocument("<!doctype html><html><head><title>x</title></head><body>x</body></html>");
   assert.match(document, /<head><meta http-equiv="Content-Security-Policy"/);
-  assert.match(document, /default-src 'none'/);
+  assert.match(HTML_PREVIEW_CSP, /script-src[^;]+https:/);
+  assert.match(HTML_PREVIEW_CSP, /connect-src https:/);
   assert.match(document, /form-action 'none'/);
   assert.match(document, /base-uri 'none'/);
   assert.ok(document.indexOf("Content-Security-Policy") < document.indexOf("<title>"));
-  assert.doesNotMatch(previewJs, /allow-scripts/);
+  const attrs = {};
+  const frame = { setAttribute(name, value) { attrs[name] = value; } };
+  configureHtmlPreviewFrame(frame, "<h1>x</h1>");
+  assert.equal(attrs.sandbox, "allow-scripts");
+  assert.doesNotMatch(attrs.sandbox, /allow-same-origin|allow-forms|allow-top-navigation|allow-popups/);
+  assert.equal(frame.referrerPolicy, "no-referrer");
 });
 
 test("HTML fragments receive a restrictive head before their content", () => {
@@ -38,3 +48,17 @@ test("main and mini previews expose preview/source mode controls", () => {
     assert.match(previewJs, new RegExp(`_showRenderableText\\("${prefix}", cat, text\\)`));
   }
 });
+
+test("assistant HTML artifacts render inline with lazy loading and an expand action", () => {
+  const mediaJs = readFileSync(new URL("../web/static/js/media.js", import.meta.url), "utf8");
+  assert.match(mediaJs, /cat === "html"/);
+  assert.match(mediaJs, /class="art-html-open"/);
+  assert.match(mediaJs, /new IntersectionObserver/);
+  assert.match(mediaJs, /configureHtmlPreviewFrame\(frame, source/);
+  assert.match(pageHtml, /\.art-html-frame/);
+  assert.match(chatJs, /renderArtifactBarHtml\(extractArtifactRels\(p\.content, wd\), "html"\)/);
+  const clickHandler = chatJs.indexOf('$("chat-stream").addEventListener("click"');
+  const expandHandler = chatJs.indexOf('e.target.closest(".art-html-open[data-rel]")');
+  const sendMessage = chatJs.indexOf("async function sendMessage");
+  assert.ok(clickHandler >= 0 && expandHandler > clickHandler && expandHandler < sendMessage);
+});
diff --git a/web/static/dev.html b/web/static/dev.html
index 820902c..87bccd1 100644
--- a/web/static/dev.html
+++ b/web/static/dev.html
@@ -1057,7 +1057,7 @@
     font-size: 11px; cursor: pointer; transition: var(--t);
   }
   .paste-chip-del:hover { background: var(--c-red-bg); border-color: var(--c-red-bd); color: var(--c-red); }
-  /* 内联图片/视频:产物 chip 替代,fetch 完直接展示 */
+  /* 内联图片/视频/HTML:产物 chip 替代,进入可视区后 fetch 并展示 */
   .art-media {
     border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
     background: #fff; display: inline-block; line-height: 0;
@@ -1251,6 +1251,28 @@
     flex: 1; font-weight: 500; overflow: hidden;
     text-overflow: ellipsis; white-space: nowrap;
   }
+  .art-html {
+    flex: 1 1 100%; min-width: 0; max-width: 760px;
+    border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
+    background: #fff; font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
+  }
+  .art-html-head {
+    height: 34px; padding: 4px 6px 4px 10px; display: flex; align-items: center; gap: 8px;
+    border-bottom: 1px solid var(--border); background: var(--panel-muted); line-height: 1.4;
+  }
+  .art-html-head > span {
+    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    color: var(--muted); font-size: 12px;
+  }
+  .art-html-open { flex: 0 0 auto; padding: 2px 8px; font-size: 11px; background: #fff; }
+  .art-html-viewport {
+    height: min(360px, 52vh); display: flex; align-items: center; justify-content: center;
+    background: #fff; line-height: 1.4;
+  }
+  .art-html-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
+  .art-html-viewport .art-media-loading,
+  .art-html-viewport .art-media-error { padding: 10px; color: var(--muted); font-size: 11px; }
+  .art-html-viewport .art-media-error { color: #b34a4a; }
   .preview-modes {
     display: inline-flex; align-items: center; gap: 2px; padding: 2px;
     border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel-muted);
diff --git a/web/static/js/chat.js b/web/static/js/chat.js
index 340e561..2586b46 100644
--- a/web/static/js/chat.js
+++ b/web/static/js/chat.js
@@ -1581,12 +1581,12 @@ function renderMessages(msgs, { stickBottom = true } = {}) {
     if (typeof p.content === "string" && p.content) {
       html += `<div class="body">${renderMd(p.content)}</div>`;
       if (role === "assistant") hasVisibleAssistantContent = true;
-      // assistant 正文里 echo 的 <wd>/... 路径**永远**挂 chip(绕开 seenRels —— 上面
-      // tool 结果可能 inline 过同图,但 chip 是小按钮无视觉污染,助手回复里有可
-      // 点的"产物锚点"比没有好);强制 allowInlineMedia=false 防止大图被重复 inline。
+      // assistant 正文里 echo 的 <wd>/... 路径**永远**展示(绕开 seenRels)。图片/视频
+      // 已可能在产物工具结果中内联，仍用 chip 防重复；HTML 通常由 write/shell 产出，
+      // 没有 producer 工具卡可承载，故在最终答复处直接升级为懒加载内嵌卡片。
       if (role === "assistant") {
         const wd = _workingDirName(state.taskMeta && state.taskMeta.working_dir);
-        html += renderArtifactBarHtml(extractArtifactRels(p.content, wd), false);
+        html += renderArtifactBarHtml(extractArtifactRels(p.content, wd), "html");
       }
     }
     if (Array.isArray(p.tool_calls) && p.tool_calls.length) {
@@ -2362,7 +2362,7 @@ document.addEventListener("keydown", (e) => {
   else if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); stopVoiceInput(true); }
 }, true);
 
-// 对话流里 artifact chip / 内联 img 点击委托 — 复用右栏文件预览 modal(modal 内自带"下载")。
+// 对话流里 artifact chip / 内联 img / HTML 放大按钮点击委托 — 复用文件预览 modal。
 // 视频走原生 <video controls>:点击=播放/暂停,全屏走浏览器自带按钮,不进 modal —
 // 弹个 modal 反而打断播放,不如交给浏览器。
 $("chat-stream").addEventListener("click", (e) => {
@@ -2394,6 +2394,12 @@ $("chat-stream").addEventListener("click", (e) => {
     if (rel) openFilePreview(rel);
     return;
   }
+  const htmlOpen = e.target.closest && e.target.closest(".art-html-open[data-rel]");
+  if (htmlOpen) {
+    const rel = htmlOpen.dataset.rel;
+    if (rel) openFilePreview(rel);
+    return;
+  }
   const inlineImg = e.target.closest && e.target.closest(".art-media-image[data-rel]");
   if (inlineImg) {
     const rel = inlineImg.dataset.rel;
diff --git a/web/static/js/media.js b/web/static/js/media.js
index 73e3b65..4266249 100644
--- a/web/static/js/media.js
+++ b/web/static/js/media.js
@@ -1,11 +1,12 @@
 // 对话内的工具活动标签 + artifact(产物)抽取与渲染:
 // toolActivityLabel(工具调用→中文活动名)、extractArtifactRels(从结果文本/working_dir 提产物相对路径)、
-// extractMediaBanner(seedream/seedance 媒体横幅)、renderArtifactBarHtml(产物 chip 条,图/视频内联占位)、
-// upgradeMediaArtifacts(占位异步 fetch blob 填 <img>/<video>,带缓存)、downloadFile(blob 下载)。
+// extractMediaBanner(seedream/seedance 媒体横幅)、renderArtifactBarHtml(产物 chip 条,图/视频/HTML 内联占位)、
+// upgradeMediaArtifacts(可视区内异步填 <img>/<video>/<iframe>,带缓存)、downloadFile(blob 下载)。
 // 供 main 的 renderMessages 及 preview/files(downloadFile)使用。
 import { state } from "./state.js";
 import { escapeHtml } from "./format.js";
 import { _categorize } from "./preview.js";
+import { configureHtmlPreviewFrame } from "./preview_content.js";
 import { logout } from "./auth.js";
 import { message } from "./dialog.js";
 
@@ -164,16 +165,21 @@ export function extractArtifactRels(text, workingDir) {
   return out;
 }
 
-// allowInlineMedia 控制图片/视频是否升级为内联 <img>/<video>:产物工具
-// (seedream/seedance)+ assistant 正文传 true,通用工具(grep/read/shell/glob)
-// 结果里 echo 的路径传 false → 图片/视频也走 chip 按钮(点开仍弹预览 modal),
-// 这样既不会把无关老图占整屏,又保留"路径可点"的可发现性。
-export function renderArtifactBarHtml(rels, allowInlineMedia = true) {
+// inlineMode 控制升级范围:true=图片/视频/HTML，"html"=仅 HTML，false=全走 chip。
+// 产物工具传 true；assistant 正文传 "html"，避免重复内联图片/视频但让通用工具生成的
+// HTML 有展示位；普通工具结果传 false，引用到的文件仍走 chip，避免把旧产物铺满消息。
+export function renderArtifactBarHtml(rels, inlineMode = true) {
   if (!rels || !rels.length) return "";
   const items = rels.map((rel) => {
     const name = rel.split("/").pop() || rel;
     const cat = _categorize(rel);
-    if (allowInlineMedia && (cat === "image" || cat === "video")) {
+    if ((inlineMode === true || inlineMode === "html") && cat === "html") {
+      return `<section class="art-html" data-rel="${escapeHtml(rel)}" title="${escapeHtml(rel)}">
+        <div class="art-html-head"><span>${escapeHtml(name)}</span><button type="button" class="art-html-open" data-rel="${escapeHtml(rel)}">放大</button></div>
+        <div class="art-html-viewport"><span class="art-media-loading">进入可视区域后加载…</span></div>
+      </section>`;
+    }
+    if (inlineMode === true && (cat === "image" || cat === "video")) {
       // 占位元素;插入 DOM 后 upgradeMediaArtifacts 异步 fetch blob → 填 <img>/<video>。
       // 不在这里发请求避免 string-build 阶段失控的并发;upgrade 走 DOM walk 一次。
       return `<span class="art-media art-media-${cat}" data-rel="${escapeHtml(rel)}" data-cat="${cat}" title="${escapeHtml(rel)}"><span class="art-media-loading">${escapeHtml(name)} 加载中…</span></span>`;
@@ -187,6 +193,8 @@ export function renderArtifactBarHtml(rels, allowInlineMedia = true) {
 // 拿 blob 再转 URL。同 rel 在同会话内复用,免重复拉。task 切换 / logout 时
 // _flushMediaArtifactCache 清掉旧 URL 防泄漏。
 const _mediaArtifactCache = new Map();
+const _htmlArtifactCache = new Map();
+const INLINE_HTML_MAX = 2 * 1024 * 1024;
 
 function _fetchMediaBlobUrl(rel) {
   if (_mediaArtifactCache.has(rel)) return _mediaArtifactCache.get(rel);
@@ -201,11 +209,64 @@ function _fetchMediaBlobUrl(rel) {
   return p;
 }
 
+function _fetchHtmlArtifact(rel) {
+  if (_htmlArtifactCache.has(rel)) return _htmlArtifactCache.get(rel);
+  const p = fetch("/v1/files/download?path=" + encodeURIComponent(rel), {
+    headers: { "Authorization": "Bearer " + state.token },
+  }).then(async (r) => {
+    if (!r.ok) throw new Error("HTTP " + r.status);
+    const blob = await r.blob();
+    if (blob.size > INLINE_HTML_MAX) throw new Error("文件过大，请点击放大预览");
+    return blob.text();
+  });
+  _htmlArtifactCache.set(rel, p);
+  return p;
+}
+
+let _htmlArtifactObserver = null;
+function _loadInlineHtml(node) {
+  if (!node || node.dataset.loaded) return;
+  node.dataset.loaded = "1";
+  const rel = node.dataset.rel;
+  const viewport = node.querySelector(".art-html-viewport");
+  _fetchHtmlArtifact(rel).then((source) => {
+    if (!node.isConnected || !viewport) return;
+    viewport.innerHTML = "";
+    const frame = document.createElement("iframe");
+    frame.className = "art-html-frame";
+    configureHtmlPreviewFrame(frame, source, (rel.split("/").pop() || rel) + " 内嵌预览");
+    viewport.appendChild(frame);
+  }).catch((e) => {
+    if (!viewport) return;
+    viewport.innerHTML = `<span class="art-media-error">${escapeHtml(e.message || String(e))}</span>`;
+  });
+}
+
+function _observeInlineHtml(node) {
+  if (typeof IntersectionObserver !== "function") {
+    _loadInlineHtml(node);
+    return;
+  }
+  if (!_htmlArtifactObserver) {
+    _htmlArtifactObserver = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (!entry.isIntersecting) continue;
+        _htmlArtifactObserver.unobserve(entry.target);
+        _loadInlineHtml(entry.target);
+      }
+    }, { rootMargin: "240px 0px" });
+  }
+  _htmlArtifactObserver.observe(node);
+}
+
 export function _flushMediaArtifactCache() {
   for (const p of _mediaArtifactCache.values()) {
     p.then((u) => URL.revokeObjectURL(u)).catch(() => {});
   }
   _mediaArtifactCache.clear();
+  _htmlArtifactCache.clear();
+  if (_htmlArtifactObserver) _htmlArtifactObserver.disconnect();
+  _htmlArtifactObserver = null;
 }
 
 // DOM walk:把所有 .art-media[data-rel] 占位换成 <img> / <video>。
@@ -235,6 +296,11 @@ export function upgradeMediaArtifacts(root) {
       node.innerHTML = `<span class="art-media-error">${escapeHtml(rel.split("/").pop() || rel)} 加载失败:${escapeHtml(e.message || String(e))}</span>`;
     });
   });
+  const htmlNodes = (root || document).querySelectorAll(".art-html[data-rel]:not([data-upgraded])");
+  htmlNodes.forEach((node) => {
+    node.dataset.upgraded = "1";
+    _observeInlineHtml(node);
+  });
 }
 
 export function downloadFile(rel) {
diff --git a/web/static/js/preview.js b/web/static/js/preview.js
index eb6106e..09f6067 100644
--- a/web/static/js/preview.js
+++ b/web/static/js/preview.js
@@ -6,7 +6,7 @@ import { state } from "./state.js";
 import { $ } from "./dom.js";
 import { humanSize, escapeHtml } from "./format.js";
 import { renderMd, highlightIn } from "./markdown.js";
-import { HTML_PREVIEW_CSP, htmlPreviewDocument } from "./preview_content.js";
+import { configureHtmlPreviewFrame } from "./preview_content.js";
 import { logout } from "./auth.js";
 import { downloadFile } from "./media.js";
 
@@ -64,8 +64,8 @@ export function _categorize(rel) {
 
 let _fpCurrentRel = null;
 
-// Markdown / HTML 共用“预览 / 源文件”切换。HTML 放入无权限 sandbox iframe，
-// 同时注入 CSP，阻止脚本和外部资源请求；保留内联样式与 data/blob 图片以便静态报告正常展示。
+// Markdown / HTML 共用“预览 / 源文件”切换。HTML 在 opaque-origin sandbox iframe
+// 中运行：可执行脚本、加载 HTTPS 资源，但不能读取 zcbot 页面或发起表单/顶层跳转。
 const _textPreviewState = { fp: null, mp: null };
 
 function _resetTextModes(prefix) {
@@ -88,11 +88,7 @@ function _showHtml(body, text) {
   body.innerHTML = "";
   const frame = document.createElement("iframe");
   frame.className = "preview-frame preview-html-frame";
-  frame.title = "HTML 文件预览";
-  frame.setAttribute("sandbox", "");
-  frame.setAttribute("csp", HTML_PREVIEW_CSP);
-  frame.referrerPolicy = "no-referrer";
-  frame.srcdoc = htmlPreviewDocument(text);
+  configureHtmlPreviewFrame(frame, text);
   body.appendChild(frame);
 }
 
diff --git a/web/static/js/preview_content.js b/web/static/js/preview_content.js
index 8aecc61..b1d9cb7 100644
--- a/web/static/js/preview_content.js
+++ b/web/static/js/preview_content.js
@@ -1,7 +1,12 @@
-// 可独立测试的预览内容安全策略。HTML 预览只允许文件内的静态样式和内嵌媒体，
-// 不允许脚本、表单提交、外部资源请求或 base URL 改写。
-export const HTML_PREVIEW_CSP = "default-src 'none'; img-src data: blob:; media-src data: blob:; " +
-  "font-src data:; style-src 'unsafe-inline'; form-action 'none'; base-uri 'none'";
+// 可独立测试的 HTML 预览安全策略。脚本和 HTTPS 外部资源可运行，满足图表、
+// 地图、WebGL 等通用产物；iframe 保持 opaque origin，不能触达 zcbot 宿主权限。
+export const HTML_PREVIEW_CSP = "default-src 'none'; " +
+  "script-src 'unsafe-inline' 'unsafe-eval' 'wasm-unsafe-eval' https:; " +
+  "style-src 'unsafe-inline' https:; img-src data: blob: https:; " +
+  "media-src data: blob: https:; font-src data: https:; connect-src https:; " +
+  "worker-src blob:; child-src blob: https:; frame-src https:; manifest-src https:; " +
+  "object-src 'none'; form-action 'none'; base-uri 'none'";
+export const HTML_PREVIEW_SANDBOX = "allow-scripts";
 
 export function htmlPreviewDocument(text) {
   const meta = `<meta http-equiv="Content-Security-Policy" content="${HTML_PREVIEW_CSP}">`;
@@ -11,3 +16,12 @@ export function htmlPreviewDocument(text) {
   }
   return `<head>${meta}</head>${source}`;
 }
+
+export function configureHtmlPreviewFrame(frame, text, title = "HTML 文件预览") {
+  frame.title = title;
+  frame.setAttribute("sandbox", HTML_PREVIEW_SANDBOX);
+  frame.setAttribute("csp", HTML_PREVIEW_CSP);
+  frame.referrerPolicy = "no-referrer";
+  frame.srcdoc = htmlPreviewDocument(text);
+  return frame;
+}