<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>浏览器自动化 on 蔡大锅's Blog</title><link>https://bingorun.cn/tags/%E6%B5%8F%E8%A7%88%E5%99%A8%E8%87%AA%E5%8A%A8%E5%8C%96/</link><description>Recent content in 浏览器自动化 on 蔡大锅's Blog</description><generator>Hugo -- gohugo.io</generator><language>zh-cn</language><copyright>©2025-2026 沪ICP备2025139614号-2</copyright><atom:link href="https://bingorun.cn/tags/%E6%B5%8F%E8%A7%88%E5%99%A8%E8%87%AA%E5%8A%A8%E5%8C%96/index.xml" rel="self" type="application/rss+xml"/><item><title>当 AI 替你考网络安全：一次 pi-agent + Chrome DevTools 的完整实战</title><link>https://bingorun.cn/posts/pi-agent-quiz-100/</link><pubDate>Thu, 24 Sep 2026 21:00:00 +0800</pubDate><guid>https://bingorun.cn/posts/pi-agent-quiz-100/</guid><description>&lt;blockquote>
&lt;p>目标读者：想让 AI 智能体替自己完成浏览器内操作（答题、表单、巡检）的开发者。
实测结果：在线安全答题 &lt;strong>100 分&lt;/strong>。本文拆解整条链路的技术原理，以及它为什么&amp;quot;作弊&amp;quot;得如此干净。&lt;/p>&lt;/blockquote>
&lt;h2 id="0-先说结论">0. 先说结论&lt;/h2>
&lt;p>这套方案的四个组成部分：&lt;/p>
&lt;table>
 &lt;thead>
 &lt;tr>
 &lt;th>角色&lt;/th>
 &lt;th>组件&lt;/th>
 &lt;th>一句话职责&lt;/th>
 &lt;/tr>
 &lt;/thead>
 &lt;tbody>
 &lt;tr>
 &lt;td>知识库&lt;/td>
 &lt;td>培训 PPT → markdown&lt;/td>
 &lt;td>答案的唯一来源，提前离线准备好&lt;/td>
 &lt;/tr>
 &lt;tr>
 &lt;td>大脑&lt;/td>
 &lt;td>pi-agent（终端智能体）&lt;/td>
 &lt;td>读题、检索知识库、决定点哪个选项&lt;/td>
 &lt;/tr>
 &lt;tr>
 &lt;td>翻译官&lt;/td>
 &lt;td>chrome-devtools-mcp&lt;/td>
 &lt;td>把 AI 的意图翻译成浏览器指令&lt;/td>
 &lt;/tr>
 &lt;tr>
 &lt;td>手脚&lt;/td>
 &lt;td>Chrome 远程调试（CDP）&lt;/td>
 &lt;td>真正执行：读 DOM、点击、截图&lt;/td>
 &lt;/tr>
 &lt;/tbody>
&lt;/table>
&lt;p>一个必须先建立的认识：&lt;strong>这个系统答对题，靠的不是模型懂网络安全，而是答案在喂给它的材料里。&lt;/strong> 它的本质是一套跑在浏览器上的 RAG（检索增强生成）系统。理解了这一点，你就理解了它的能力边界。&lt;/p>
&lt;p>&lt;img alt="AI 答题系统全景" loading="lazy" src="https://blog-img-1256188149.cos.ap-shanghai.myqcloud.com/netsec-quiz/fig1.png?imageMogr2/thumbnail/1080x/format/webp/quality/80">&lt;/p>
&lt;h2 id="1-知识准备答案在开考前就已经写好">1. 知识准备：答案在开考前就已经写好&lt;/h2>
&lt;p>题库出自公司培训材料《智能时代，网安护航》。把两份 PPT（72 页）用 &lt;code>python-pptx&lt;/code> 抽成 markdown：&lt;/p>
&lt;p>三个工程要点：&lt;/p>
&lt;ul>
&lt;li>&lt;strong>连备注页和表格一起抽&lt;/strong>。培训 PPT 的备注里往往藏着出题人视角的解释，表格则是数据类考点的浓缩。&lt;/li>
&lt;li>&lt;strong>抽成中间产物落盘&lt;/strong>（&lt;code>_txt_*.md&lt;/code>），不要边解析边答题。智能体答题时用 &lt;code>read&lt;/code> 工具检索这个静态文件，速度快、结果可回溯。&lt;/li>
&lt;li>&lt;strong>口径一致是 100 分的前提&lt;/strong>。知识库和题库同源，检索命中即正确；如果知识库是网上找的二手资料，&amp;ldquo;多选题选几项&amp;quot;这类口径差异就会丢分。&lt;/li>
&lt;/ul>
&lt;p>这一步做完，你拥有了一个和出题口径完全对齐的私有知识库——整场&amp;quot;考试&amp;quot;里最值钱的资产。&lt;/p>
&lt;h2 id="2-打通浏览器cdp-是什么为什么是它">2. 打通浏览器：CDP 是什么，为什么是它&lt;/h2>
&lt;h3 id="21-一个冷知识f12-本来就不在浏览器里">2.1 一个冷知识：F12 本来就不在浏览器里&lt;/h3>
&lt;p>Chrome 的开发者工具（F12）并非内嵌功能——你按 F12 时的每个操作（查 DOM、抓截图、看请求），都是 Chrome 通过一套叫 &lt;strong>CDP（Chrome DevTools Protocol）&lt;/strong> 的协议完成的：JSON-RPC 消息走 WebSocket 通道，&lt;code>Page.navigate&lt;/code> 导航、&lt;code>DOM.getDocument&lt;/code> 取文档树、&lt;code>Runtime.evaluate&lt;/code> 跑脚本。&lt;/p>
&lt;p>启动 Chrome 时加一个参数：&lt;/p>
&lt;div class="highlight">&lt;div style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">
&lt;table style="border-spacing:0;padding:0;margin:0;border:0;">&lt;tr>&lt;td style="vertical-align:top;padding:0;margin:0;border:0;">
&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">&lt;code>&lt;span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">&lt;code class="language-bash" data-lang="bash">&lt;span style="display:flex;">&lt;span>chrome.exe --remote-debugging-port&lt;span style="color:#f92672">=&lt;/span>&lt;span style="color:#ae81ff">9222&lt;/span> --user-data-dir&lt;span style="color:#f92672">=&lt;/span>&lt;span style="color:#e6db74">&amp;#34;C:\temp\quiz-profile&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>
&lt;/div>
&lt;/div>&lt;p>Chrome 就会在 &lt;code>127.0.0.1:9222&lt;/code> 起一个调试服务。访问 &lt;code>http://127.0.0.1:9222/json/version&lt;/code> 能拿到 &lt;code>webSocketDebuggerUrl&lt;/code>——任何本地程序顺着它连上去，就获得了和你 F12 完全等价的能力。Puppeteer、Playwright 底层用的也是同一套协议。&lt;/p>
&lt;h3 id="22-智能体侧用-mcp-把-cdp-包成工具">2.2 智能体侧：用 MCP 把 CDP 包成&amp;quot;工具&amp;rdquo;&lt;/h3>
&lt;p>pi-agent 是终端编码智能体（&lt;code>npm install -g @mariozechner/pi-coding-agent&lt;/code>），原生工具是 read / bash 四件套，看不懂 WebSocket 帧格式。中间靠 &lt;strong>MCP（Model Context Protocol）&lt;/strong> 架一层翻译：&lt;/p>
&lt;div class="highlight">&lt;div style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">
&lt;table style="border-spacing:0;padding:0;margin:0;border:0;">&lt;tr>&lt;td style="vertical-align:top;padding:0;margin:0;border:0;">
&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">&lt;code>&lt;span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
&lt;/span>&lt;span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2
&lt;/span>&lt;span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">3
&lt;/span>&lt;span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">4
&lt;/span>&lt;span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">5
&lt;/span>&lt;span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">6
&lt;/span>&lt;span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">7
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">&lt;code class="language-json" data-lang="json">&lt;span style="display:flex;">&lt;span>&lt;span style="color:#75715e">// ~/.pi/agent/mcp.json
&lt;/span>&lt;/span>&lt;/span>&lt;span style="display:flex;">&lt;span>&lt;span style="color:#75715e">&lt;/span>{ &lt;span style="color:#f92672">&amp;#34;mcpServers&amp;#34;&lt;/span>: {
&lt;/span>&lt;/span>&lt;span style="display:flex;">&lt;span> &lt;span style="color:#f92672">&amp;#34;chrome-devtools&amp;#34;&lt;/span>: {
&lt;/span>&lt;/span>&lt;span style="display:flex;">&lt;span> &lt;span style="color:#f92672">&amp;#34;command&amp;#34;&lt;/span>: &lt;span style="color:#e6db74">&amp;#34;npx&amp;#34;&lt;/span>,
&lt;/span>&lt;/span>&lt;span style="display:flex;">&lt;span> &lt;span style="color:#f92672">&amp;#34;args&amp;#34;&lt;/span>: [&lt;span style="color:#e6db74">&amp;#34;-y&amp;#34;&lt;/span>, &lt;span style="color:#e6db74">&amp;#34;chrome-devtools-mcp@latest&amp;#34;&lt;/span>,
&lt;/span>&lt;/span>&lt;span style="display:flex;">&lt;span> &lt;span style="color:#e6db74">&amp;#34;--browserUrl&amp;#34;&lt;/span>, &lt;span style="color:#e6db74">&amp;#34;http://127.0.0.1:9222&amp;#34;&lt;/span>]
&lt;/span>&lt;/span>&lt;span style="display:flex;">&lt;span>} } }
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>
&lt;/div>
&lt;/div>&lt;p>配好后，智能体面前出现的不再是协议报文，而是一组语义化工具：&lt;code>list_pages&lt;/code>、&lt;code>take_snapshot&lt;/code>、&lt;code>click&lt;/code>、&lt;code>take_screenshot&lt;/code>、&lt;code>evaluate_script&lt;/code>。模型按工具描述自然语言调用，MCP server 负责转成 CDP 指令发往 9222 端口。&lt;/p>
&lt;p>&lt;img alt="CDP 通道两端配置" loading="lazy" src="https://blog-img-1256188149.cos.ap-shanghai.myqcloud.com/netsec-quiz/fig2.png?imageMogr2/thumbnail/1080x/format/webp/quality/80">&lt;/p>
&lt;h3 id="23-为什么不用截图--模拟鼠标点击">2.3 为什么不用&amp;quot;截图 + 模拟鼠标点击&amp;quot;&lt;/h3>
&lt;p>视觉方案（看截图、算坐标、模拟点击）直观，但有两个硬伤：坐标随窗口尺寸和滚动位置漂移，动画未结束时点不准。CDP 方案点击的是&lt;strong>真实 DOM 节点&lt;/strong>（&lt;code>element.click()&lt;/code>），与视口状态完全解耦——这是整条链路稳定性的关键。&lt;/p>
&lt;h2 id="3-答题循环每道题都是一次感知-行动循环">3. 答题循环：每道题都是一次感知-行动循环&lt;/h2>
&lt;p>智能体对每道题执行同一个四拍循环：&lt;/p>
&lt;p>&lt;img alt="单题四拍循环" loading="lazy" src="https://blog-img-1256188149.cos.ap-shanghai.myqcloud.com/netsec-quiz/fig3.png?imageMogr2/thumbnail/1080x/format/webp/quality/80">&lt;/p>
&lt;ol>
&lt;li>&lt;strong>感知&lt;/strong>——&lt;code>take_snapshot&lt;/code> 抓取页面 DOM 文本，拿到题干和全部选项。用文本而非截图，省 token 且零 OCR 误差。&lt;/li>
&lt;li>&lt;strong>检索&lt;/strong>——按关键词在 markdown 知识库里定位对应段落。Prompt 里约束规则：&lt;strong>答案必须出自材料原文，禁止凭参数记忆作答。&lt;/strong>&lt;/li>
&lt;li>&lt;strong>行动&lt;/strong>——&lt;code>click&lt;/code> 点击对应选项的 DOM 节点。&lt;/li>
&lt;li>&lt;strong>验证&lt;/strong>——&lt;code>take_screenshot&lt;/code> 复核选中态。未生效就重试，生效则进入下一题，直到交卷。&lt;/li>
&lt;/ol>
&lt;p>&lt;strong>为什么能拿 100 分？&lt;/strong> 因为这是 RAG 的教科书场景：题库与知识库同源，检索命中率接近必然。模型在这里的价值是&amp;quot;精确匹配 + 按选项转述&amp;quot;，而不是&amp;quot;懂安全&amp;quot;。反过来讲，&lt;strong>如果知识库有错，它会自信地答错&lt;/strong>——垃圾进，垃圾出。&lt;/p>
&lt;h2 id="4-安全边界这套玩法本身的安全红线">4. 安全边界：这套玩法本身的安全红线&lt;/h2>
&lt;p>用安全考试的杠杆去玩浏览器自动化，有几条红线必须写清楚：&lt;/p>
&lt;ul>
&lt;li>&lt;strong>调试端口只绑本机&lt;/strong>。&lt;code>--remote-debugging-port&lt;/code> 起的服务默认监听 &lt;code>127.0.0.1&lt;/code>，不要改成 &lt;code>0.0.0.0&lt;/code>——连上这个端口的进程可以读取你所有登录态、在任意页面执行 JS。&lt;/li>
&lt;li>&lt;strong>用独立 user-data-dir&lt;/strong>。把自动化会话和个人浏览数据隔离，避免调试通道碰到真实 cookie。&lt;/li>
&lt;li>&lt;strong>用完就关&lt;/strong>。答题结束正常退出该 Chrome 实例，不要让 9222 端口常驻。&lt;/li>
&lt;li>&lt;strong>材料别外传&lt;/strong>。培训材料是内部资料，抽出的 md 知识库放在本机即可，不要上传到公共仓库或外部 AI。&lt;/li>
&lt;/ul>
&lt;p>这套链路本身就是个绝佳的教材：你刚体验过的&amp;quot;AI 拿到调试端口 = 拿到整个浏览器&amp;quot;，正是材料里&amp;quot;IDE 外传&amp;quot;&amp;ldquo;权限越界&amp;quot;两类风险的真实形态——只不过这次握着端口的不是攻击者，是你自己。&lt;/p>
&lt;h2 id="5-延伸这条链路还能干什么">5. 延伸：这条链路还能干什么&lt;/h2>
&lt;p>同一套架构，换个知识库和页面就是另一个工具：&lt;/p>
&lt;table>
 &lt;thead>
 &lt;tr>
 &lt;th>场景&lt;/th>
 &lt;th>知识库换成&lt;/th>
 &lt;th>浏览器里做的事&lt;/th>
 &lt;/tr>
 &lt;/thead>
 &lt;tbody>
 &lt;tr>
 &lt;td>内部系统巡检&lt;/td>
 &lt;td>巡检 SOP 文档&lt;/td>
 &lt;td>逐页检查配置项并截图存档&lt;/td>
 &lt;/tr>
 &lt;tr>
 &lt;td>竞品价格监控&lt;/td>
 &lt;td>商品 SKU 表&lt;/td>
 &lt;td>定时抓取商品页价格写入表格&lt;/td>
 &lt;/tr>
 &lt;tr>
 &lt;td>表单批量填报&lt;/td>
 &lt;td>数据 Excel&lt;/td>
 &lt;td>逐行填写并提交&lt;/td>
 &lt;/tr>
 &lt;tr>
 &lt;td>每日打卡类操作&lt;/td>
 &lt;td>操作手册&lt;/td>
 &lt;td>定时打开页面执行固定动作&lt;/td>
 &lt;/tr>
 &lt;/tbody>
&lt;/table>
&lt;p>判断标准很简单：&lt;strong>规则明确、页面稳定、有知识可依的重复浏览器操作&lt;/strong>，都值得用这条链路自动化。&lt;/p>
&lt;h2 id="6-最后也是最重要的">6. 最后，也是最重要的&lt;/h2>
&lt;p>工具让你 100 分通过了考试，但请诚实地区分两件事：&lt;strong>AI 帮你通过了安全意识考试，不等于你拥有了安全意识。&lt;/strong>&lt;/p>
&lt;blockquote>
&lt;p>&lt;strong>敏感数据不出边界；身份必须二次核验；高危操作不交给自动化。&lt;/strong>&lt;/p>&lt;/blockquote>
&lt;p>本文涉及的知识点速查（五大风险 / 12 案例 / 四不三必两问 / AI 数据安全治理）已整理成在线页面：&lt;strong>&lt;a href="https://bingorun.cn/ai-security-guide/">AI 安全指南 · 一页速览&lt;/a>&lt;/strong>&lt;/p></description></item></channel></rss>