AI Agent 浏览器安全实战：用 Agent Browser Shield 保护你的编码助手

你让 Claude Code 或 Codex 去某个网页查资料、填表单、读文档——它就像一个人类开发者在浏览器里操作。但人类能看到的内容，AI Agent 也能看到：cookie 横幅、聊天小部件、赞助内容、甚至是藏在 HTML 注释里的提示注入载荷。这些”页面杂物”不仅浪费 Token（token waste），更危险的是可能让 Agent 泄露敏感信息或执行未预期的操作。

问题的本质：AI Agent 浏览网页的三大风险

当 AI Agent 通过 Browser Use、Stagehand、Playwright 等框架操作浏览器时，它面对的不只是你想让它看的内容，而是完整、未经处理的页面 DOM。这意味着三方面的威胁：

• Token 浪费：每个页面的 header、footer、cookie 横幅、赞助内容、聊天小部件都在消耗你的 API Token。一个典型的企业落地页，Agent 真正需要的内容可能只占页面 30-40%。
• 安全与合规：页面可能包含 PII（个人身份信息）、credentials（凭证）、隐藏在 HTML 注释中的 prompt injection payload。Agent 不经过滤就把这些内容传给 LLM，等于把你的数据暴露给了模型提供商。
• 准确性受损：虚假稀缺倒计时（”仅剩 3 件！”）、暗黑模式（dark pattern）等操纵性内容可能误导 Agent 的判断。

一个真实场景：你的 Agent 在登录某个内部系统时，页面可能包含隐藏的管理员 API key 在 HTML 注释中，Agent 读取后可能在不经意间将其作为上下文传递给外部模型。

Agent Browser Shield 是什么

Agent Browser Shield 是 PixieBrix 团队开发的一款开源 Chromium 浏览器扩展，专门为 AI Agent 浏览器操作场景设计。它不修改 Agent 的代码，而是作为一个安装在浏览器里的”中间层”，在内容到达 Agent 之前进行过滤和净化。

GitHub: github.com/pixiebrix/agent-browser-shield（20⭐，TypeScript）

Chrome Web Store：搜索”Agent Browser Shield”一键安装

它的核心理念是 35+ 条分类规则（ruleset），每条规则针对一种特定的页面元素或威胁。

快速安装

安装方式非常简单：如果你用的是 Chromium 内核的浏览器（Chrome、Edge、Brave、Arc、Opera），直接去 Chrome Web Store 搜索”Agent Browser Shield”一键安装。

如果需要自构建（比如部署到 Browserbase 等云端浏览器环境）：

git clone https://github.com/pixiebrix/agent-browser-shield.git
cd agent-browser-shield/extension
bun install
bun run build           # 编译到 extension/dist/
bun run package         # 打包为 ZIP 供 Browserbase 上传

构建完成后，在 chrome://extensions 中加载 extension/dist/ 目录的未打包版本即可。

三大规则体系详解

Agent Browser Shield 的 35+ 规则分为三大类别：

1. Token 效率（Token Efficiency）

这些规则的目标是：剥离 Agent 不需要看到的页面元素，让 Token 花在真正有价值的内容上。

• cookie-banner-hide — 隐藏 cookie 同意横幅。绝大多数 Agent 不需要”同意 cookie”。
• ads-hide — 基于 EasyList 的 13000+ 选择器，隐藏广告和赞助内容。内置快照定期刷新。
• chat-widget-hide — 隐藏 AI 聊天小部件和客服弹窗。
• footer-hide — 隐藏页脚导航和版权信息。
• sponsored-content-hide — 隐藏”推荐文章”、”赞助链接”等。
• irrelevant-sections-redact — 可选规则（默认关闭），将页面结构发送给 OpenAI 进行分类，智能识别无关区块。

2. 安全与合规（Security & Compliance）

这一组规则保护 Agent 和你的数据安全：

• pii-redact — 自动检测并脱敏 PII（邮箱、电话、身份证号、信用卡号等），用占位符替换。
• credentials-redact — 隐藏密码字段和凭证信息。
• hidden-text-suppress — 抑制隐藏文本（display:none、visibility:hidden 等），防止 prompt injection payload 藏在不可见元素中。
• html-comment-strip — 移除 HTML 注释。开发者常把调试信息、TODO、甚至 API key 写在注释里。
• user-generated-content-suppress — 抑制用户生成内容（评论区、论坛帖子），防止第三方注入。
• seo-keyword-hide — 隐藏 SEO 关键词填充，这类内容对 Agent 毫无价值。

3. 准确性（Accuracy）

防止页面中的操纵性设计误导 Agent：

• scarcity-redact — 脱敏虚假稀缺提示（”仅剩 2 件”、”最后机会”）。
• engagement-rails-hide — 隐藏”猜你喜欢”、”相关文章”等引导性内容。
• dark-pattern-block — 阻止暗黑模式元素（预勾选的 checkbox、迷惑性按钮）。
• timers-hide — 隐藏倒计时器和促销定时器。

实测效果：前后对比

PixieBrix 提供了一个在线演示站点（RiverMart 模拟电商站），你可以直观地看到安装扩展前后的对比：

高级配置：自定义规则集

如果你只需要某些规则，可以在构建时传覆盖文件。创建一个 my-defaults.json：

{
  "cookie-banner-hide": true,
  "ads-hide": true,
  "chat-widget-hide": true,
  "pii-redact": true,
  "credentials-redact": true,
  "html-comment-strip": true,
  "scarcity-redact": false,
  "engagement-rails-hide": false,
  "optionsButton": false,
  "siteDenylist": ["https://trusted-site.example.com/*"]
}

然后构建：

bun run build --defaults ./my-defaults.json

还可以设置 siteDenylist 来让某些信任站点绕过所有规则（比如你需要 Agent 完整读取某个内部系统的页面）。

云端 Agent 集成：Browserbase

对于使用 Browserbase 运行云端 Agent 的场景，Agent Browser Shield 可以直接打包上传：

cd extension
bun run build
bun run package -- ~/Downloads/browser-shield.zip

然后通过 Browserbase 的 extensions API 上传：

与同类方案的对比

💡 关键差异：Browser Use 解决的是”Agent 如何操控浏览器”，Agent Browser Shield 解决的是”Agent 看到了什么内容”。两者是互补而非竞争关系。

注意事项

• Agent Browser Shield 当前为 Alpha 阶段，规则集可能变更
• 部分规则（如 irrelevant-sections-redact）需要 OpenAI API key，默认关闭
• 扩展完全本地运行，不收集任何遥测数据
• 无法 100% 阻止所有威胁，推荐结合最小权限原则使用

总结

当你的 AI Agent 开始执行浏览器操作时，页面内容的风险管理就不再是可选配置。Agent Browser Shield 用 35+ 条规则在不修改 Agent 代码的前提下，从 Token 效率、安全合规、准确性三个维度保护你的编码助手。更重要的是——安装一条命令、配置一个 JSON 文件，你就能让 Agent 看到”该看的内容”，避开不该碰的风险。

GitHub：github.com/pixiebrix/agent-browser-shield Chrome Web Store：搜索”Agent Browser Shield” 在线演示：shield-dark-pattern-demo.vercel.app