Datasette Apps：在 Datasette 内部托管自定义 HTML 应用

背景

Datasette 自首个版本发布以来，一直以其灵活的 JSON API 后端著称，允许开发者通过自定义 HTML 和 JavaScript 构建前端应用。作者 Simon Willison 早在 Eventbrite 工作期间，就曾利用这一特性构建了一个内部文档搜索引擎：通过 Cron 任务将不同系统的文档导入 SQLite，随后通过 Datasette 实例提供服务，并配合直接查询 Datasette API 的自定义 HTML+JavaScript 搜索界面。

在那次实践中，客户端 JavaScript 直接构建 SQL 查询，起初被视为一种工程上的玩笑，但事实证明这是一种极其高效的应用迭代方式。结合后来构建 HTML 工具集的经验以及对 Claude Artifacts 的实验，作者意识到，将 Datasette 风格的后端与自包含的 HTML 前端相结合，是一种极具威力的组合。

Datasette Apps 最初是作为 Datasette Agent 的 Claude Artifacts 机制的尝试而诞生的（最初名为 datasette-agent-artifacts，后重命名为 datasette-agent-edit）。但在开发过程中，作者发现这种沙箱化的模式不仅仅适用于为界面添加自定义应用，它本身就是一个值得独立推广的核心概念。因此，Datasette Apps 从 Datasette Agent 插件中独立出来，成为 Datasette 生态系统中的一个顶级概念。

核心内容

Datasette Apps 是托管在 Datasette 应用内的自包含 HTML+JavaScript 应用程序。它们运行在一个严格受限的 <iframe> 沙箱中，允许使用 JavaScript 对 Datasette 中的数据执行只读 SQL 查询。如果配置了存储查询（Stored Queries），它们也可以执行写入操作。

安全沙箱机制

Datasette Apps 的安全性是其可行性的基石。由于 Datasette 实例可能包含敏感数据，运行不受信任的 HTML 和 JavaScript 必须极其谨慎。作者采用了一种“魔法组合”来实现这一目标：

1. Iframe 沙箱属性：使用 sandbox="allow-scripts allow-forms" 属性。这防止了应用访问父级 DOM、Cookie 或 localStorage，从而阻止了恶意或 buggy 的应用窃取秘密或数据。
2. 内容安全策略 (CSP)：通过注入 <meta http-equiv="Content-Security-Policy"> 头，进一步锁定对域外的访问。例如，设置 default-src 'none'，仅允许内联脚本和样式，以及来自 data: 或 blob: 的数据。
   • 作者通过研究确认，一旦在 HTML 页面中设置了 CSP 头，该策略对于该帧的内容就是不可变的，恶意 JavaScript 无法更新或删除它。
   • 这种组合有效防止了应用通过 fetch() 等工具向外部主机发送 HTTP 请求，从而避免了私有数据的外泄。

受限 API 通信：从 postMessage 到 MessageChannel

在严格锁定 iframe 后，挑战在于如何安全地开放必要的功能。

• 初始方案：最初使用 postMessage() 建立子 iframe 与父窗口之间的通信协议，允许父窗口验证查询是否在允许的数据库白名单中，然后执行只读 SQL 查询。
• 安全升级：受 GPT-5.5 建议的影响（指出 postMessage() 在 iframe 加载不受信任域代码时可能存在漏洞），作者采用了 MessageChannel() 作为传输层。MessageChannel() 的优势在于，如果页面导航到其他位置，通道会自动关闭，从而消除了执行来自不受信任的外部页面的命令的风险。

可见的日志系统

为了提升开发效率，Datasette Apps 引入了可见的日志功能：

• 错误捕获：当应用尝试访问 CSP 白名单之外的资源（如用户图像）时，错误会被捕获并传输回父帧，在有用的错误日志中显示。
• SQL 查询日志：所有的 SQL 查询也会在底部可见地记录，方便调试。
• 未来展望：作者曾实验过基于错误自动构建 CSP 白名单的“一键允许”机制，但尚未集成到 datasette-apps 插件中。

存储查询用于写入操作

为了支持条件性写入数据库，作者利用了 Datasette 1.0a31 版本中大幅升级的“存储查询”（Stored Queries，前身为 Canned Queries）功能。

• 机制：用户可以创建一个执行插入或更新的存储写入查询，并将其白名单授权给特定应用使用。
• 使用示例：

  const result = await datasette.storedQuery("todos", "add_todo", {
    title: "Buy milk",
    due_date: "2026-06-20",
    priority: "high",
    completed: false
  });
  

• 目标：目前作者仍在探索这一功能的可能性，但目标是支持在 Datasette Apps 中安全地构建完整的读写应用程序。

AI 辅助生成应用

虽然 Datasette Apps 插件本身不依赖 LLM，但这些自包含的应用程序非常适合由现代 LLM 编写。

• 提示词复制：创建应用的表单末尾包含一个可复制的提示词（Prompt），其中包含了构建新应用所需的所有信息，包括所选数据库的模式（Schema）。
• 工作流：用户可以点击“复制”，将提示词粘贴到 ChatGPT、Claude 或 Gemini 中，描述需求，模型有很大概率能生成构建应用所需的代码。
• Agent 集成：如果安装了 Datasette Agent，AI 助手将获得创建和编辑应用的工具，实现类似 Claude Artifacts 的体验。

关键要点

• 安全隔离：Datasette Apps 通过 <iframe sandbox> 和严格的 CSP 头，确保不受信任的 JavaScript 代码无法访问父级 DOM、Cookie 或 localStorage，也无法向外部域发起网络请求。
• 通信安全：采用 MessageChannel() 而非 postMessage() 进行 iframe 与父窗口通信，利用通道在页面导航时自动关闭的特性，防止跨域代码注入风险。
• 读写分离：只读 SQL 查询通过白名单机制直接执行；写入操作则通过 Datasette 的“存储查询”功能，由管理员预先定义并授权，确保数据写入的安全性。
• 开发体验优化：内置可见的错误日志和 SQL 查询日志，帮助开发者快速定位 CSP 违规或查询错误。
• AI 原生友好：提供标准化的提示词模板，使得 LLM 能够轻松生成符合 Datasette 架构的 HTML/JS 应用，并与 Datasette Agent 深度集成。
• 历史渊源：该功能源于作者早期的 Eventbrite 内部工具项目以及对 Claude Artifacts 的实验，旨在将持久化关系数据库的能力赋予自包含的前端应用。

意义与影响

Datasette Apps 的推出标志着 Datasette 从一个单纯的数据可视化工具，向一个支持复杂交互应用的平台演进。

1. 重新定义“轻量级应用”：它证明了在严格的安全沙箱内，自包含的 HTML/JS 应用可以安全地访问后端数据。这种模式降低了构建数据驱动应用的门槛，无需复杂的后端服务即可实现丰富的前端交互。
2. 安全与灵活的平衡：通过 CSP 和 MessageChannel 的组合，Datasette 解决了一个长期存在的安全难题：如何在允许执行用户自定义代码的同时，防止数据泄露。这为其他类似平台提供了重要的安全设计参考。
3. AI 辅助开发的闭环：通过将 LLM 生成的代码与 Datasette 的安全执行环境相结合，Datasette Apps 构建了一个从“自然语言描述”到“安全运行应用”的完整闭环。这不仅提升了开发效率，也降低了非专业开发者使用数据库的门槛。
4. 生态系统的扩展：Datasette Apps 作为 Datasette 生态系统中的顶级概念，丰富了其插件体系。它与 Datasette Agent 的集成，使得 AI 助手能够直接操作和创建应用，进一步增强了 Datasette 在 AI 时代的数据处理能力。

总之，Datasette Apps 不仅是一个功能插件，更是作者多年在“氛围编码”（vibe-coded）HTML 工具领域实验的结晶，它将这种实验性方法转化为 Datasette 的核心特性，为数据应用开发提供了一种新颖、安全且高效的范式。