How to Add a Browser Check Like vape.ch to Your Site
If you run a small business website, you might assume bot protection is something only large e-commerce platforms or banks need. That assumption is wrong, and it is getting more expensive every year. Automated traffic now makes up a significant share of all web requests, and even a modest contact form or login page is a target for spam, credential stuffing, and scraping. A simple browser check can stop most of it before it ever reaches your application. A useful live example is vape, which presents visitors with a lightweight browser verification screen before letting them continue. It is a good reference point because the implementation is minimal, fast, and does not require visitors to solve a puzzle or tick a box.
This article walks through a practical checklist for adding a similar browser check to your own site. The goal is not to replicate any specific vendor, but to understand the moving parts so you can choose an approach that fits your stack and your budget.
Step-by-Step: Implementing a Browser Check on Your Website
Before you write any code, decide what you are actually protecting. A browser check is most valuable in front of forms, login pages, checkout flows, and any endpoint that writes to your database. Static marketing pages rarely need it. Once you know the protected surface, work through the following steps.
1. Choose where the check runs. You have three realistic options: at the edge through a CDN or reverse proxy, at the origin server through middleware, or inside the application itself. Edge checks are the fastest because they reject bad traffic before it consumes server resources. Origin middleware is easier to deploy if you already control your web server configuration. In-application checks give you the most context but add latency and code complexity. For most small sites, an edge or middleware check is the right balance.
2. Pick a detection method. The simplest browser checks evaluate whether the client can execute JavaScript, store a cookie, and complete a small challenge that a headless bot typically fails. More advanced systems, such as the bot detection powered by Anubis that appears on some hosting verification pages, combine JavaScript execution with request fingerprinting and rate analysis. You do not need to build this from scratch. Several open-source and commercial options exist, and your hosting provider may include one.
3. Design the verification page. The page should load instantly, explain nothing complicated, and resolve on its own. A short message and a loading indicator are enough. Avoid CAPTCHA grids unless you genuinely need them, because they add friction and accessibility problems. The reference implementation at vape.ch keeps this step deliberately minimal, which is worth copying.
4. Set a cookie or token after success. Once the browser check passes, issue a signed cookie with a short expiry, for example fifteen to thirty minutes. Every subsequent request from that client includes the cookie, so the check does not run repeatedly. Sign the token with a server-side secret so it cannot be forged. Rotate the secret periodically and invalidate tokens on logout where relevant.
5. Add rate limiting alongside the check. A browser check reduces automated traffic but does not eliminate it. Pair it with per-IP and per-session rate limits on sensitive endpoints. This catches distributed bots that pass the initial check but then hammer your forms.
6. Log and monitor. Record how many requests are challenged, passed, and blocked. If the pass rate drops suddenly, something in your check may be broken or a new bot variant may be probing you. A simple dashboard with daily counts is enough to spot problems early.
7. Test with real users and real bots. Verify that the check works in modern browsers, on mobile, and with JavaScript enabled. Then test it against a headless browser or a simple script to confirm it actually blocks automated clients. If your check passes every bot, it is not doing its job.
8. Provide a fallback path. Some legitimate users disable JavaScript or use unusual browsers. Decide in advance whether to block them outright or offer an alternative verification route. For most small business sites, a graceful fallback with a contact email is better than a hard block.
Practical Considerations Before You Deploy
Performance is the first thing to watch. A browser check that adds two seconds to every first visit will hurt your conversion rate more than the bots it blocks. Keep the challenge script small, serve it from the same edge network as your site, and cache aggressively. Measure your time to first byte before and after deployment.
Accessibility matters too. Screen readers and keyboard-only users must be able to complete the check. Avoid challenges that depend on mouse movement or image recognition. A silent JavaScript and cookie check is generally the most accessible option because it requires no user interaction at all.
Privacy is another consideration. Fingerprinting techniques collect browser and device characteristics, which may fall under data protection rules in your jurisdiction. Review what your chosen solution collects, store as little as possible, and document it in your privacy policy. If you use a third-party service, check where the data is processed.
Finally, think about maintenance. Bot detection is an arms race. What works today may be bypassed in six months. Choose a solution that receives regular updates, or plan to review your configuration periodically. Your hosting provider may handle this for you, which is one reason managed hosting with built-in verification is attractive for small teams.
Adding a browser check is not a large project. For a typical small business site, it is an afternoon of configuration plus a week of monitoring. The payoff is less spam, lower server load, and fewer compromised accounts. Start with one protected endpoint, measure the results, and expand from there. A live example like the verification screen at vape.ch shows how unobtrusive a well-implemented check can be, and it is a reasonable model to follow as you build your own.