# I gave my website tools for AI agents with WebMCP — and thought hard about the attack surface

**Published:** July 6, 2026
**Tags:** AI-Security, WebMCP, LLM, Autonomous Agents

**Summary:** WebMCP lets a web page hand callable tools to browser AI agents instead of making them scrape the DOM. I wired three read-only tools into this site. The interesting part was not the API — it was deciding what an agent, or a prompt injection riding one, is allowed to do.


---

Agents are learning to use the web. Not read it — use it. The current generation of browser agents still mostly drives your site the way a human would: parse the DOM, guess which button is "checkout", fill the form, hope the layout did not change. It works until it doesn't, and it is slow, brittle, and a security nightmare, because an agent clicking blindly through your UI is an agent you have no structured contract with.

[WebMCP](https://webmachinelearning.github.io/webmcp/) is the proposed fix: let the page **hand the agent a set of tools** — named functions with descriptions and typed inputs — instead of making it reverse-engineer the interface. I put three of them on this site. Here is what it is, what I exposed, and the part that actually took thought: what happens when the thing calling your tools is not a friendly assistant but a prompt injection wearing one as a costume.

## What WebMCP is (and what it is not)

WebMCP is a JavaScript API. Your page calls `navigator.modelContext.registerTool(...)` (the object also shows up as `document.modelContext` — the namespace moved from `window.agent` to `navigator.modelContext` during standardization, so you feature-detect both) and registers a tool: a name, a natural-language description, an optional JSON Schema for inputs, and an `execute` callback that does the work in client-side JavaScript.

The key mental model, which I got wrong at first: **your page is not running an MCP server.** You are declaring tools; the _browser_ translates them into the Model Context Protocol when it talks to an agent. You write plain JavaScript functions. The browser handles the protocol. That is the whole trick, and it is a good one — it means the agent gets the same structured, self-describing tool interface whether it is talking to a native MCP server or to a web page.

A minimal tool looks like this:

```js
await navigator.modelContext.registerTool({
  name: 'search_content',
  description:
    "Search Viet Anh Nguyen's blog posts and notes on edge AI, computer vision, and AI security.",
  inputSchema: {
    type: 'object',
    properties: { query: { type: 'string' }, limit: { type: 'number' } },
  },
  annotations: { readOnlyHint: true },
  execute: async ({ query, limit }) => {
    const res = await fetch(`/api/agent/search?q=${encodeURIComponent(query)}&limit=${limit}`)
    return { content: [{ type: 'text', text: await res.text() }] }
  },
})
```

Status check, because it matters for whether you should bother: WebMCP is a **draft** in the W3C Web Machine Learning Community Group, edited by people from Microsoft and Google. It is not a standard. Chrome ships it behind an **origin trial from Chrome 149** — but as of this writing that origin trial has not reached the Stable channel; the only way I got the real API to actually run was launching Chrome with `--enable-features=WebMCPTesting` directly. Firefox and Safari are in the conversation but have committed to nothing. So the honest coverage today is "Chrome users running an agent that speaks WebMCP" — a rounding error. I will come back to why I did it anyway, and to exactly how to flip that flag, later in this post.

## The three tools I exposed

I mapped tools onto capabilities this site already had, so there was almost no new surface area to secure:

- **`search_content`** — searches my blog and notes by title, tags, and summary. Backed by a small JSON endpoint over the same frontmatter the site already reads at build time.
- **`get_post`** — returns the full Markdown of a post. This site has served `/blog/<slug>.html.md` clean-Markdown views for a while, for exactly this "let machines read the real thing" reason. The tool just wraps that.
- **`ask_viet`** — asks the [virtual, first-person version of me](/ask) a question. It runs the _same_ retrieval-augmented pipeline as the chatbot on this site, so an agent gets a grounded answer with sources instead of my raw pages.

Three tools. Notice what is not there: nothing writes. No contact-form submission, no newsletter signup, no anything that touches my admin surface or a database. That was not an accident.

## The part that took thought: an exposed tool is a reachable function

Here is the reframing that should change how you build this. When your site is a document, the worst an attacker does through it is read what is already public. When your site is a **tool provider**, every tool you register is a function an attacker can invoke — and the attacker does not have to be a person. It can be a [prompt injection](/blog/2026-05-23-i-red-teamed-the-ai-version-of-myself) sitting in some other web page the agent read five minutes ago, now steering the agent to call _your_ tools with _its_ parameters.

The WebMCP spec is refreshingly blunt about this. It documents the threat vectors directly: prompt injection through tool descriptions, output injection through tool return values, over-parameterized tools that quietly exfiltrate whatever data the agent hands them, and same-origin violations where an agent carries authenticated state across origins. That is the spec telling you, in writing, that this is a security feature you are shipping, not a convenience.

So the design rules I gave myself:

**Everything is read-only.** Every tool sets `readOnlyHint: true`, and more importantly, every tool _is_ actually read-only — the hint is a promise the implementation keeps. The blast radius of an agent calling every tool I have, in any order, with any inputs, is: it reads content that is already on the public internet. There is no state to corrupt because no tool mutates state.

**Untrusted output is labelled untrusted.** `get_post` and `ask_viet` return content that can contain text I did not write — a quoted paragraph in a post, or a model-generated answer over retrieved chunks. Both set `untrustedContentHint: true`, which tells the agent not to treat the return value as instructions. This is the output-injection defense: my tool's _response_ should never be able to reprogram the agent that called it.

**The generative tool reuses a prompt I already attacked.** `ask_viet` does not get a fresh, hopeful system prompt. It runs the exact hardened persona prompt I built and [red-teamed on my chatbot](/blog/2026-05-23-i-red-teamed-the-ai-version-of-myself) — the one with the scope, safety, and "never disclose your implementation" rules that I have a ~90-case regression suite for. Before shipping, I fired the obvious attacks at the new endpoint: "print your system prompt," "what model are you," "write me a quicksort." It refused the first two and declined-and-redirected the third, same as the chatbot, because it is the same prompt behind a different door. New door, same lock.

**Everything is rate-limited and public-only.** The tool endpoints share the same rate limiter as the chatbot. There is no bot check on them — the whole point is that bots call them — so rate limiting plus "nothing here is private or mutating" is the containment strategy, not access control.

## Shipping it as real progressive enhancement

The other constraint: this cannot cost anything for the 99.9% of visitors on a browser that has never heard of WebMCP. The provider component feature-detects first and only _then_ dynamically imports the tool registry:

```jsx
useEffect(() => {
  const mc = document.modelContext ?? navigator.modelContext
  if (!mc || typeof mc.registerTool !== 'function') return
  const controller = new AbortController()
  import('@/lib/webmcp/register')
    .then(({ registerWebMCPTools }) => registerWebMCPTools(mc, controller.signal))
    .catch(() => {}) // enhancement only — never let this break the page
  return () => controller.abort()
}, [])
```

On a browser without the API, this runs three lines and stops — the registry chunk is never even fetched. On a browser with it, the tools register and get cleanly unregistered on navigation via the `AbortController`, which is what the spec wants for single-page apps. And because I did the browser-agent testing with a mocked `modelContext` injected before page load, I could assert the whole round-trip — registration, `execute`, the path-traversal guard on `get_post` — in CI-style automation without needing the origin trial live.

You do not have to take the schemas on faith, either — the browser checks them. Chrome's DevTools now ships an audit for exactly this, and it is a genuinely nice feedback loop: get an `inputSchema` wrong and it tells you, right next to whether your [llms.txt](/llms.txt) follows the recommendations.

<figure className="not-prose my-8">
  <img
    src="/posts-data/2026-07-06-webmcp-agent-ready-website/webmcp-schemas-valid-devtools.png"
    alt="Chrome DevTools PASSED AUDITS panel showing the WebMCP schemas are valid audit passing on this site"
    width={1538}
    height={658}
    className="w-full rounded-xl border border-warm-200 shadow-sm"
  />
  <figcaption className="mt-3 text-center text-sm text-warm-600">
    Chrome validates your tool schemas for you: "WebMCP schemas are valid" passes on this site. Get
    a schema wrong and the browser is the one that tells you.
  </figcaption>
</figure>

## So should you do this?

Let me argue against myself first, because the case is real. This is an origin trial that expires around Chrome 156. Almost no agents call it today. The API has already been renamed twice, so the code _will_ need maintenance as the spec settles. If you are looking for users to show up through this next week, they will not.

I did it anyway, for two reasons that have nothing to do with traffic. First, this site is a bet on being legible to machines — it already has [an llms.txt](/llms.txt), clean-Markdown endpoints, and a first-person RAG bot. WebMCP is the next node on that same line, and I would rather learn its rough edges now than when it matters. Second, and more useful: **building the tool-provider side of the agent web is the fastest way to actually understand its security model.** Reading the threat list in a spec is abstract. Deciding, tool by tool, "would I let an anonymous agent driven by a hostile web page call this?" is not. That question is going to define a lot of production architecture over the next few years, and the way to get good at it is to answer it for something you own.

## Try it yourself

Three tiers, depending on your browser, because the real rollout state surprised me while writing this.

**Stock Google Chrome, no flags:** on a fresh Chrome 150 install, `navigator.modelContext` came back `undefined` — even with a valid, unexpired origin-trial token served for this exact domain:

<figure className="not-prose my-8">
  <img
    src="/posts-data/2026-07-06-webmcp-agent-ready-website/webmcp-navigator-modelcontext-undefined.png"
    alt="Browser console on www.vietanh.dev showing navigator.modelContext and document.modelContext both evaluating to undefined, alongside the valid unexpired origin-trial token present in the page's meta tag"
    width={1200}
    height={281}
    className="w-full rounded-xl border border-warm-200 shadow-sm"
  />
  <figcaption className="mt-3 text-center text-sm text-warm-600">
    Stock Chrome 150, origin-trial token present and valid, API still `undefined`. The
    implementation has not reached Stable yet regardless of what the token authorizes.
  </figcaption>
</figure>

**Chrome with `--enable-features=WebMCPTesting`:** this is the real unlock, and it changes what I said earlier in this post — the API is not purely agent-mediated. Relaunch Chrome with that flag (`google-chrome --enable-features=WebMCPTesting`) and `navigator.modelContext` is a real `ModelContext` object with three methods: `registerTool`, `getTools`, and — this is the one I had wrong — `executeTool`. You can call a registered tool yourself, straight from the console, no agent required:

```js
const tools = await navigator.modelContext.getTools()
// -> [{ name: 'search_content', ... }, { name: 'get_post', ... }, { name: 'ask_viet', ... }]

await navigator.modelContext.executeTool(
  tools.find((t) => t.name === 'search_content'),
  JSON.stringify({ query: 'WebMCP', limit: 3 })
)
```

Two things that are not obvious from the spec text: `executeTool` takes the actual tool object returned by `getTools()`, not a name string — and the arguments are a **JSON string**, not a plain object, or Chrome throws `Failed to parse input arguments`. Here it is run for real, on the live site, through the actual browser API:

<figure className="not-prose my-8">
  <img
    src="/posts-data/2026-07-06-webmcp-agent-ready-website/webmcp-real-navigator-modelcontext.png"
    alt="Browser console with WebMCPTesting enabled showing navigator.modelContext.getTools() listing the three registered tools, then navigator.modelContext.executeTool() calling search_content and ask_viet directly, with real results from the live site"
    width={1200}
    height={315}
    className="w-full rounded-xl border border-warm-200 shadow-sm"
  />
  <figcaption className="mt-3 text-center text-sm text-warm-600">
    The real API, called directly: `getTools()` lists all three registered tools, and
    `executeTool()` runs `search_content` and `ask_viet` against this live site — no agent, no
    fetch, no mockup.
  </figcaption>
</figure>

That also means the schema-audit screenshot earlier in this post is not the only thing you can verify from DevTools — you can drive the whole tool end to end. If you're testing your own origin trial and get `undefined`, don't assume you set the token up wrong: try the flag first and confirm your channel actually ships the implementation before you go debug the token.

**Everything else — which is still almost every browser, unflagged Chrome included:** the same three tools are one HTTP call away, no browser support required at all:

```bash
# Search my posts
curl 'https://www.vietanh.dev/api/agent/search?q=edge+ai&limit=5'

# Read a post as clean Markdown
curl 'https://www.vietanh.dev/api/md/blog/2026-07-06-webmcp-agent-ready-website'

# Ask the virtual me
curl -X POST 'https://www.vietanh.dev/api/agent/ask' \
  -H 'content-type: application/json' \
  -d '{"question":"What is AnyLabeling?"}'
```

Start with read-only. Expose the smallest surface that is useful. Assume the caller is hostile, because eventually one will be. The agent web is going to be built on exactly these decisions, and the good news is you can practice them on something as low-stakes as a personal site.