Datasette Apps: Hosting Custom HTML Applications in a Sandboxed Environment

Overview

Datasette Apps are self-contained HTML and JavaScript applications that run within a tightly constrained <iframe> sandbox hosted on a Datasette instance. This plugin allows developers to create custom user interfaces and visualizations that can execute read-only SQL queries against Datasette data and perform write operations through pre-configured stored queries.

This capability transforms Datasette from a tool for serving read-only data into a platform for hosting full read-write applications, effectively combining a relational database backend with a self-contained HTML frontend.

Security Architecture: Sandboxing and CSP

The primary technical challenge of Datasette Apps is running untrusted HTML and JavaScript on a domain that may contain sensitive, authenticated data. The plugin employs a defense-in-depth strategy to prevent data exfiltration and unauthorized access.

Iframe Sandboxing

Apps are rendered using <iframe sandbox="allow-scripts allow-forms" srcdoc="...">. This configuration ensures that the sandboxed application cannot:

  • Access the parent application's DOM.
  • Read or write cookies.
  • Access localStorage or other browser secrets.

Content Security Policy (CSP)

To prevent malicious apps from using fetch() to send private data to external servers, Datasette Apps injects a strict Content Security Policy (CSP) via a <meta http-equiv="Content-Security-Policy"> header. The policy is configured as follows:

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

Once set, this CSP policy is immutable for the content of the frame, preventing JavaScript from removing or updating the header to bypass restrictions.

Secure Communication via MessageChannel

To allow apps to perform useful work without compromising security, the plugin uses a MessageChannel() based transport for communication between the iframe and the parent window. This is preferred over postMessage() because MessageChannel() automatically closes if the page navigates away, reducing the risk of commands being executed from an untrusted external page.

Data Interaction and Write Operations

Read-Only SQL Queries

Apps can use JavaScript to run read-only SQL queries against allow-listed databases. The parent window verifies the target database before executing the query and returning the results to the app.

Controlled Write Operations

To enable write capabilities without exposing the database to arbitrary SQL injection or malicious updates, Datasette Apps utilizes stored queries (introduced in Datasette 1.0a31).

Instead of allowing raw SQL writes, administrators create specific stored write queries (e.g., an add_todo query). The app then calls these queries by name with specific parameters:

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

AI-Driven Development Workflow

While the datasette-apps plugin does not depend on LLMs, its architecture is optimized for AI generation. Because the apps are single-file HTML documents, they are an ideal output format for modern LLMs.

  • Prompt Integration: The "Create app" form provides a copyable prompt containing the database schema, which users can paste into an LLM to generate the complete HTML/JS code for the app.
  • Datasette Agent Integration: When used with Datasette Agent, AI assistants can directly create and edit apps using tools like app_create, mirroring the "Artifacts" pattern seen in tools like Claude.

Community Insights and Perspectives

Discussion among developers suggests that the "BYO UI" (Bring Your Own UI) pattern is becoming a new standard for data-driven applications, moving away from fixed SaaS dashboards toward malleable, agent-generated interfaces.

"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."

Other users noted the utility of keeping the application logic and data in one place, though some raised concerns about the potential for "AI slop" in codebases if agents are given too much autonomy in creating these apps.

Sources