Datasette Apps: 在沙盒環境中託管自定義 HTML 應用程式

概覽

Datasette Apps 是自包含的 HTML 和 JavaScript 應用程式，運行在由 Datasette 實例託管且受到嚴格限制的 <iframe> 沙盒中。此插件允許開發者建立自定義的使用者介面和視覺化工具，這些工具可以針對 Datasette 資料執行唯讀 SQL 查詢，並透過預先配置的儲存查詢（stored queries）執行寫入操作。

這種能力將 Datasette 從一個僅用於提供唯讀資料的工具，轉變為一個可以託管完整讀寫應用程式的平台，有效地將關聯式資料庫後端與自包含的 HTML 前端結合在一起。

安全架構：沙盒化與 CSP

Datasette Apps 的主要技術挑戰在於如何在可能包含敏感、已驗證資料的網域上運行不受信任的 HTML 和 JavaScript。此插件採用了深度防禦策略，以防止資料外洩和未經授權的存取。

Iframe 沙盒化

應用程式使用 <iframe sandbox="allow-scripts allow-forms" srcdoc="..."> 進行渲染。此配置確保了沙盒化的應用程式無法：

  • 存取父應用程式的 DOM。
  • 讀取或寫入 cookies。
  • 存取 localStorage 或其他瀏覽器機密資料。

內容安全政策 (CSP)

為了防止惡意應用程式使用 fetch() 將私密資料傳送到外部伺服器，Datasette Apps 透過 <meta http-equiv="Content-Security-Policy"> 標頭注入嚴格的內容安全政策 (CSP)。該政策配置如下：

default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data: blob:;

一旦設定，此 CSP 政策對於框架內的內容是不可變的，防止 JavaScript 移除或更新標頭以規避限制。

透過 MessageChannel 進行安全通訊

為了在不損害安全性的情況下讓應用程式執行有用的工作，此插件使用基於 MessageChannel() 的傳輸方式，在 iframe 與父視窗之間進行通訊。這比 postMessage() 更受青睞，因為如果頁面導向其他位置，MessageChannel() 會自動關閉，從而降低了從不受信任的外部頁面執行指令的風險。

資料互動與寫入操作

唯讀 SQL 查詢

應用程式可以使用 JavaScript 針對允許清單中的資料庫執行唯讀 SQL 查詢。父視窗會在執行查詢並將結果返回給應用程式之前，先驗證目標資料庫。

受控的寫入操作

為了在不將資料庫暴露於任意 SQL 注入或惡意更新的情況下啟用寫入功能，Datasette Apps 利用了儲存查詢（於 Datasette 1.0a31 中引入）。

管理員不再允許原始 SQL 寫入，而是建立特定的儲存寫入查詢（例如 add_todo 查詢）。應用程式接著透過名稱與特定參數來呼叫這些查詢：

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

AI 驅動的開發工作流

雖然 datasette-apps 插件並不依賴 LLM，但其架構針對 AI 生成進行了優化。由於應用程式是單一檔案的 HTML 文件，它們是現代 LLM 的理想輸出格式。

  • 提示詞整合： 「建立應用程式」表單提供了一個包含資料庫結構（schema）的可複製提示詞，使用者可以將其貼到 LLM 中，以生成應用程式完整的 HTML/JS 程式碼。
  • Datasette Agent 整合： 當與 Datasette Agent 一起使用時，AI 助手可以直接使用如 app_create 等工具來建立和編輯應用程式，模仿了在 Claude 等工具中看到的「Artifacts」模式。

社群洞察與觀點

開發者之間的討論顯示，「BYO UI」（自備 UI）模式正成為資料驅動應用程式的新標準，正從固定的 SaaS 儀表板轉向可塑性高、由代理人（agent）生成的介面。

「我感覺到，所謂『SaaS 應用程式作為固定 UI 覆蓋在資料庫之上，因為編碼代理人（coding agents）的出現而走向終結』，其含義是指只有固定的儀表板模式會走向終結，而非 SaaS 本身，而 BYO UI 是新時代的基本門檻。」

其他使用者也注意到將應用程式邏輯與資料放在同一個地方的實用性，儘管有些人對如果給予代理人過多的自主權來建立這些應用程式，可能會在程式碼庫中產生「AI 垃圾（AI slop）」的疑慮。

Sources