Datasette 应用：在 Datasette 中托管自定义 HTML 应用

Datasette 应用：在 Datasette 中托管自定义 HTML 应用
Datasette Apps: Host custom HTML applications inside Datasette

原始链接: https://simonwillison.net/2026/Jun/18/datasette-apps/

全新的 **datasette-apps** 插件允许用户创建独立的 HTML/JavaScript 应用程序，这些程序可直接在 Datasette 实例内部的受限沙盒 `` 中运行。主要功能包括： * **安全性**：应用程序通过严格且不可篡改的内容安全策略（CSP）和 `sandbox` 属性进行隔离，防止未经授权访问 Cookie、本地存储或发送外部 HTTP 请求。 * **受控交互**：应用通过 `MessageChannel()` 与父级 Datasette 实例通信，允许其基于白名单执行只读 SQL 查询或特定的“已存储”写入查询。 * **LLM 集成**：该插件专为 AI 生成而设计，内置的提示词可向模型提供必要的数据库架构，使用户能够像使用 Claude Artifacts 一样通过“灵感编程”（vibe-code）构建工具。 * **生产力**：系统集成了 SQL 查询日志记录和错误报告功能，便于开发与调试。通过连接持久化关系数据库与沙盒前端工具，Datasette Apps 助力用户构建自定义的交互式界面，使 Datasette 从一个只读数据工具转变为构建功能全面、安全且数据驱动型应用的强大平台。</p> <div class='comment'>Hacker News | 最新 | 过往 | 评论 | 提问 | 展示 | 招聘 | 提交 | 登录 Datasette Apps：在 Datasette 内托管自定义 HTML 应用程序 (simonwillison.net) 13 分 | lumpa 发布于 53 分钟前 | 隐藏 | 过往 | 收藏 | 2 条评论 | 帮助 xgulfie 31 分钟前 | 上一条 [–] 真搞不懂为什么人们非要给“datasette”这种词增加额外的含义。回复 tadfisher 25 分钟前 | 父评论 [–] 我认为现在的含义已经很成功地取代了原本的用法。除非你是在 Commodore VIC-20 上敲出的这条评论，不然我想确实如此。回复指南 | 常见问题 | 列表 | API | 安全 | 法律 | 加入 YC | 联系搜索：</div> <form method='post' action='/posts/vote' class='text-right'> <input type='hidden' name='pid' value='126561' /> <button name='vote' value='1' class='btn btn-link fa-solid fa-thumbs-up text-success'></button> <button name='vote' value='-1' class='btn btn-link fa-solid fa-thumbs-down text-error'></button> </form> </div> <div class='column col-4 col-sm-12 pt-2'> <div class='h5 mt-2 mb-2'>相关文章</div> <div> </div> </div> <div class='column col-12'> <hr/> <div class='content'> <div class='h5 mt-2 mb-2'>原文</div> <div data-permalink-context="/2026/Jun/18/datasette-apps/" readability="182.35541099941"> <p class="mobile-date">18th June 2026</p> <p>Today we launched a new plugin for Datasette, <a href="https://github.com/datasette/datasette-apps">datasette-apps</a>, with <a href="https://datasette.io/blog/2026/datasette-apps/">this launch announcement post</a> on the Datasette project blog. That post has the <em>what</em>, but I’m going to expand on that a little bit here to provide the <em>why</em>.</p> <h4 id="the-tl-dr">The TL;DR</h4> <p>Datasette Apps are self-contained HTML+JavaScript applications that run in a tightly constrained <code><iframe></code> sandbox hosted on your Datasette application. They can use JavaScript to run read-only SQL queries against data in Datasette, and can run write queries too if you configure them <a href="https://datasette.io/blog/2026/sql-write-queries/">with some stored queries</a>.</p> <p>Here’s a <a href="https://agent.datasette.io/-/apps/01kvdp1d26g8trye3r4gc3yy9c">very simple example</a> and a <a href="https://agent.datasette.io/-/apps/01ktvyaejhk07zskdx2tewxppe">more complex custom timeline example</a>—the latter looks like this:</p> <p><img src="https://static.simonwillison.net/static/2026/datasette-timeline-app.jpg" alt="Screenshot of a web app titled "Datasette timeline" with "All apps", "Edit app", and "Pin" buttons top-right and a "Full screen" button below them. Inside a bordered panel, the heading "Datasette timeline" sits above a search box reading "Search news, blog posts and releases…" with three checked checkboxes labeled News, Blog, and Releases. Below, text reads "Showing 200 of 1,953 items", followed by a scrollable list of timeline entries. Each entry has a colored tag (blue "BLOG" or green "RELEASE"), a date, a blue linked title, and a paragraph of description. The visible entries are a "BLOG" post dated 2026-06-11 titled "Datasette 1.0a33 with JSON extras in the API", a "RELEASE" dated 2026-06-11 titled "datasette 1.0a33", and a "RELEASE" dated 2026-06-09 titled "llm 0.32a3", each with body text and a "▶ Show more" toggle. A separate panel at the bottom shows a collapsed "▶ 2 log entries" toggle."/></p> <p>Apps are allowed to run JavaScript and render HTML and CSS. They are limited in terms of access—the <code><iframe sandbox="allow-scripts allow-forms"></code> they run in prevents them from accessing cookies or localStorage and they also have an injected CSP header (thanks to <a href="https://simonwillison.net/2026/Apr/3/test-csp-iframe-escape/">this research</a>) which prevents them from making HTTP requests to outside hosts, preventing a malicious or buggy app from exfiltrating private data.</p> <p>Datasette Apps started out as my attempt at building a Claude Artifacts mechanism for <a href="https://datasette.io/blog/2026/datasette-agent/">Datasette Agent</a>, but I quickly realised that the sandboxed pattern is interesting for way more than just adding custom apps to the interface surface and promoted it to its own top-level concept within the Datasette ecosystem.</p> <p>They’re also a fun way to turn my <a href="https://tools.simonwillison.net/">multi-year experiment in vibe-coded HTML tools</a> into a core feature of my main project!</p> <p>You can try out Datasette Apps by signing in with GitHub to the <a href="https://agent.datasette.io/">agent.datasette.io</a> demo instance.</p> <h4 id="why-build-this-">Why build this?</h4> <p>Since the very first release, Datasette has offered a flexible backend for creating custom HTML apps via its JSON API.</p> <p>One of my earliest Datasette projects was an internal search engine for documentation when I worked at Eventbrite—it worked by importing documents from different systems into SQLite on a cron and then serving them through a Datasette instance with a custom HTML+JavaScript search interface that directly queried the Datasette API.</p> <p>I had client-side JavaScript constructing SQL queries, which originally was intended as an engineering joke but turned out to be a <em>really productive</em> way of iterating on the app!</p> <p>That project, combined with my experience <a href="https://simonwillison.net/2025/Dec/10/html-tools/">building my HTML tools collection</a> and my <a href="https://simonwillison.net/2024/Oct/21/claude-artifacts/">experiments with Claude Artifacts</a>, has convinced me that adding a Datasette-style backend to a self-contained HTML frontend is an astonishingly powerful combination.</p> <p>Imagine how much more useful Claude Artifacts could be if they had access to a persistent relational database. That’s what I’m building with Datasette Apps!</p> <h4 id="neat-ideas-in-datasette-apps">Neat ideas in Datasette Apps</h4> <p>Here are a few of the ideas and patterns I’ve figured out building this which I think have staying power.</p> <h5 id="iframe-sandbox-allow"> <code><iframe sandbox="allow-scripts" srcdoc="..."></code> + <code><meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data: blob:;"></code> </h5> <p>This is the magic combination that makes Datasette Apps feasible in the first place. I need to run untrusted HTML and JavaScript on a highly sensitive domain—an authenticated Datasette instance can contain all sorts of private data. The <code>sandbox=</code> attribute lets me run that untrusted code in a way that cannot interact with the parent application—it can’t read the DOM, or access cookies, or steal secrets from <code>localStorage</code>. It can however use <code>fetch()</code> and friends to load content (or exfiltrate data) from other domains. But... it turns out if you <em>start</em> an HTML page with a <code><meta http-equiv="Content-Security-Policy"></code> header you can <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP">set additional policies</a> that lock down access to other domains. I was worried that malicious JavaScript would be able to update or remove that header but it turns out <a href="https://github.com/simonw/research/tree/main/test-csp-iframe-escape#readme">that doesn’t work</a>—once set, the CSP policy is immutable for the content of that frame.</p> <h5 id="locked-down-apis-with-postmessage-and-messagechannel-">Locked down APIs with <code>postMessage()</code> and <code>MessageChannel()</code> </h5> <p>Having locked down those iframes to the point that they couldn’t do anything interesting at all, the challenge was to open them back again such that they could run an allow-list of operations, starting with read-only SQL queries against specified databases.</p> <p>I built the first version of this with <code>postMessage()</code>, which allows a child iframe to send messages to the parent window. I created a simple protocol for requesting that the parent run a SQL query—the parent could then verify it was against an allow-listed database before executing it.</p> <p>One of the LLM tools, I think it was GPT-5.5, suggested that <code>postMessage()</code> on its own can be exploited if the iframe somehow loads additional code from an untrusted domain. I don’t think that applies to Datasette Apps, but I also believe in defense in depth, so I <a href="https://gist.github.com/simonw/0b29f301c2007808314eb04675c66916">had GPT-5.5 help me</a> port to a <a href="https://developer.mozilla.org/en-US/docs/Web/API/MessageChannel">MessageChannel()</a> based transport instead.</p> <p><code>MessageChannel()</code> has the advantage that if a page navigates to somewhere else the channel closes automatically, removing any chance of executing commands sent from an untrusted external page.</p> <h5 id="visible-logs-for-queries-and-errors">Visible logs, for queries and errors</h5> <p>If you navigate to <a href="https://agent.datasette.io/-/apps/01ktvyaejhk07zskdx2tewxppe">the timeline demo</a> and search for the string <code>usercontent</code> you’ll pull in some search results that embed images from the <code>user-images.githubusercontent.com</code> domain. This domain is not in the CSP allow-list, so it trips an error.</p> <p>Those errors are captured and transmitted back to the parent frame, where they can be displayed in a useful error log. This is meant to make hacking on apps more productive by surfacing otherwise-invisible problems.</p> <p>I built <a href="https://simonwillison.net/2026/May/13/csp-allow/">an experiment</a> demonstrating that you can even turn this into a one-click-to-allow mechanism for building the CSP allow-list based on what breaks, but I haven’t integrated that idea into <code>datasette-apps</code> just yet.</p> <p>SQL queries are also visibly logged—scroll to the <a href="https://agent.datasette.io/-/apps/01ktvyaejhk07zskdx2tewxppe">bottom of the timeline page</a> to see that in action.</p> <h5 id="stored-queries-for-write-operations">Stored queries for write operations</h5> <p>I want apps to be able to conditionally write to the database, but this is an <em>even more</em> dangerous proposition than SQL reads!</p> <p>My solution involves Datasette’s <a href="https://docs.datasette.io/en/latest/sql_queries.html#stored-queries">stored queries</a> feature, rebranded from “canned queries” and given a major upgrade <a href="https://datasette.io/blog/2026/sql-write-queries/">in the recent Datasette 1.0a31</a>—work that was directly inspired by Datasette Apps.</p> <p>Users can create a stored write query that performs an insert or update, then allow-list that specific query for an app to use. Usage from code inside an app looks like this:</p> <div class="highlight highlight-source-js" readability="13"><pre><span class="pl-k">const</span> <span class="pl-s1">result</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">datasette</span><span class="pl-kos">.</span><span class="pl-en">storedQuery</span><span class="pl-kos">(</span><span class="pl-s">"todos"</span><span class="pl-kos">,</span> <span class="pl-s">"add_todo"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">title</span>: <span class="pl-s">"Buy milk"</span><span class="pl-kos">,</span> <span class="pl-c1">due_date</span>: <span class="pl-s">"2026-06-20"</span><span class="pl-kos">,</span> <span class="pl-c1">priority</span>: <span class="pl-s">"high"</span><span class="pl-kos">,</span> <span class="pl-c1">completed</span>: <span class="pl-c1">false</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p>I’m only just beginning to explore the possibilities this unlocks myself, but my goal is to support full read-write applications built safely as Datasette Apps.</p> <h5 id="copy-and-paste-a-prompt-to-build-an-app">Copy and paste a prompt to build an app</h5> <p>The Datasette Apps plugin has no dependency on LLMs at all, but these self-contained apps are the perfect shape to be written by a modern LLM.</p> <p>The create app form includes a copyable prompt at the end. This prompt has everything a model needs to know to build a new app, including the schema of any selected databases.</p> <p><img src="https://datasette.io/static/blog/2026/create-app-prompt.jpg" alt="Screenshot of the lower part of a "Create app" page. At the top is the tail end of an HTML code editor (lines 35–43, closing the script, body, and html tags) and a blue "Create app" button. Below is a section headed "Use AI to build this app" with the text "Describe the app you want in an LLM chat, then copy this prompt in as context so it can generate or revise the app HTML. Paste the result into the HTML editor above." A blue "Copy prompt" button sits above a "▼ Show full prompt" toggle. An expanded text box shows the prompt: "Build a Datasette HTML app. App name: Latest news. Return a complete single-file HTML document. Include <DOCTYPE, CSS, and JavaScript in the same file. This app will run inside a sandboxed iframe protected by a strict Content Security Policy. Important limitations: – Direct network access is disabled by default. – The app cannot fetch from Datasette, localhost, or arbitrary origins. – External fetch() requests only work for exact https:// origins explicitly granted in the app's network access settings. – Remote images are allowed from those same exact https:// origins. Local file previews using data: and blob: image URLs are allowed. – External script tags are allowed from those same exact https:// origins. – External stylesheet links and style elements are allowed from those same exact https:// origins. – history.replaceState(), history.pushState(), history.back(), history.forward(), and history.go() are no-ops in the sandbox. – CORS still applies even when an origin is granted. Use this API for data access: – await datasette.query(database, sql, params?)""/></p> <p>This means you can click “copy”, paste it into ChatGPT or Claude or Gemini, tell it what you need, and there’s a good chance the model will spit out the code necessary to build the app.</p> <p>If you have <a href="https://agent.datasette.io/">Datasette Agent</a> installed your AI assistant will also gain tools to both create new apps and edit existing ones, Claude Artifacts style.</p> <p><img src="https://datasette.io/static/blog/2026/create-app-agent.jpg" alt="Screenshot of a "Chat" interface with a "← Back" link top-left and an "EXPORT" button top-right. A blue user message bubble reads "Build an app showing the 5 most recent headlines from the blog_posts table". Below are two collapsed toggles: "► Tool: describe_table" and "► Result: describe_table". A thinking line reads "Thinking: …will transition to creating the application using app_create as the next step." A section headed "Querying Latest Posts" reads "I've successfully queried the blog_posts table for the 5 most recent titles. The SQL query, SELECT title FROM blog_posts ORDER BY datetime_utc DESC LIMIT 5, is working as expected. Now, I will transition to creating the application using app_create as the next step." An expanded "▼ Tool: app_create" box shows escaped JSON HTML: { "html": "...." Below: "Recent Blog Headlines created." with "View app" and "Edit" buttons, a collapsed "► Result: app_create" toggle, and a final message: "The app "Recent Blog Headlines" has been created. It displays the 5 most recent headlines from the blog_posts table in the content database.""/></p> <h4 id="built-with-so-much-ai-assistance">Built with so much AI assistance</h4> <p>Datasette Apps started life back in April as <a href="https://github.com/datasette/datasette-agent-edit/commits/b242a8fc2e200d01820dacb5bf9a060f659c3a18/">datasette-agent-artifacts</a>, a plugin I have since renamed to <code>datasette-agent-edit</code> keeping only <a href="https://simonwillison.net/2026/Jun/7/datasette-agent-edit/">its editing tools</a>. I built that as one of the first plugins for <a href="https://datasette.io/blog/2026/datasette-agent/">Datasette Agent</a>, to help get the plugin hooks into the right shape. That first prototype was mainly built using Claude Opus 4.6 in Claude Code.</p> <p>When I switched track to Datasette Apps I started <a href="https://github.com/datasette/datasette-apps/commit/fc1e23b801b5845647dcd423d632339648acf19c#diff-de64950fcb0bc622027de0d657eeb322f3520ce502d826813ff7653b51cf6059">with a plan</a> constructed using Codex Desktop and GPT-5.5 xhigh, based on extensive dialog and feeding in both <code>datasette-agent-artifacts</code> and other prototypes I had built.</p> <p>Most of the work that followed stuck with Codex, but in the few short days that we had access <a href="https://simonwillison.net/2026/Jun/9/claude-fable-5/">to Claude Fable 5</a> I had it run a security evaluation of the product (an ability that would get it <a href="https://simonwillison.net/2026/Jun/13/us-government-directive-to-suspend-access/">banned by the US government</a> shortly afterwards) and it found a very real problem.</p> <p>I was allowing users to allow-list CSP hosts for their apps, but Fable pointed out the following attack:</p> <ol> <li>A less privileged user with <code>create-app</code> permission creates an app that queries SQLite for all available tables and selects and exfiltrates all of the data to a host they had allow-listed via CSP.</li> <li>They then trick an administrator user with access to private data into visiting their app.</li> <li>... and the app can now run queries as <em>that</em> user and steal their private data!</li> </ol> <p>That’s clearly unacceptable. I fixed it by restricting the ability to allow-list any domain to a new <code>apps-set-csp</code> permission, which is intended just for trusted staff. Site administrators can also <a href="https://github.com/datasette/datasette-apps#sandboxed-apps">configure Datasette</a> with a list of <code>allowed_csp_origins</code>, which regular users can then select. This means you can do things like allow <code>cdnjs.cloudflare.com</code> and your users will be able to build apps that load extra JavaScript libraries from the <a href="https://cdnjs.com">cdnjs</a> CDN.</p> <p>I’ve reviewed Datasette Apps extremely closely, especially the security-adjacent parts of it. The critical sandbox and CSP configuration are based on multiple AI-assisted prototypes and tests.</p> <h4 id="it-s-looking-good-so-far">It’s looking good so far</h4> <p>I’m really pleased with this initial release.</p> <p>Datasette is growing beyond its origins as an application for serving read-only data into a much richer ecosystem of tools for doing useful things with that data once it has been collected.</p> <p>Datasette’s roots are in data journalism. I’ve always been interested in the question of what comes <em>next</em> after a journalist gets their hands on a giant dump of data about the world. Datasette supports exploring and publishing it. Datasette Agent adds interrogating it with AI assistance. Now Datasette Apps expands that to building custom interfaces and visualizations to help unlock the stories that are hidden within.</p> </div> </div> </div> </div> <div class='clear'></div> </div> <div style='position:fixed; bottom:0; left:0; right:0;'> </div> <div align='center' style='border-top:1px solid #EEE; padding:1em; margin-top:2em;'> 联系我们 contact @ memedata.com </div>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-PFMR8YTWGP"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-PFMR8YTWGP'); </script> </body> </html>

Datasette 应用：在 Datasette 中托管自定义 HTML 应用 Datasette Apps: Host custom HTML applications inside Datasette

Datasette 应用：在 Datasette 中托管自定义 HTML 应用
Datasette Apps: Host custom HTML applications inside Datasette