Skip to content

feat(console): 新增浏览器应用(Chrome 风格多标签页 + iframe 智能混合加载) - #8

Open
wuxs wants to merge 2 commits into
mainfrom
worktree-browser-feature
Open

feat(console): 新增浏览器应用(Chrome 风格多标签页 + iframe 智能混合加载)#8
wuxs wants to merge 2 commits into
mainfrom
worktree-browser-feature

Conversation

@wuxs

@wuxs wuxs commented Jul 26, 2026

Copy link
Copy Markdown
Collaborator

概述

为 devbox 控制台桌面新增一个类似 Chrome 的「浏览器」应用,可在控制台内直接浏览网页,并带多标签页 / 地址栏导航 / 书签 / 历史。

核心设计是 iframe 智能混合加载:导航时先 iframe 直连目标 URL(快、无副作用),后端 probe 检测到目标设了 X-Frame-Options / frame-ancestors 才自动切到后端代理(剥离嵌套限制头)。这等价于「先直连,不通走代理」——纯前端无法探测 iframe 是否被拒(同源策略),所以探测放后端 HEAD 做。

改动

后端 pkg/console

  • handlers_browser.go:反向代理 handler(白名单转发响应头,剥离 X-Frame-Options/CSP/COOP/COEP/CORP/Content-Disposition,注入 <base> + fetch/XHR shim);/probe 端点 HEAD 检测目标能否直连;SSRF 防护(禁云元数据 link-local、只允许 http/https、50MB 上限、重定向每跳重新校验)
  • browser_store.go:书签 / 历史 JSON 原子持久化(RWMutex + tmp+rename,历史去重置顶 + 200 条上限)
  • server.go / config.go / main.go:接入 BrowserDataPath / BrowserInsecureTLS 配置 + Server 字段 + 路由

前端 console-ui

  • pages/Browser.jsx:Chrome 风格 UI(标签页 + 地址栏 + 前进/后退/刷新/主页 + 书签 ★ + 历史面板 + 新标签页空状态)
  • 智能混合:tab 持 mode 字段,导航乐观直连,probe 决定是否切代理
  • hooks/useApi.jsuseBookmarks / useHistory + 增删 / probeDirectEmbed
  • data/systemApps.js + AppShell.jsx:桌面图标 + 路由

验证

  • go test ./pkg/console/ 全量通过(含新增 handlers_browser_test.go / browser_store_test.go:URL 校验 / SSRF / header 白名单 / HTML 注入 / probe 各场景 / store 并发原子写)
  • 前端 npm run build 通过,已同步 pkg/console/dist
  • 端到端冒烟(probe):example.comdirect:truegithub.comdirect:false (x-frame-options: deny);非法 scheme → 400

已知限制(iframe 固有,非 bug)

  • 强反点击劫持的外部大站(frame-ancestors 'none' + 站点自身 JS 检测)即便走代理仍可能空白
  • 父页面读不到 iframe 的 document.title,tab 标题用 host 占位
  • 被嵌页面 cookie/login 域与 console 不同源,需在 iframe 内自行登录

🤖 Generated with Claude Code

wuxs and others added 2 commits July 27, 2026 01:23
后端 (pkg/console):
- handlers_browser.go: 反向代理剥离 X-Frame-Options/CSP 等嵌套限制头并注入 <base>;
  /probe 端点 HEAD 检测目标能否被 iframe 直连(前端受同源策略限制无法自行检测)
- browser_store.go: 书签/历史 JSON 原子持久化(RWMutex + tmp+rename)
- server.go / config.go / main.go: 接入 Config 字段 + Server 字段 + 路由

前端 (console-ui):
- pages/Browser.jsx: Chrome 风格 UI(多标签页 / 地址栏导航 / 书签 / 历史 / 新标签页)
- 智能混合: 导航乐观 iframe 直连原始 URL,后台 probe 检测到拦截头才切代理
- hooks/useApi.js: useBookmarks/useHistory + 增删/probe helper

已知限制: 强反点击劫持的外部大站(frame-ancestors 'none' + JS 检测)即便走代理仍可能空白

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
工具条右侧加布局开关:合并成单行(默认,省垂直空间)或展开为两行(Chrome 标准)。
合并态 tabs 区限宽 42% + 横向滚动,多 tab 不挤掉地址栏。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant