feat(web): embed interactive HTML artifacts
This commit is contained in:
parent
328607671a
commit
4ec2638d38
|
|
@ -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 流程图、柱状图和折线图现在可以直接显示；图表语法有误时会保留源码并给出提示。另修复嵌套代码块格式异常时后续正文整段变成代码的问题。
|
||||
|
|
|
|||
|
|
@ -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 工具无需重建沙箱镜像。
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
# zcbot 版本号单一事实源:web/app.py 的 FastAPI version、/healthz 返回、前端展示都引这里。
|
||||
# 改版本只动这一行。
|
||||
__version__ = "0.60.24"
|
||||
__version__ = "0.60.25"
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue