safe-browser

Build local constrained-browser agents with a safe_browser tool that owns CDP, enforces a domain allowlist with Fetch interception, and lets a runtime Claude Agent SDK agent complete browsing tasks without raw browser, shell, or CDP access. Use when the user wants an agent to browse or scrape while staying on approved domains, demo blocked off-domain navigation, or generate a safe browser client.

Namesafe-browser
Pathbrowserbase/safe-browser
Version0.0.0
Originremote
SourceBrowserbase
Authorbrowserbase
RawOpen source file
LicenseMIT

Install

skillctl install -r skillhub browserbase/safe-browser

Safe Browser

Build a local browser-agent demo where the generated runtime agent has exactly one browser capability: safe_browser. The tool owns the Playwright/CDP session, enables Fetch interception for all requests, and fails any request whose host is not allowlisted.

This skill is a builder guide. The skill itself is not the runtime boundary; the generated Claude Agent SDK app is.

When to Use

Default Approach

Use the Claude Agent SDK local template:

cp -R skills/safe-browser/templates/claude-agent-sdk /tmp/safe-browser-demo
cd /tmp/safe-browser-demo
npm install
cp ~/Developer/scratchpad/.env .env 2>/dev/null || true
node hn-scraper-demo.mjs

To watch the local browser instead of running headless:

SAFE_BROWSER_HEADLESS=false node hn-scraper-demo.mjs

If Chromium is missing:

npx playwright install chromium

Runtime Shape

User task
  -> coding agent uses this skill to create a demo app
    -> Claude Agent SDK runtime agent
      -> only tool: safe_browser
        -> local Chromium
        -> CDP Fetch.enable({ urlPattern: "*" })
        -> allowlist decision
          -> Fetch.continueRequest for allowed hosts
          -> Fetch.failRequest for blocked hosts

Tool Design Rules

Expose constrained actions, not raw CDP:

Do not expose { method, params } CDP passthrough. The agent must not be able to call Fetch.disable, create targets, attach new sessions, or run arbitrary shell/browser clients.

For the Hacker News demo, an accessibility snapshot is not necessary. Purpose-built extractors are easier to verify and harder to misuse than a broad page snapshot.

Verification Requirements

Always run the generated demo and show concrete output. A passing demo must prove:

  1. The runtime agent used safe_browser.
  2. It loaded https://news.ycombinator.com.
  3. It extracted at least one front-page story.
  4. It visited an internal HN comments URL.
  5. It attempted an off-domain story URL.
  6. CDP emitted Fetch.requestPaused for that URL.
  7. The firewall answered with Fetch.failRequest.
  8. The current browser URL stayed on news.ycombinator.com.
  9. Artifacts were written: result, audit log, and screenshot.

The template script already performs these assertions.

Notes

Back to all skills