教程

Claude Code Desktop 内置浏览器完全指南:沙箱化外部网站访问与安全配置

Claude Code Desktop 应用新增内置浏览器功能,Claude 可直接打开文档、设计稿或任意外部网站并与页面交互,浏览器采用沙箱隔离设计且安全分类器审查外部操作,本文详解其设计原理和实战使用场景。

2026/7/115分钟 阅读ClaudeEagle

2026 年 7 月 6-10 日(Week 28),Claude Code 桌面应用迎来了一项重要新功能——内置浏览器。Claude 现在可以在桌面应用内直接打开文档、设计稿或任何外部网站,并以处理本地开发服务器预览页面同样的方式阅读、点击并与页面交互

这是什么

官方文档的表述是:

Claude Code on desktop now has a built-in browser. Claude can pull up docs, designs, or any other site, and read, click through, and interact with pages the same way it does with your local dev server previews. The browser is sandboxed and configurable.

简单说,在此之前,Desktop 应用的浏览器面板(Browser Pane)主要用于预览你自己的本地开发服务器——比如启动了 npm run dev 之后,Claude 可以在浏览器面板里查看渲染结果,验证自己改的代码是否生效。而现在,这个浏览器面板的能力被扩展到了任意外部网站

典型使用场景

场景一:一边查文档一边写代码

你:帮我集成 Stripe 的 Checkout API,参考最新文档实现 Claude: 1. 在浏览器面板打开 https://docs.stripe.com/checkout 2. 阅读文档中的最新 API 参数和示例代码 3. 结合文档内容,在你的项目中实现集成代码 4. 切换回本地预览验证集成效果

以前遇到这种场景,你需要自己去查文档、复制关键片段贴给 Claude;现在 Claude 可以自己打开文档站点、自己阅读、自己找到需要的信息,减少了大量来回复制粘贴的摩擦。

场景二:参考设计稿还原页面

你:按照这个 Figma 设计稿的样式,重新做一下首页的英雄区 [附上 Figma 分享链接] Claude: 1. 打开 Figma 分享链接 2. 观察设计稿的布局、配色、字体和间距 3. 结合观察结果编写对应的 CSS/组件代码 4. 在预览窗格中对比实际效果与设计稿

场景三:并排对比外部网站与本地预览

Desktop 应用支持把聊天窗口、Diff 视图、浏览器面板、终端和文件编辑器并排排列(Arrange your workspace),你可以让外部参考站点和本地开发预览同时显示在屏幕上,Claude 在两边之间来回核对。

安全设计:沙箱化 + 分级审查

考虑到「让 AI 自主访问任意外部网站」本身存在风险(网页可能包含试图操纵 Agent 行为的恶意内容,也就是 Prompt Injection 攻击),官方在设计这项功能时做了几层防护:

  1. 浏览器是沙箱化的(sandboxed)——与你的主浏览器环境、Cookie、登录状态相互隔离
  2. 可配置是否保留会话状态——你可以选择浏览会话是否在多次使用之间持久化
  3. 安全分类器审查外部站点上的操作(safety classifiers review actions on external sites)——Claude 在外部网站上执行的点击、输入等操作,会经过额外的安全审查层,降低被恶意页面诱导执行危险操作的风险
安全层级示意: 用户请求 → Claude 决定访问某外部网站 → 沙箱化浏览器加载页面(与主浏览器隔离) → Claude 拟定操作(点击/输入/滚动) → 安全分类器审查该操作是否合理 → 执行或拒绝

这个设计思路,与同批更新中 Auto Mode 新增的「转录篡改拦截」「rm -rf 变量确认」属于同一条安全主线——当 Claude 需要与不受信任的外部内容交互时,默认更保守

如何使用

bash
# 前提:已安装 Claude Desktop 并登录,切换到 Code 标签页

# 在会话中,让 Claude 打开外部网站
你:打开 https://react.dev/reference/react/useEffect 查一下最新用法

# 或者附上一个链接,让 Claude 自行判断是否需要访问
你:这个 GitHub Issue 里描述的 bug 我们项目里也有,看看 https://github.com/xxx/issues/123

浏览器面板会和聊天窗口、Diff 视图等一起出现在可排列的工作区里,详见桌面应用文档中的 [Arrange your workspace] 部分。

与本地预览的关系

内置浏览器沿用的是此前就存在的「Browser Pane 预览本地开发服务器」的同一套面板机制(Claude 验证自己改动效果时使用),本次更新是把这个能力从「只能看本地」扩展到「本地 + 任意外部网站」,两者共享同一套面板 UI 和排列方式。

总结

内置浏览器让 Claude Code Desktop 从「只能操作代码和本地服务」进化为「能主动查阅外部资料辅助决策」的更完整的开发助手。配合沙箱隔离和安全分类器审查,这项功能在提升效率的同时也兼顾了外部内容交互的安全边界。如果你经常需要一边查文档一边写代码,或者参考设计稿还原页面,这个新面板值得在下次更新后立即体验。


来源:Claude Code Desktop 文档 / Week 28 更新摘要 — Anthropic,2026-07-06 至 07-10

相关文章推荐

教程Claude Code Desktop 定时任务完全指南:自动化每日代码审查、依赖更新和晨报Claude Code Desktop 定时任务完整教程:支持每日代码审查、依赖更新检查、晨报生成等自动化工作流。含三种定时方案对比、配置方法和实用场景示例。2026/4/7教程Claude Code Desktop 深度使用指南:并行 Git Worktree、CI/PR 监控、应用预览与企业配置Claude Code Desktop 深度指南:开始会话四项配置(环境 Local/Remote/SSH/模型/权限模式)、四种权限模式对比(Ask/Auto accept/Plan/Bypass 及推荐工作流)、应用预览(自动验证/持久化 Cookie/launch.json 配置)、可视化 Diff 审查(注释+Cmd+Enter 批量提交)和代码 Review(高信号问题聚焦)、GitHub PR 监控(Auto-fix/Auto-merge/gh CLI 要求)、并行 Git Worktree 会话(独立隔离/分支前缀/设置更改 Worktree 路径)、远程云端会话(关机继续/多仓库/iOS App 监控)、SSH 会话、Desktop 持久定时任务(跨会话/频率/错过执行策略),以及企业配置(Admin 控制/MDM/SSO)和常见问题排查。2026/3/8教程Claude Code Desktop 桌面应用快速入门:图形界面、三大标签页与并行会话详解Claude Code Desktop 桌面应用快速入门:三大标签页概览(Chat/Cowork/Code 功能对比)、macOS/Windows 下载地址(内置 Claude Code 无需安装 Node.js)、4 步开始第一个 Code 会话(选项目/下任务/审查 Diff)、七大核心功能(中断引导/@文件引用/三种权限模式/Diff 视图审查/实时应用预览/PR 监控自动合并/定时任务/并行会话/插件安装/外部工具连接),以及与 CLI 共用同一套引擎、共享 CLAUDE.md/MCP/Hooks/Skills/Settings 配置的关系说明。2026/3/8教程Claude Code 插件配置迁移指南:pluginConfigs 项目级设置失效应对方案Claude Code v2.1.207 起,插件配置值 pluginConfigs 不再读取项目级 .claude/settings.json。本文详细讲解这项变化的背景、受影响场景,并提供从项目级迁移到用户级/企业管理设置/CI 参数的完整操作步骤和检查清单。2026/7/11教程Claude Code GitHub Actions 完全接入指南(v1.0 GA 版):自动 PR 与 CI/CD 集成Claude Code GitHub Actions 正式升级为 v1.0 GA 版本,支持自动模式检测和简化配置。本文提供快速搭建(/install-github-app)与手动搭建两种方式,以及从 Beta 版本迁移到 v1.0 的完整字段对照表和实战 YAML 示例。2026/7/6教程Claude Code 连接 MCP 服务器完全指南:HTTP、SSE、Stdio、WebSocket 四种方式完整梳理 Claude Code 连接 MCP 服务器的四种方式:HTTP(推荐)、SSE、本地 Stdio、WebSocket,附 claude mcp add 命令语法、认证配置、CLAUDE_PROJECT_DIR 环境变量用法,以及团队场景下的服务器审批机制。2026/7/6