Community程式設計與開發github.com

受保護的 Vercel 部署

使用 agent-browser 存取並測試受 Vercel 驗證、SSO 或部署保護的 Vercel 部署。當預覽或生產 URL 重新導向到 Vercel 登入頁面、回傳 401 或 403 保護錯誤,或需要短期有效的 Trusted Sources OIDC 驗證(而非靜態繞過密鑰或公開例外)時使用。

受保護的 Vercel 部署 是什麼?

此技能提供一個完整的解決方案,讓 AI 代理能夠以程式化方式存取並測試受 Vercel 部署保護的部署,無需繞過安全設定或將部署設為公開。它利用呼叫者現有的 Vercel 身分透過 Vercel CLI 產生短期有效的 OIDC 令牌,然後將該令牌作為自訂 HTTP 標頭注入瀏覽器工作階段,讓代理能夠通過驗證、渲染頁面並與之互動。此方法適用於 Vercel Authentication、SSO 和 Trusted Sources 保護案例,並支援多種情境:從同一專案的預覽部署(自動運作)到需要人類設定 Trusted Sources 規則的跨專案或生產環境存取。該技能也包含健全的錯誤處理、詳細的故障診斷指南,以及基於繞過密鑰的後備方案(需明確授權)。支援的平台包括 Vercel CLI(版本 53.3.0 以上)和任何可執行 agent-browser 的瀏覽器環境。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vercel-labs/agent-browser/tree/main/skill-data/protected-vercel-deployments

Installed? Explore more 程式設計與開發 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

受保護的 Vercel 部署 是做什麼的?

使用呼叫者現有的 Vercel 身分和短期有效的 OIDC 令牌。請勿停用部署保護、將部署設為公開,或先要求靜態繞過密鑰。

相同專案預覽

目標專案的本地開發令牌可以透過預設的 Trusted Sources 自我存取規則來存取該專案受保護的預覽部署。通常不需要設定 Trusted Sources。

確認本地身分和 Vercel CLI 版本:

vc whoami
vc --version

在執行 vc project token 之前,需要 Vercel CLI 53.3.0 或更新版本。版本 50.25.0 到 53.2.x 會將令牌寫入 stderr,因此命令替換會無法捕捉到任何內容,且憑證可能會出現在日誌中。如果已安裝的版本較舊,請停止並要求使用者升級。請勿嘗試從 stderr 捕捉或復原令牌。

明確設定目標專案和範圍。如果無法安全推斷,請詢問使用者。在目錄中,如果現有的 .vercel/project.json 連結已針對目標進行驗證,則在沒有專案名稱的情況下執行 vc project token 也是有效的。請勿僅為了取得 OIDC 令牌而執行 vc link:目前的 Vercel CLI 版本在連結時也會將開發變數拉入 .env.local。

建立一個具名瀏覽器工作階段,使用 Vercel CLI 產生開發 OIDC 令牌,然後注入令牌,不要列印或持久化儲存:

export AGENT_BROWSER_SESSION="$(agent-browser session id --scope worktree --prefix vercel-preview)"
export VERCEL_PREVIEW_URL="https://my-app.vercel.app"
export VERCEL_PROJECT="my-app"
export VERCEL_SCOPE="my-team"

(
  TOKEN="$(vc project token "$VERCEL_PROJECT" --scope "$VERCEL_SCOPE")"
  test -n "$TOKEN"
  agent-browser open "$VERCEL_PREVIEW_URL" --headers \
    "{\"x-vercel-trusted-oidc-idp-token\":\"$TOKEN\"}"
)

agent-browser snapshot -i

在同一個工作階段中繼續正常的工作流程。此標頭作用於目標來源,並適用於文件、腳本、樣式、字型和頁面內的請求。如果瀏覽器工作階段關閉或重新啟動,請重複執行經過驗證的 open 命令。

切勿列印令牌、將其貼上到原始碼中,或將其儲存在環境檔案中。

其他環境和呼叫者

在以下情況需要設定 Trusted Sources:

  • 本地開發令牌必須存取受保護的生產部署;
  • 呼叫者屬於另一個 Vercel 專案或團隊;
  • 目標專案的自我存取規則已自訂;或
  • Vercel 回傳 TRUSTED_SOURCES_ENVIRONMENT_MISMATCH。

沒有支援的 Vercel CLI 或公開 REST API 可用於編輯 Trusted Sources 規則。必須由授權人員開啟目標專案的 Settings → Deployment Protection → Trusted Sources,並僅新增所需的呼叫者和環境對應。本地令牌具有 development 環境,因此受保護的生產存取需要 development 到 production 的對應。

請停止並將確切的規則移交給人員。請勿使用瀏覽器自動化來變更存取控制,也請勿擴大不相關的環境對應。在人員確認規則已儲存後,重試經過驗證的 open 命令。

人為介入邊界

當 Vercel CLI 已通過驗證且目標專案和範圍已知時,相同專案的開發到預覽路徑應該在無人為介入的情況下執行。僅在以下情況需要人為介入:

  • Vercel CLI 沒有已驗證的身分且沒有現有的 VERCEL_TOKEN;互動式 vc login 需要使用者;
  • 已安裝的 Vercel CLI 版本舊於 53.3.0,必須在產生令牌前升級;
  • 無法安全推斷正確的目標專案或範圍以進行令牌產生;
  • 必須新增或變更 Trusted Sources 規則;儀表板是唯一受支援的管理介面,且這會變更存取控制;
  • 呼叫專案的 OIDC Federation 的安全後端存取已停用,必須在 Settings → Security 中重新啟用;或
  • 必須啟用或輪換靜態密鑰後備方案,且代理需要明確授權才能進行此存取控制變更。獲得批准後,代理可以使用 vc project protection 而不是要求儀表板互動。

代理可以診斷每種情況並說明所需確切動作,然後在使用者確認完成後繼續。

使用正確的標頭

將 Vercel 發出的令牌作為:

x-vercel-trusted-oidc-idp-token: <VERCEL_OIDC_TOKEN>

請勿替代為 x-vercel-oidc-token。該標頭將工作負載身分帶入 Vercel Function;它不會在通過部署保護時驗證傳入請求。

診斷失敗

  • 重新導向到 vercel.com/login:部署保護未接受請求。
  • TRUSTED_SOURCES_ENVIRONMENT_MISMATCH:令牌有效,但其呼叫者環境無法到達目標環境。
  • 通過保護後應用程式回傳 401 或 403:請單獨除錯應用程式自身的驗證機制。
  • 在刻意缺少的路由上應用程式回傳 404:請求已通過部署保護並到達應用程式。

靜態密鑰後備方案

僅在 OIDC 不可行或工具無法傳送 Trusted Sources 標頭時,才使用 Protection Bypass for Automation。啟用或輪換它會變更存取控制,因此請先取得明確授權。建立一個專用密鑰,以便可以獨立輪換,將其儲存在環境變數中,並作為標頭傳遞:

vc project protection enable <project> --protection-bypass \
  --protection-bypass-secret "$VERCEL_AUTOMATION_BYPASS_SECRET"

agent-browser open "$VERCEL_PREVIEW_URL" --headers \
  "{\"x-vercel-protection-bypass\":\"$VERCEL_AUTOMATION_BYPASS_SECRET\",\"x-vercel-set-bypass-cookie\":\"true\"}"

Cookie 指令會建立一個可重複使用的 _vercel_jwt cookie。請將包含該 cookie 的已儲存瀏覽器狀態視為憑證。

避免死路

  • 沒有 vercel share CLI 命令。可分享連結是為人員設計的,不是自動化路徑。
  • vercel curl 對 HTTP 請求很有用,但它無法渲染頁面並與之互動。
  • 部署保護例外會使網域變成公開。請勿僅為了解除代理封鎖而使用它們。
  • 請勿將 OIDC 令牌、繞過密鑰、經過驗證的 URL 或已儲存狀態暴露在日誌、螢幕截圖、原始碼檔案或用戶可見的輸出中。

Individual skills in this repo

This repo contains 8 individual skills — each has its own dedicated page.

agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to

vercel-labs/agentcore

Run agent-browser on AWS Bedrock AgentCore cloud browsers. Use when the user wants to use AgentCore, run browser automation on AWS, use a cloud browser with AWS credentials, or needs a managed browser session backed by AWS infrastructure. Triggers include "use agentcore", "run on AWS", "cloud browser with AWS", "bedrock browser", "agentcore session", or any task requiring AWS-hosted browser automation.

vercel-labs/derive-client

Reverse-engineer a website's internal API by recording browser traffic into a HAR file, then generate a standalone client or CLI that calls the endpoints directly, with no browser needed after the first recording. Use when asked to "derive a client", "build a CLI for <site>", "reverse engineer this site's API", "record network requests", "turn this site into an API", or when the same site will be automated repeatedly and direct HTTP calls would beat driving the browser every time.

vercel-labs/dogfood

Systematically explore and test a web application to find bugs, UX issues, and other problems. Use when asked to "dogfood", "QA", "exploratory test", "find issues", "bug hunt", "test this app/site/platform", or review the quality of a web application. Produces a structured report with full reproduction evidence -- step-by-step screenshots, repro videos, and detailed repro steps for every issue -- so findings can be handed directly to the responsible teams.

vercel-labs/electron

Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, automate a desktop app, connect to a running app, control a native app, or test an Electron application. Triggers include "automate Slack app", "control VS Code", "interact with Discord app", "test this Electron app", "connect to desktop app", or any task requiring automation of a native Electron application.

vercel-labs/slack

Interact with Slack workspaces using browser automation. Use when the user needs to check unread channels, navigate Slack, send messages, extract data, find information, search conversations, or automate any Slack task. Triggers include "check my Slack", "what channels have unreads", "send a message to", "search Slack for", "extract from Slack", "find who said", or any task requiring programmatic Slack interaction.

vercel-labs/vercel-sandbox

Run agent-browser + Chrome inside Vercel Sandbox microVMs for browser automation from any Vercel-deployed app. Use when the user needs browser automation in a Vercel app (Next.js, SvelteKit, Nuxt, Remix, Astro, etc.), wants to run headless Chrome without binary size limits, needs persistent browser sessions across commands, or wants ephemeral isolated browser environments. Triggers include "Vercel Sandbox browser", "microVM Chrome", "agent-browser in sandbox", "browser automation on Vercel", or any task requiring Chrome in a Vercel Sandbox.

vercel-labs/webmcp-gen

Build and validate experimental WebMCP tools for an existing web page. Use when an agent needs to expose a site's real workflows as page tools, create webmcp.init.js, define deterministic checks, or compare WebMCP with accessibility-tree automation.

相關技能