浏览器即沙箱

浏览器即沙箱
The browser is the sandbox

原始链接: https://simonwillison.net/2026/Jan/25/the-browser-is-the-sandbox/

谷歌的 Paul Kinlan 探索了将网络浏览器用作编码代理的沙盒环境，灵感来自 Claude Cowork 等工具。他构建了“Co-do”，一个演示浏览器能够在用户计算机上安全运行不受信任的代码，*无需*大型本地容器的潜力。 Kinlan 利用现有的浏览器技术进行沙盒处理：文件系统访问 API 用于文件处理，带有 `` 的内容安全策略 (CSP) 用于隔离，以及 WebAssembly 在 Web Workers 中用于安全代码执行。Co-do 允许用户将 LLM 连接到选定的文件文件夹，并通过聊天界面与其交互。文章强调了 `<input type="file" webkitdirectory>` 在主要浏览器中用于只读目录访问的实用性，并详细介绍了一种复杂的双 iframe 技术，用于在沙盒中进行精细的网络控制。作者指出，虽然功能强大，但 `<iframe sandbox>` 功能的文档记录不足。 </p> <div class='comment'>这个Hacker News讨论的核心观点是：**网页浏览器是一个非常有效且长期存在的运行不受信任代码的沙箱。** 用户指出浏览器已经“历经考验”，对抗恶意链接数十年，并不断演进安全特性，例如WebAssembly（受Google的NaCl启发）和基于能力的的设计。对话强调浏览器有意限制功能——没有系统调用或直接硬件访问——提供了一个安全的环境，即使它限制了某些任务，例如一些AI编码需求。虽然攻击面*确实*很大，但实际的安全记录很强。值得注意的是，讨论还提到了现在已经过时的外部插件（Flash、Java Applet）作为历史上糟糕的沙箱，以及一个令人惊讶的浏览器功能：通过`webkitdirectory`属性接受文件夹输入。 </div> <form method='post' action='/posts/vote' class='text-right'> <input type='hidden' name='pid' value='96860' /> <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 readability="64.699910952805"> <p><strong><a href="https://aifoc.us/the-browser-is-the-sandbox/">the browser is the sandbox</a></strong>. Paul Kinlan is a web platform developer advocate at Google and recently turned his attention to coding agents. He quickly identified the importance of a robust sandbox for agents to operate in and put together these detailed notes on how the web browser can help:</p> <blockquote readability="16.853448275862"> <p>This got me thinking about the browser. Over the last 30 years, we have built a sandbox specifically designed to run incredibly hostile, untrusted code from anywhere on the web, the instant a user taps a URL. [...]</p> <p>Could you build something like Cowork in the browser? Maybe. To find out, I built a demo called <a href="http://co-do.xyz">Co-do</a> that tests this hypothesis. In this post I want to discuss the research I've done to see how far we can get, and determine if the browser's ability to run untrusted code is useful (and good enough) for enabling software to do more for us directly on our computer.</p> </blockquote> <p>Paul then describes how the three key aspects of a sandbox - filesystem, network access and safe code execution - can be handled by browser technologies: the <a href="https://developer.chrome.com/docs/capabilities/web-apis/file-system-access">File System Access API</a> (still Chrome-only as far as I can tell), CSP headers with <code><iframe sandbox></code> and WebAssembly in Web Workers.</p> <p>Co-do is a very interesting demo that illustrates all of these ideas in a single application:</p> <p><img alt="Screenshot of Co-do application interface with robot logo. Left sidebar shows WORKSPACE section with "Select Folder" button, "Selected folder: blog-drafts (Live updates enabled)" in green text, and FILES list including gtr-t5-large.md, chatgpt.md, llm-digest-october-2..., weeknotes-2024-04-23..., lmarena-april-2025.md, weeknotes-chatgpt-fo..., tests-not-optional-c..., weeknotes-13-mar-202..., issue-for-notes.md, workshop-git-scrapin.... Main chat area shows user message "Three most recently edited files?" in orange bubble, "Using 26 tools..." dropdown, and AI response: "Now I need to get the metadata for these files to find the most recently edited ones. Since there are many files, let me get metadata for a sample of them to find the recent ones:Based on the metadata I've gathered, the three most recently edited files are:" followed by table with columns File and Last Modified showing predictions-2026.md (Jan 8, 2026), december-2025.md (Jan 2, 2026), gemini-3-flash.md (Dec 17, 2025). Green "Response complete" banner at bottom with input field placeholder "Ask me to help with your files..." and notice "File contents are sent to your selected AI provider"." src="https://static.simonwillison.net/static/2026/codo.jpg"/></p> <p>You select a folder full of files and configure an LLM provider and set an API key, Co-do then uses CSP-approved API calls to interact with that provider and provides a chat interface with tools for interacting with those files. It does indeed feel similar to <a href="https://simonwillison.net/2026/Jan/12/claude-cowork/">Claude Cowork</a> but without running a multi-GB local container to provide the sandbox.</p> <p>My biggest complaint about <code><iframe sandbox></code> remains how thinly documented it is, especially across different browsers. Paul's post has all sorts of useful details on that which I've not encountered elsewhere, including a complex <a href="https://aifoc.us/the-browser-is-the-sandbox/#the-double-iframe-technique">double-iframe technique</a> to help apply network rules to the inner of the two frames.</p> <p>Thanks to this post I also learned about the <code><input type="file" webkitdirectory></code> tag which turns out to work on Firefox, Safari <em>and</em> Chrome and allows a browser read-only access to a full directory of files at once. I had Claude knock up a <a href="https://tools.simonwillison.net/webkitdirectory">webkitdirectory demo</a> to try it out and I'll certainly be using it for projects in the future.</p> <p><img alt="Screenshot of a dark-themed file explorer application. Top stats bar shows: 12179 TOTAL FILES, 2079 FOLDERS, 244 MB TOTAL SIZE, 97 FILE TYPES in cyan text. Search bar with placeholder "Search files..." and "All types" dropdown. Left panel labeled "File tree" (showing 12179) displays folder hierarchy: datasette > .claude > skills > building-datasette-plugins containing HOOKS.md (10.7 KB, selected/highlighted), INTERNALS.md (10.1 KB), SKILL.md (3.7 KB), TESTING.md (8.4 KB), settings.local.json (280 B); also shows .eggs folder with pytest_runner-6.0.1-py3.9.egg. Right panel "File preview" shows selected file details: Name: HOOKS.md, Path: datasette/.claude/skills/building-datasette-plugins/HOOKS.md, Size: 10.7 KB, Type: text/markdown, Last modified: 12/20/2025, 9:28:59 AM. Preview content shows: "# Plugin Hooks Reference" followed by "All hooks use the @hookimpl decorator. Accept only the parameters you need." then "## Database Connection Hooks" and "### prepare_connection(conn, database, datasette)" with description "Called when a new SQLite connection is created. Use to register custom SQL functions." Bottom section "File type distribution" shows horizontal bar chart: .py (4439), .no ext (3358), .dat (1068), .pyc (925), .txt (332), .mo (321), .po (321), .html (249)." src="https://static.simonwillison.net/static/2026/webkit-file-tree.jpg"/></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>

浏览器即沙箱 The browser is the sandbox

浏览器即沙箱
The browser is the sandbox