Communityコーディング&開発github.com

Vercel保護デプロイメントへのアクセス

Vercel認証、SSO、またはデプロイメント保護で保護されたVercelデプロイメントにアクセスしテストします。プレビューURLや本番URLがVercelログインページにリダイレクトされる場合、401や403の保護エラーが返される場合、または静的なバイパスシークレットやパブリック例外の代わりに短命のTrusted Sources OIDC認証が必要な場合に使用します。

Vercel保護デプロイメントへのアクセス とは?

このスキルは、Vercelのデプロイメント保護(Vercel認証、SSO、デプロイメント保護)を通過して、保護されたプレビューまたは本番デプロイメントにアクセスするためのエージェントです。主な仕組みは、呼び出し元の既存のVercel IDを使用し、Vercel CLIから短命のOIDCトークンを発行してもらい、そのトークンを `x-vercel-trusted-oidc-idp-token` ヘッダーとして agent-browser 経由でリクエストに追加することです。これにより、デプロイメント保護を無効にしたり、デプロイメントを公開したり、静的なバイパスシークレットを要求することなく、自動化されたアクセスが可能になります。同じプロジェクトのプレビュー環境へのアクセスは、Vercel CLI 53.3.0以上で通常は設定不要ですが、本番環境や異なるチームからのアクセスにはTrusted Sourcesルールの手動設定が必要です。スキルは、エラー診断、人間の介入が必要なケースの特定、代替手段としての静的なバイパスシークレットの使用もサポートしており、Vercel CLI、agent-browser、および各種Vercelデプロイメント環境に対応しています。

対応~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に質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Protected Vercel Deployments(保護されたVercelデプロイメント)

呼び出し元の既存のVercel IDと短命のOIDCトークンを使用します。デプロイメント保護を無効にしたり、デプロイメントを公開したり、静的なバイパスシークレットを事前に要求したりしないでください。

同一プロジェクトのプレビュー

対象プロジェクトのローカル開発トークンは、デフォルトのTrusted Sources自己アクセスルールを通じて、そのプロジェクトの保護されたプレビューデプロイメントにアクセスできます。通常、Trusted Sourcesの設定は必要ありません。

ローカルIDと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 を返す場合

Trusted Sourcesルールを編集するためのサポートされたVercel CLIや公開REST APIはありません。承認された人間が、対象プロジェクトの Settings → Deployment Protection → Trusted Sources を開き、必要な呼び出し元と環境マッピングのみを追加する必要があります。ローカルトークンは development 環境を持つため、保護された本番環境へのアクセスには development から production へのマッピングが必要です。

処理を停止し、正確なルールを人間に伝えてください。ブラウザ自動化を使用してアクセス制御を変更しないでください。関連のない環境マッピングを拡大しないでください。人間がルールの保存を確認した後、認証された open を再試行してください。

人間の介入境界

同一プロジェクトの開発からプレビューへのパスは、Vercel CLIがすでに認証されていて、対象のプロジェクトとスコープがわかっている場合は、人間の介入なしで実行できる必要があります。人間が必要なのは、以下の場合のみです:

  • Vercel CLIに認証されたIDがなく、既存の VERCEL_TOKEN もない場合。対話的な vc login にはユーザーが必要です。
  • インストールされているVercel CLIが 53.3.0 より古く、トークン発行前にアップグレードが必要な場合
  • トークン発行のために、正しい対象プロジェクトまたはスコープを安全に推測できない場合
  • Trusted Sourcesルールを追加または変更する必要がある場合。ダッシュボードが唯一サポートされている管理面であり、これはアクセス制御を変更します。
  • 呼び出し元プロジェクトでOIDC連携によるセキュアバックエンドアクセスが無効になっており、Settings → Security で再有効化する必要がある場合
  • 静的シークレットのフォールバックを有効化またはローテーションする必要があり、そのアクセス制御変更に対してエージェントが明示的な許可を必要とする場合。承認後、エージェントはダッシュボード操作を必要とせずに vc project protection を使用できます。

エージェントは各ケースを診断し、必要な正確なアクションを明示し、ユーザーが完了を確認した後に続行できます。

正しいヘッダーを使用する

Vercelが発行したトークンを次のように送信します:

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

x-vercel-oidc-token を使用しないでください。そのヘッダーはワークロードIDを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.

関連スキル