如何为 AI Agent 的浏览器操作加上安全防护盾

AI Agent 在浏览器里替你操作网页时，Cookie 弹窗、隐藏注入文本、赞助内容、聊天小部件这些「页面垃圾」正在浪费你的 Token，更糟糕的是——恶意 PII 泄露和提示注入攻击可能让你的 API Key 和敏感数据暴露。本文将介绍一个免费的开源方案 Agent Browser Shield，用 35+ 条规则在 Chromium 层面为 AI 浏览行为加上一道安全过滤层。

问题：你的 AI Agent 正在裸奔

Claude Code、Codex、OpenCode 这类 AI 编程 Agent 在浏览器操作时，面对的是真实网页的全部内容——包括开发者从未打算给 Agent 看的部分：

Agent Browser Shield 的目标很简单：让 Agent 看到「清洗版」的网页，就像戴上了一副过滤眼镜。

安装：两步上手

Agent Browser Shield 是一个 Chromium MV3 扩展，作者来自 PixieBrix 团队（知名的浏览器自动化工具公司），TypeScript 编写，开源在 GitHub 上（18+ stars，仅发布三周）。

安装方式 A：Chrome Web Store 一键安装（推荐）

打开 Chrome Web Store 页面，点击「添加到 Chrome」。安装后对所有标签页自动生效，Agent 不需要任何代码修改。

安装方式 B：手动构建（用于自定义配置）

git clone https://github.com/pixiebrix/agent-browser-shield.git
cd agent-browser-shield/extension
bun install
bun run build

然后在 chrome://extensions 开启「开发者模式」，点击「加载已解压的扩展程序」，选择 extension/dist/ 目录。

云端 Agent 集成：如果你使用 Browserbase 这类云端浏览器服务，可以打包为 ZIP：

cd extension
bun run build
bun run package

output/agent-browser-shield-extension.zip 可直接上传到 Browserbase 的扩展管理 API。

规则体系：35+ 条规则覆盖三大防线

Agent Browser Shield 的核心是其规则系统，所有规则运行在本地浏览器，不发送任何遥测数据。

1. Token 效率规则（默认开启）

• cookie-banners-hide — 隐藏 Cookie 选择横幅（如 “Accept All Cookies”）
• chat-widgets-hide — 隐藏页面右下角的客服聊天小部件
• footer-hide — 移除页脚导航和公司信息
• social-share-hide — 隐藏社交媒体分享按钮和嵌入
• sponsored-content-hide — 过滤赞助/推广内容
• newsletter-popup-hide — 阻止邮件订阅弹窗
• sidebar-ads-hide — 使用 EasyList 快照（~13k 选择器）隐藏广告侧栏

以 Cookie 弹窗为例，Agent 在浏览时不会再被 “Accept All” 按钮分散注意力：

{
  "rule_id": "cookie-banners-hide",
  "selectors": [
    "#cookie-notice",
    ".cookie-consent",
    "[class*=\"cookie-banner\"]",
    "#gdpr-consent"
  ],
  "action": "remove"
}

2. 安全与合规规则（默认开启）

• pii-redact — 掩码 PII 字段（邮箱、电话、SSN 等格式匹配）
• hidden-text-suppress — 抑制隐藏文本元素（display:none, visibility:hidden）
• html-comments-strip — 剥离 HTML 注释（常见提示注入载体）
• ugc-strip — 移除用户生成内容区域（评论区、论坛帖子）
• form-data-mask — 掩码表单输入框的已填充值

PII 脱敏规则摘录：

// extension/src/rules/pii-redact.ts (简化)
const PII_PATTERNS = [
  /\b[\w\.-]+@[\w\.-]+\.\w{2,}\b/g,  // 邮箱
  /\b\d{3}[-.]?\d{3}[-.]?\d{4}\b/g, // 美国电话
  /\b\d{3}-\d{2}-\d{4}\b/g,          // SSN
];

function redactPIIText(text: string): string {
  return text.replace(PII_PATTERNS, match => '*'.repeat(match.length));
}

3. 准确性与反黑暗模式规则（默认开启）

• fake-scarcity-redact — 移除虚假稀缺性提示（”Only 3 left!”、”5 people are viewing”）
• countdown-timers-hide — 隐藏倒计时器
• confirmation-trap-detect — 检测确认陷阱模式
• engagement-rail-hide — 隐藏互动轨道（点赞数、分享数等干扰内容）
• irrelevant-sections-redact — 可选（默认关闭）：将页面树发送到 OpenAI 分类器。需自行配置 API Key

PixieBrix 提供了一个 RiverMart 演示站，可以在有/无 Shield 的状态下对比效果——所有黑暗模式被移除后的干净页面清晰可见。

与 Browser Use 等自动化框架的区别

这里需要澄清一个常见的混淆点：

Browser Use 负责「让 Agent 能操控浏览器」，Agent Browser Shield 负责「Agent 操控浏览器时看到的内容是安全的」。两者实际上是互补关系——你可以让 Agent 用 Browser Use 打开网页，而 Shield 在浏览器层先过滤页面内容。

配置技巧

自定义规则开关：安装后右键点击扩展图标 → 选项，可以看到所有 35+ 条规则的开关列表。建议：

• 对内网/管理后台页面：保持默认开启即可
• 对公共网页：开启所有安全规则，特别是 pii-redact 和 hidden-text-suppress
• 对电商/社交媒体页：额外开启 fake-scarcity-redact 和 engagement-rail-hide
• 对 API 文档/技术博客：可以考虑关闭部分 Token 效率规则（如 sidebar-ads-hide），确保页面结构完整

构建时自定义默认配置：如果你需要批量部署，可以通过参数文件预设默认规则状态：

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

一个典型的团队默认配置：

{
  "cookie-banners-hide": true,
  "chat-widgets-hide": true,
  "pii-redact": true,
  "hidden-text-suppress": true,
  "fake-scarcity-redact": true,
  "html-comments-strip": true
}

注意事项

1. Alpha 阶段：项目标注为 Alpha 原型，规则集可能随时变化。不适合对稳定性要求极高的生产环境。
2. 不是万能盾：README 明确说了不能捕获所有威胁——大型语言模型可能从清洗后的页面中通过上下文推断出本应被过滤的信息。
3. PolyForm Shield 许可证：源码可用、免费商用，但不能用项目代码构建竞争产品。
4. 隐私透明：不收集任何遥测数据，仅有的网络调用是可选规则（irrelevant-sections-redact），默认关闭且需用户自配 API Key。

总结

AI Agent 正在快速进入浏览器操作的场景，但安全防护层尚未跟上。Agent Browser Shield 以一个浏览器扩展的形式，用 35+ 条本地运行的安全规则，在「Agent 看到网页内容之前」完成过滤——不侵入 Agent 的代码、不需要修改现有工作流，安装即生效。

如果你已经在使用 Claude Code、Codex 或 OpenCode 做浏览器自动化操作，花三分钟装一个免费的浏览器扩展，就能让你的 Agent 少看一些垃圾、多做一些实事，顺便还降低了 Token 开销。这笔投资值得。

相关链接： – GitHub: github.com/pixiebrix/agent-browser-shield – Chrome Web Store: 安装页 – 文档: pixiebrix.github.io/agent-browser-shield – 演示站: RiverMart 对比