Claude Sonnet 4自创浏览器自动化方案：一个CSS Bug的疯狂调试过程

一个CSS Bug引发的AI自主探索

Simon Willison（知名开发者、Datasette创始人）近日分享了一个令人震惊的Claude Sonnet 4（代号Fable）使用案例。Simon是Python/Django社区的核心人物之一，也是Django框架的联合创始人。他创建的Datasette是一个广受欢迎的开源工具，能将SQLite数据库即时转化为可交互的Web界面和API。作为LLM工具化实践的早期倡导者，他的博客是AI开发领域最具影响力的信息源之一。

这次，他仅仅给了AI一张截图和一句话的提示——"看看依赖项，帮我搞清楚为什么这里有个水平滚动条"——然后离开了电脑。几分钟后回来时，他发现Claude已经自主打开了浏览器窗口，正在进行一系列复杂的调试操作。

这个案例完美诠释了Simon对Claude Sonnet 4的评价：relentlessly proactive（不懈地主动）。它掌握大量技巧，并会不遗余力地部署任何手段来达成目标。

Claude Sonnet 4自创浏览器截图方案

最令人惊讶的是，Claude Code本身并没有被配置任何浏览器自动化工具，但Fable找到了自己的方法。这里需要理解Claude Code的本质：它是Anthropic推出的命令行编码代理工具，允许Claude直接在开发者的终端环境中执行操作——包括读写文件、运行shell命令、管理git仓库等。与传统的代码补全工具（如GitHub Copilot）不同，编码代理具备自主规划和执行多步骤任务的能力，本质上是一个拥有系统级权限的自主AI代理（Autonomous Agent）。

PyObjC + screencapture 的组合拳

当Claude发现macOS的osascript因权限限制无法使用时，它没有放弃，而是发明了一个替代方案：

1. 使用uv run --with pyobjc-framework-Quartz python临时安装并运行PyObjC框架
2. 通过Quartz API遍历所有窗口，按窗口名称过滤出目标Safari窗口
3. 获取窗口编号（如153551）
4. 使用screencapture -x -o -l 153551命令精确截取该窗口

这套方案涉及多个底层技术的巧妙组合。PyObjC是一个Python与Objective-C之间的桥接框架，允许Python代码直接调用macOS的原生Cocoa和Quartz API。Quartz是macOS图形子系统的核心组件，负责窗口合成、屏幕渲染等底层操作。通过Quartz的CGWindowListCopyWindowInfo等API，可以枚举系统中所有窗口的元数据（包括窗口ID、标题、位置、所属应用等），这是一个相当底层的系统编程操作。screencapture则是macOS内置的截屏命令行工具，其-l参数可以指定窗口ID进行精确截取。Claude能够将这些分散的系统工具组合成完整的解决方案，展现了超越简单代码生成的系统级问题解决能力。

值得注意的是，Claude选择使用uv而非传统的pip来安装依赖。uv是由Astral公司（同时也是Ruff linter的开发者）推出的超高速Python包管理器，用Rust编写，速度比pip快10-100倍。其uv run --with命令允许在临时虚拟环境中安装依赖并立即执行脚本，无需预先配置环境。这种临时环境特性非常适合一次性的系统探测任务，用完即弃，不会污染项目的依赖环境。

这套方案完全是Fable即兴发明的，没有任何人教过它这个技巧。

自建CORS服务器获取页面数据

为了从浏览器中获取CSS计算值等诊断信息，Claude写了一个极简的Python HTTP服务器：

from http.server import HTTPServer, BaseHTTPRequestHandler

class H(BaseHTTPRequestHandler):
    def do_POST(self):
        n = int(self.headers.get("Content-Length", 0))
        open("/tmp/diag.json", "w").write(self.rfile.read(n).decode())
        self.send_response(200)
        self.send_header("Access-Control-Allow-Origin", "*")
        self.end_headers()

这段代码中的Access-Control-Allow-Origin: *响应头涉及浏览器的核心安全机制——CORS（Cross-Origin Resource Sharing，跨源资源共享）。浏览器默认禁止网页向不同源（协议+域名+端口）的服务器发送请求，这就是同源策略。本地开发服务器（如localhost:8000）上的页面需要向Claude启动的另一个本地服务器发送POST请求，如果没有CORS头，浏览器会直接拦截这个请求。通过设置通配符*，Claude明确告诉浏览器允许任何来源的请求访问该数据收集服务器。

然后在页面模板中注入JavaScript，将textarea的scrollWidth、clientWidth等关键数据POST到这个服务器，再从文件系统读取结果。这是一个完整的数据回传链路，全部由AI自主设计。

完整的CSS调试流程回顾

基于一张截图和一行提示，Claude Sonnet 4完成了以下所有步骤：

• 环境搭建：自行配置假环境变量，启动本地开发服务器
• 多浏览器测试：先用Playwright测试Chrome/Firefox/WebKit，未能复现bug
• 发现关键线索：判断用户默认浏览器是Safari
• 创建测试页面：编写独立的HTML测试文件验证不同CSS配置
• 绕过权限限制：osascript被拒后，发明PyObjC方案
• 模拟用户交互：在模板中注入JavaScript，1.2秒后自动触发/快捷键打开模态框
• 深入Shadow DOM：穿透Web Component的shadow root获取textarea元素
• 验证修复方案：先在模板中hack修复，确认有效后报告正式修复方法

其中"深入Shadow DOM"这一步尤其值得关注。Shadow DOM是Web Components标准的核心技术之一，它为DOM元素创建一个封装的、隔离的DOM树（称为shadow tree）。Shadow DOM内部的样式和结构与外部文档完全隔离，外部的CSS选择器和JavaScript的querySelector等方法默认无法穿透shadow boundary访问内部元素。这种封装机制被广泛用于UI组件库和设计系统中。要访问Shadow DOM内部的元素，必须先获取宿主元素的shadowRoot属性，再在其上进行查询。Claude能够识别目标textarea位于Shadow DOM内部，并正确地穿透shadow root进行访问，说明它对现代Web架构有深入的理解。

最终，这个耗费了如此多创造力的问题，实际上只需要一个两行的CSS修复。

成本与安全的双重警示

12美元修一个CSS Bug

Simon使用AgentsView追踪了这次会话的token消耗。如果按API全价计算，这次调试花费约12.11美元。其中Fable在中途触发了某个隐形限制，自动降级为Opus继续完成任务。

目前Simon使用的是$100/月的Claude Max计划，Anthropic承诺在6月22日前Fable有充足的使用额度，之后将按API价格收费。

AI编码代理的安全隐患

这个案例的另一面是深刻的安全警示。Simon指出：

编码代理可以做到你通过终端命令能做到的一切——而前沿模型知道所有的技巧，显然还有一些从未被记录过的新招。

如果Fable接收到恶意指令——比如隐藏在代码中的prompt injection攻击、issue线程中的恶意内容，或者用户不小心粘贴的有害内容——它的"不懈主动性"将变成巨大的安全威胁。

Prompt Injection（提示注入）是针对大语言模型应用的一类核心安全攻击。攻击者将恶意指令隐藏在看似正常的输入内容中——例如代码注释、GitHub Issue描述、Markdown文档甚至图片的alt文本中——试图劫持AI代理的行为。当AI代理处理这些内容时，可能会将隐藏的恶意指令当作用户意图执行。对于拥有系统级权限的编码代理而言，这种攻击尤其危险：攻击者可能通过一个看似无害的代码仓库，诱导AI代理执行数据窃取、后门植入等恶意操作。目前业界尚无完美的防御方案，这被认为是AI安全领域最紧迫的未解决问题之一。

具体而言，被劫持的Fable能够：

• 打开任意浏览器窗口
• 读取屏幕上其他窗口的内容
• 启动本地服务器
• 修改项目源代码
• 通过网络发送数据

Simon将这种风险比作"挑战者号灾难"——这个类比有着深层含义。1986年挑战者号航天飞机灾难的根本原因是已知风险被系统性地低估和忽视——工程师早已警告O型环在低温下可能失效，但管理层在进度压力下选择了冒险发射。Simon暗示的是同样的结构性风险：业界早已知道在非沙箱环境中运行AI代理存在严重安全隐患，但在追求效率和功能的压力下，这一风险被普遍忽视。随着模型能力的急剧提升（如Fable展示的自主工具创造能力），这个"已知但被忽视的风险"正在快速逼近临界点。

对开发者的启示

Claude Sonnet 4展示的不仅是更强的编码能力，更是一种全新的问题解决范式：当标准工具不可用时，AI会自主发明替代方案。这种"工具创造"能力（tool-making）是与之前模型的本质区别。

但这也意味着开发者需要重新思考：

1. 权限边界：给予AI编码代理的系统权限需要更精细的控制
2. 成本监控：不加约束的探索可能产生意外高额费用
3. 沙箱化运行：在生产环境中使用编码代理必须有隔离机制
4. 审计追踪：需要完整记录AI的所有操作，便于事后审查

正如Simon所说，Fable的聪明是一把双刃剑——它可能更善于识别恶意指令，但一旦被攻破，造成的破坏也将远超前代模型。

核心要点