Datasette Apps: サンドボックス環境でのカスタムHTMLアプリケーションのホスティング

概要

Datasette Appsは、Datasetteインスタンス上でホストされる、厳格に制限された<iframe>サンドボックス内で動作する、自己完結型のHTMLおよびJavaScriptアプリケーションです。このプラグインを使用すると、開発者は、Datasetteデータに対して読み取り専用のSQLクエリを実行し、事前設定された保存済みクエリ（stored queries）を通じて書き込み操作を実行できる、カスタムユーザーインターフェースおよび可視化を作成できます。

この機能により、Datasetteは読み取り専用データを配信するツールから、完全な読み書き可能なアプリケーションをホストするためのプラットフォームへと変貌を遂げ、リレーショナルデータベースのバックエンドと自己完結型のHTMLフロントエンドを効果的に組み合わせることができます。

セキュリティアーキテクチャ: サンドボックス化とCSP

Datasette Appsの主な技術的課題は、機密情報や認証済みデータを含む可能性のあるドメイン上で、信頼できないHTMLおよびJavaScriptを実行することです。このプラグインは、データの持ち出しや不正アクセスを防ぐために、多層防御戦略を採用しています。

Iframe サンドボックス化

アプリは<iframe sandbox="allow-scripts allow-forms" srcdoc="...">を使用してレンダリングされます。この構成により、サンドボックス化されたアプリケーションは以下の操作ができなくなります：

  • 親アプリケーションのDOMへのアクセス。
  • クッキーの読み取りまたは書き込み。
  • 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 による安全な通信

セキュリティを損なうことなくアプリに有用なな作業を行わせるため、このプラグインは、iframeと親ウィンドウ間の通信にMessageChannel()ベースのトランスポートを使用します。これは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はそれを出力形式として理想的に扱えます。

  • プロンプトの統合: 「Create app」フォームは、データベーススキーマを含むコピー可能なプロンプトを提供します。ユーザーはこれをLLMに貼り付けて、アプリの完全なHTML/JSコードを生成させることができます。
  • Datasette Agent の統合: Datasette Agentと一緒に使用する場合、AIアシスタントはapp_createのようなツールを使用して、アプリを直接作成・編集することができます。これはClaudeのようなツールの「Artifacts」パターンをミラーリングしています。

コミュニティの洞察と視点

開発者間の議論によれば、「BYO UI」（Bring Your Own UI）パターンは、データ駆動型アプリケーションの展開において、固定的なSaaSダッシュボードから、柔軟でエージェントが生成するインターフェースへと移行する、新しい標準になりつつあります。

"I'm getting the feeling that the answer to SaaS apps as fixed UIs over databases being dead because of coding agents means just the fixed dashboard pattern is dead, not SaaS, and BYO UI is part of the new table stakes."

他のユーザーは、アプリケーションロジックとデータを一の一箇所に保持することの有用性を指摘していますが、一部のユーザーは、エージェントがアプリの作成において過度な自律性を与えられた場合、コードベースに「AI slop」が発生する可能性について懸念を表明しています。

Sources