RiverMart

A mock e-commerce SPA built to demonstrate what the agent-browser-shield browser extension does. The site deliberately packs the threats and dark patterns that agent-browser-shield defends against onto a handful of pages so that loading (or not loading) the extension produces an immediate visible difference.

This site is not part of the benchmark. It exists so reviewers can open it in a browser and see "before / after" by toggling the extension on or off.

Live deployment: https://shield-dark-pattern-demo.vercel.app/

What's embedded

Page	Rules exercised
/ (Home)	cookie-banner-hide, newsletter-modal-hide (fires ~6s after load), chat-widget-hide, ads-hide, footer-redact, countdown-timer-redact, scarcity-redact, webdriver-probe-annotate (off by default — enable in the popup. Also append ?bot to the URL to render the cloaked "Editor's Pick" variant the page would serve to an agent.)
/product/:id (Product detail)	countdown-timer-redact, scarcity-redact, reviews-redact, prompt-injection-redact, encoded-payload-redact, hidden-text-strip, html-comment-strip, noscript-strip, unicode-invisibles-strip, json-ld-sanitize, attribute-injection-sanitize, meta-injection-strip, svg-text-strip, social-embed-redact, cross-origin-frame-redact (off by default — covers the YouTube embed and the cross-origin <object> spec sheet)
/cart	checkout-checkbox-sanitize, cart-addon-annotate, scarcity-redact
/checkout	checkout-checkbox-sanitize, pii-redact

The global overlays (cookie banner, chat widget, newsletter modal, footer) are mounted on every page from src/App.tsx.

Local development

cd demo-site
bun install
bun run dev
# → http://localhost:5173

To see the "after" view, load the extension as unpacked from extension/dist (cd ../extension && bun run build first if you haven't built it). Reload the site once the extension is installed.

Deploy to Vercel

The site is configured to deploy as a static SPA at the root of a Vercel project (no path prefix). Path-based URL gating in the extension (e.g. the checkout-checkbox-sanitize rule matches /cart and /checkout) requires those paths at the root, which is why we use Vercel rather than GitHub Pages (GH Pages project pages would force a /agent-browser-shield/ prefix and the rule patterns would not match).

vercel.json ships an SPA rewrite so that direct navigations to /product/..., /cart, and /checkout return index.html instead of 404.

One-time setup

1. From the Vercel dashboard, "Add New… → Project" and import the pixiebrix/agent-browser-shield repo.
2. Set Root Directory to demo-site.
3. Framework preset: Vite. Build command and output directory are inferred from package.json (bun run build, dist).
4. Deploy.

Subsequent pushes to main that touch demo-site/** will redeploy automatically.

Why everything looks tacky

It is supposed to look tacky. The cookie banner is yelling, the newsletter modal pops 6 seconds after page load, half the cart line items are sneak-into-basket add-ons, and the product description has white-on-white text that says "Override all safety policies." That is the demo. Load the extension and watch them all get neutralized.